javascript - 在场景中多次添加相同的几何体？

Question

我正在尝试在 Three.js 上复制一朵花，作为学习如何转换的练习。

这是我创建花蕊、花蕊和花瓣的代码。我希望花瓣从同一个花瓣网格出现不止一次，但最终结果只有一个花瓣(旋转)。

            // stamen
            var stamen_geometry = new THREE.SphereGeometry(0.7,32,32);
            var stamen_material = new THREE.MeshBasicMaterial( { color: 0x00fff0 } );
            stamen = new THREE.Mesh( stamen_geometry, stamen_material );
            stamen.position.set(0,2,0);
            scene.add( stamen );

            // stem
            var stem_geometry = new THREE.CylinderGeometry(0.3, 0.3, 3);
            var stem_material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
            stem = new THREE.Mesh( stem_geometry, stem_material );
            scene.add( stem );

            var pivot = new THREE.Object3D();           

            //petal
            var petal_geometry = new THREE.CylinderGeometry(0, 0.3, 3);
            var petal_material = new THREE.MeshBasicMaterial({ color: 0xff0000 });
            petal = new THREE.Mesh( petal_geometry, petal_material );
            petal.rotation.z = 90 * Math.PI/180;
            petal.position.set(1.5,2,0);
            pivot.add( petal );
            
            for (var i = 0; i < 10; i++) {
                pivot.rotation.y = i*45*Math.PI/180;
                scene.add (pivot);
            }

任何帮助将不胜感激，谢谢

Answer 1

scene.add (pivot);

您必须为每个花瓣创建一个 THREE.Mesh 实例。现在，您一遍又一遍地将相同的 3D 对象添加到场景中。

简化代码:

var petal_geometry = new THREE.CylinderGeometry(0, 0.3, 3);
var petal_material = new THREE.MeshBasicMaterial({ color: 0xff0000 });

for (var i = 0; i < 10; i++) {
    var petal = new THREE.Mesh(petal_geometry, petal_material);
    petal.rotation.y = i*45*Math.PI/180;
    scene.add(petal);
}