three.js Buffergeometry - How to Morph 3D Objects

every machine 3.js has a geometry and a material while the material determines how the surface of the object is shaded the geometry determines the shape in 3gs the so-called buffer geometry contains the vertex positions normal vectors and the uvs vertex positions create the 3d shape the normal vectors are orthogonal to the face and specify into which direction the surface is pointing they are crucial for light shading and light reflection rendering the uvs specify the position of the vertex on a 2d texture the shaders can sample a texture and render a pixel with the color from the texture in 3js we can change those values on the fly and morph our 3d geometry in this video we learn how to change those values in the buffer geometry and create some morphing effects [Music] at first i start with a simple scene i have a directional light and a flat plane i want to create sine and cosine waves on that plane and make sure the light shading is working properly in the constructor of the plane geometry i have set the width and the height also i have increased the number of segments which results in having a lot of vertices creating waves on the plane requires iterating all vertex positions and changing their values i can get the total number of vertices by accessing the attributes of the geometry and getting the count of the positions now in the animation loop i can iterate them all in the for loop [Music] in the for loop again i access the positions attribute of the geometry and get the x position of that one vertex then i use the math sine function with the x position and the time and then i am setting the z position of the result of the sign at last i must say that the positions attribute needs an update so 3js will apply my changes when we take a look at the result we see that we have sine waves but the shading does not look properly due to the direction and light the waves should have shady areas this is because the normal vectors are not set correctly they all point upwards so the wave surface is still shaded like a flat surface luckily 3js can handle that for us we simply tell the geometry to compute vertex normals it will update the normals based on the phase directions and everything will be fine again [Music] now we can take the y-axis of the surface into account apply the cosine function in it and use it also for the z value [Music] and now it's time to create a morphing water ball so i have the scene with the directional light and the sphere having water texture the water textures are physical based rendering compliant so we have cool details like light reflections again i need to iterate all vertices of the geometry so i need to know the total count i want to create sine and cosine waves on the sphere and it is trickier than doing it on a flat plane i am creating a clone of the positions these original positions will be used to calculate the new positions over time the normals of the geometry will be overwritten every frame to ensure proper shading therefore i keep a clone of the initial normals because i need them to know into which directions the waves will go up or down in the animation loop again i iterate all vertices of the sphere geometry instead of getting the vertex x and y position i get the x and y uv values the uv is a two dimensional flat mapping of the vertices so can use it to calculate where my waves will occur as usual i apply sine and cosine function using the x and y values and the current time the new vertex position is calculated by using the original vertex position and adding the original normal vector multiplied by the sine and cosine result of the uv values and then of course tell the geometry to calculate normals and update vertex positions and the result is a water ball with waves on it all with proper shading effects [Music] we can also create a basic terrain editor again i start with a basic scene having a plane with texture i want to rise the terrain with a mouse click so i create a listener for mouse click events i use the 3js raycaster to check if the user is clicking on the surface when i get a hit i iterate all vertices of the geometry and use the local2world function of the mesh class to translate the local vertex position to the world position having the world vertex position i can check if the vertex is within the vicinity of the mouse click intersection point on the geometry surface if the vertex is close enough i simply add some value to the z position of the vertex and now i have a basic terrain editor with mouse clicks i can increase the height of some areas on the plane [Music] you

Channel: Genka

Views: 21,910

Keywords: geometry, buffergeometry, threejs, three.js

Id: ZYi0xGp882I

Length: 6min 10sec (370 seconds)

Published: Sun Sep 12 2021