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

【问题标题】：Dynamically update vertices & faces of a Mesh three js动态更新一个Mesh的三个js的顶点和面
【发布时间】：2017-05-27 15:05:07
【问题描述】：

嘿，我在我的场景中创建了一个类型 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;

【问题讨论】：

标签： three.js vertices

【解决方案1】：

你需要设置

geometry.verticesNeedUpdate = true;

有关详细信息，请参阅verticesNeedUpdate in Three.js。

另外，Geometry 没有 dynamic 属性。

three.js r.85

【讨论】：

【解决方案2】：

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

【讨论】：