实时切换网格的几何图形three.js答案

【问题标题】：Switch the geometry of a mesh in real time three.js实时切换网格的几何图形three.js
【发布时间】：2013-06-16 15:41:30
【问题描述】：

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

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

我还创建了一个圆环：

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

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

【问题讨论】：

您是否让几何切换工作？

标签： javascript geometry three.js webgl

【解决方案1】：

试试看这个：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);
}

【讨论】：

这行不通了...请参阅下面的答案并接受+赞成

【解决方案2】：

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

【讨论】：

如何隐藏几何图形？
@BartekKosa 每个THREE.Object3D 都有一个.visible 属性。可以实时设置为false或true。

【解决方案3】：

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

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

【讨论】：

如何有效地从场景中移除对象？ Object3D.remove() 对子数组进行线性扫描：github.com/mrdoob/three.js/blob/master/src/core/…

【解决方案4】：

您可以使用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

【讨论】：

【解决方案5】：

这样的东西应该可以工作

// 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;
}

【讨论】：