javascript - 实时切换网格的几何图形three.js

Question

我目前正在使用以下内容在 three.js 中创建网格：

sphereGeometry  = new THREE.SphereGeometry( 1, 16,16 );
mesh = new THREE.Mesh( sphereGeometry, material );

我还创建了一个圆环：

torusGeometry   = new THREE.TorusGeometry( 1, 0.42 );

在我的动画循环中的任何时候，我都希望能够将球体换成环面。这可能吗？如何将一种几何图形换成另一种几何图形？

Answer 1

在 Three.js R59 中，setGeometry 和 setMaterial 再次从 Three.Mesh 中移除

您可以做的替换几何体的方法是从场景中删除您的网格，并使用您的新几何体和旧材质创建一个新的网格，然后将其添加回您的场景。这肯定会起作用:)

Answer 2

切换几何结构的成本可能很高。我会简单地将两者添加到场景中并根据您的情况隐藏/显示。

Answer 3

您可以使用SetGeometryCommand实时更改网格的几何形状。

用法：

  editor.execute( new SetGeometryCommand( object, new THREE[ geometry.type ](
        radiusTop,
        radiusBottom,
        height,
        radialSegments,
        heightSegments,
        openEnded
    ) ) );

https://github.com/mrdoob/three.js/blob/dev/editor/js/commands/SetGeometryCommand.js

Answer 4

像这样的东西应该工作

// In this example we will distort a plane
let plane = new THREE.Mesh(g1, m1);
plane.rotation.x = Math.PI * 270 / 180;
plane.position.y = 0;
plane.position.z = 0;
scene.add(plane);

// Distort plane
let positions = plane.geometry.attributes.position.array;
let count = positions.length / 3;

for (let i = 0; i < count; i++) {
    let v = new THREE.Vector3(positions[i * 3], positions[i * 3 + 1], positions[i * 3 + 2]);
    let distanceFromCenterY = Math.abs(v.x) / 100;
    v.z += distanceFromCenterY > .2 ?
         (Math.random() * (20 - .15) + .15) * distanceFromCenterY * 2 :
         (Math.random() * (.8 - .2) + .2) + distanceFromCenterY;
    
    // In this example we are updating the z coordinate or ther vertices
    plane.geometry.attributes.position.array[ i * 3 + 2 ] = v.z;
}
        

Answer 5

试试看这个： http ://threejs.org/docs/58/#Reference/Objects/Mesh

特别是这种方法：

mesh.setGeometry(geometry)

这是在渲染循环中执行此操作的方法（只要您想将球体换成环面，就设置标志）

var flag;  
...
function render () {
    if (flag) {
        mesh.setGeometry(torusGeometry);
        flag = false;
    }
}
render();

如果你想来回翻转（在渲染循环内）：

if (conditions) { 
    mesh.setGeometry(sphereGeometry);
}

if (condition) {
    mesh.setGeometry(torusGeometry);
}