I'm currently experimenting with Three.js to recreate a flower as part of my learning process for transformations.
Below is the code I used to generate the stamen, stem, and petals. My goal is to have multiple petals stemming from the same Petal mesh, but I am only able to achieve one petal (rotated).
// 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);
}
If anyone has any suggestions or tips on how to achieve multiple petals from the same mesh, please let me know. Thanks!