After creating a
new THREE.PlaneBufferGeometry(100, 100, 100, 100);
, I successfully updated the position of vertices to alter the shape of the mesh as shown below:
https://i.sstatic.net/87BMP.png
This modification was inspired by the discussion found here: Threejs drag points
Current Objective:
I am now looking to extrude a face (by selecting 4 vertices) in order to achieve a result similar to this:
https://i.sstatic.net/DtYxI.jpg
To maintain a clean output that can be exported as a single mesh using the ColladaExporter
, I aim to keep all modifications within the same mesh.
Edit:
To accomplish this, I will need to duplicate vertices and extrude them upwards. This involves adding 4 new vertices and connecting them together.
My attempt at this process included the following code snippet:
var geo = new THREE.PlaneBufferGeometry(1, 1, 1, 1);
geo.rotateX(-Math.PI * 0.5);
geo.translate(0,0.5,0);
//Now merge them
var newplane = BufferGeometryUtils.mergeBufferGeometries([plane, geo]);
newplane = BufferGeometryUtils.mergeVertices(newplane,1);
The resulting output is displayed here:
https://i.sstatic.net/MkBsK.png
Although I expected all vertices to merge with the plane, leaving a flat surface, only one corner was affected in my test scenario.
In an effort to rectify this, I began constructing a "cube" with multiple components placed strategically, but applying
BufferGeometryUtils.mergeVertices
did not yield the desired vertex merging outcome:
https://i.sstatic.net/M3zAL.png
Edit 2 / Progress Update:
By manually adjusting the vertices and normals, I successfully created a PlaneBufferGeometry
and extruded it as explained in this documentation:
The extruded plane now has interconnected vertices, causing the dragging of one vertex to move an entire section. My current challenge lies in connecting these new vertices to the original grid to prevent unwanted outcomes like this:
https://i.sstatic.net/8s1Bp.png
The ultimate goal remains to merge all vertices, requiring a way to combine the base plane with the newly extruded piece.
Edit 3 / Completed:
Finally achieved my goal! A detailed answer will follow when time permits, after a full day of intense work and exhaustion.