'Dynamically update vertices & faces of a Mesh three js
Hey im creating a type go mountain in my scene and want to let the tops of it wiggle to specific values. Now im trying to access the vertices I've set before and specify them again over time trough the update function. How do I access them probably and recalculate the faces?
geom1.vertices = [
new THREE.Vector3( -1000, -300, 0 ),
new THREE.Vector3( -1000, 0, 0 ),
new THREE.Vector3( -20, 120, 0 ),
new THREE.Vector3( 60, 85, 0 ),
new THREE.Vector3( 140, 100, 0 ),
new THREE.Vector3( 1000, 0, 0 ),
new THREE.Vector3( 1000, -300, 0 ),
new THREE.Vector3( 0, -300 , 0 ),
];
geom1.faces = [
new THREE.Face3( 7, 0, 1 ),
new THREE.Face3( 7, 1, 2 ),
new THREE.Face3( 7, 2, 3 ),
new THREE.Face3( 7, 3, 4 ),
new THREE.Face3( 7, 4, 5 ),
new THREE.Face3( 7, 5, 6 ),
];
geom1.computeFaceNormals();
geom1.dynamic = true;
var material1 = new THREE.MeshBasicMaterial( {
color: 0x7dae81,
side: THREE.DoubleSide,
} );
hill1 = new THREE.Mesh( geom1, material1);
in the update function im doing this
geom1.vertices[2].y += 0.1;
geom1.verticesNeedUpdate;
Solution 1:[1]
Update answer for version: Three.js r.114
let material = new THREE.MeshPhongMaterial ({
color: 0xffa94b,
opacity: 0.30,
side: THREE.DoubleSide,
depthWrite: true,
flatShading: true
});
let geometry = new THREE.BufferGeometry();
const vertices = new Float32Array([
v0.x, v0.y, v0.z,
v1.x, v1.y, v1.z,
v2.x, v2.y, v2.z,
v3.x, v3.y, v3.z,
etc...
]);
geometry.addAttribute('position', new THREE.BufferAttribute(vertices, 3));
geometry.setIndex(
[0, 1, 2,
0, 2, 3,
0, 3, 1,
etc...]);
g_myMesh = new THREE.Mesh(geometry, material);
function update_vertices(mesh){
let numVertices = mesh.geometry.attributes.position.count;
for (let v = 0; v < numVertices; v++) {
let o = mesh.geometry.attributes.position;
// Update vertex position, do whatever:
let p = new THREE.Vector3(o.getX(v), o.getY(v)+25.0, o.getZ(v));
mesh.geometry.attributes.position.setXYZ(v, p.x, p.y, p.z);
}
// set to true each time you modify the positions:
mesh.geometry.attributes.position.needsUpdate = true;
mesh.geometry.computeVertexNormals();
}
function animationLoop(){
...
updateVertices(g_myMesh);
...
}
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
Solution | Source |
---|---|
Solution 1 |