在three.js中动态添加和旋转几何

Question

Refer https://jsfiddle.net/pmankar/svt0nhuv/

Main large red icosahedron geometry keeps rotating about the y axis. I added a small red sphere geometry and merged it to the main large red icosahedron geometry. Until here it works fine. For this I used, THREE.GeometryUtils.merge(point_sphere_iso_geom, sphere);

However, when I try to add spheres dynamically with a mouse click, they are added (yellow spheres), but they do not rotate with the main large red icosahedron geometry.

Can anyone explain why does it works in the initial case, but not when added dynamically and how to achieve it dynamically as well.

Answer 1

I hope I understood you correctly. Every mouse click you have to create a new geometry based on the previous one (mesh geometry and mesh matrix), merging it with the geometry of a new sphere, and apply it to a new mesh, then remove the old mesh and add the new one.

some changes in vars

var geometry, material, point_sphere_iso_geom, mesh;

in creation of the start merged mesh

point_sphere_iso_geom = new THREE.IcosahedronGeometry(100, 4);
cygeo = new THREE.SphereGeometry(5, 10, 10);
cygeo.translate(0,0,120);
point_sphere_iso_geom.merge( cygeo );
mesh = new THREE.Mesh(point_sphere_iso_geom, material);

and in the function of addYellowPoint

function addYellowPoint(valX, valY) {
    var sgeometry = new THREE.SphereGeometry(2.5, 10, 10);

    var range = 150;
    var x = Math.random() * range - range / 2;
    var y = Math.random() * range - range / 2;
    var z = Math.random() * range - range / 2;
    sgeometry.translate(x,y,z);
    point_sphere_iso_geom = mesh.geometry.clone();
    point_sphere_iso_geom.applyMatrix(mesh.matrix);
    point_sphere_iso_geom.merge(sgeometry);

    scene.remove(mesh);
    mesh.geometry.dispose();
    mesh.material.dispose();
    mesh = new THREE.Mesh(point_sphere_iso_geom, material);
    scene.add(mesh);
}