1
3 개의 구체와 3 개의 중심을 연결하는 삼각형을 가진 작은 장면을 만들었습니다. 즉, 삼각형 꼭지점 위치는 구 위치와 동일한 변수입니다. 이제 한 구체의 위치를 변경하면 삼각형 정점이 함께 이동해야하므로 (동일한 위치 개체이므로) 세 구체를 연결해야한다고 생각했습니다. 그러나 렌더러가 호출 된 후이 좌표 변경을 수행하면 삼각형이 변경되지 않습니다. (렌더러가 호출되기 전에 구를 움직이면 바뀌지 만) 렌더러가 원래 위치 객체를 사용하지 않고 그 복제본을 사용하지 않는 것 같습니다.three.js 렌더러가 객체 위치를 복제합니까?
Q : 하나의 변수 변경으로 두 개의 개체를 변경할 수 있도록이 복제 동작 (또는 독립 위치에 대한 이유가 무엇이든)을 피할 수있는 방법이 있습니까? 아니면 내가 잘못하고있는거야?
코드 :
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);