In my three.js project, I am constructing a Geometry and filling it with vertices to create a 2D terrain. Once the terrain is generated, I am adding all the Vector3 and Face3 elements to the geometry, and then adjusting each vertex and face on every frame update.
Since I am dynamically modifying the face vertices, I need to notify three.js to update the faces. This is achieved by setting
geometry.elementsNeedUpdate = trueBelow is a snippet illustrating my implementation:
function pushEverything(geom) {
for (var i = 0; i < 10000; i++) {
geom.vertices.push(new THREE.Vector3(...));
geom.faces.push(new THREE.Face3(...));
geom.faces.push(new THREE.Face3(...));
}
}
function rebuild(geom) {
for (var face of geom.faces) {
face.a = ...
face.b = ...
face.c = ...
}
geom.elementsNeedUpdate = true
}
var renderer = new THREE.WebGLRenderer({
canvas: document.getElementById("my-canvas")
});
var geom = new THREE.Geometry();
var camera = new THREE.PerspectiveCamera(...);
pushEverything(geom);
while (true) {
// Perform some terrain modifications
rebuild(geom);
renderer.render(geom, camera);
sleep(1000 / 30);
}
Following the guidance provided in this question, I have tried switching to geometry.vertices[x].copy(...) instead of
geometry.vertices[x] = new Vector3(...)My main concern is: why does enabling
geometry.elementsNeedUpdate = trueGeometry's faces?
I am utilizing three.js version 0.87.1 from NPM.