My current project involves trying to connect a box to a sphere in ThreeJS when they intersect, similar to Katamari Damacy. However, when I add the box to the sphere's hierarchy, they don't merge as expected and end up far apart. Here is my code snippet:
var ball_geometry = new THREE.TetrahedronGeometry( 10, 2 );
var ball_material = new THREE.MeshPhongMaterial( {shading:THREE.FlatShading} );
player.mesh = new THREE.Mesh( ball_geometry, ball_material );
player.mesh.position.set(0,30,0);
scene.add( player.mesh );
var box_geometry = new THREE.BoxGeometry( 20, 10, 10 );
var box_material = new THREE.MeshPhongMaterial( { shading:THREE.FlatShading});
box = new THREE.Mesh( box_geometry, box_material );
box.position.set(50,10,50);
scene.add( box);
player.mesh.add(box);
Upon testing, it appears that the initial position of player.mesh affects how close the objects are after merging. If the player.mesh spawns far away and then collides with the box, the distance between them is greater.
If anyone has advice on how to approach this issue, I would greatly appreciate it. Thank you!