I recently designed a small scene featuring 3 spheres connected by a triangle with vertices at the centers of the spheres. Surprisingly, when I moved one of the spheres, the triangle did not move with it as expected. It appears that the renderer may not be using the original position objects but rather clones of them.
Q: How can I prevent this cloning behavior and ensure that changing the position of one object affects another linked object? Or is there something wrong with my approach?
Below is the code snippet:
var width = window.innerWidth;
var height = window.innerHeight;
var renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(width, height);
document.body.appendChild(renderer.domElement);
var scene = new THREE.Scene;
var camera = new THREE.PerspectiveCamera(30, width / height, 0.1, 10000);
camera.position = new THREE.Vector3(50, 50, 50);
camera.lookAt(new THREE.Vector3(0, 0, 0));
scene.add(camera);
var pointLight = new THREE.PointLight(0xffffff);
pointLight.position = camera.position;
scene.add(pointLight);
var sphere = [];
var sphereGeometry = new THREE.SphereGeometry(1, 8, 8);
var sphereMaterial = new THREE.MeshLambertMaterial({ color: 0xff0000 });
var triGeom = new THREE.Geometry();
for (var i = 0; i < 3; i++) {
sphere[i] = new THREE.Mesh(sphereGeometry, sphereMaterial);
sphere[i].position = new THREE.Vector3(10 * i, 20 + 5 * (i - 1) ^ 2, 0);
scene.add(sphere[i]);
triGeom.vertices.push(sphere[i].position);
}
triGeom.faces.push(new THREE.Face3(0, 1, 2));
triGeom.computeFaceNormals();
var tri = new THREE.Mesh(triGeom, new THREE.MeshLambertMaterial({ side: THREE.DoubleSide, color: 0x00ff00 }));
scene.add(tri);
sphere[0].position.x += 10; // this changes both sphere and triangle vertex
renderer.render(scene, camera);
sphere[1].position.x += 10; // this changes only the sphere
renderer.render(scene, camera);