在场景中添加同一几何图形不止一次？

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 (枢轴)；

您必须为每个花瓣创建一个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);
}