动态更新Mesh三个js的顶点和面

Question

嘿，我正在我的场景中创建一个 go mountain 类型，并想让它的顶部摆动到特定值。现在我试图访问我之前设置的顶点，并随着时间的推移通过更新功能再次指定它们。我应该如何访问它们并重新计算面孔？

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);

我在更新功能中这样做

geom1.vertices[2].y += 0.1;
geom1.verticesNeedUpdate;

Answer 1

您需要设置

geometry.verticesNeedUpdate = true;

有关详细信息，请参阅。

此外，Geometry 没有 dynamic 属性。

three.js r.85

Answer 2

更新版本答案： 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);
    ...
}

动态更新Mesh三个js的顶点和面

Dynamically update vertices & faces of a Mesh three js

vertices

three.js