CSS3DObject의 대칭 방향 변경

Question

나는 회전하고자하는 CSS 묶음이있는 3D 장면을 가지고있어 모두 공간의 한 점을 가리키고 있습니다. 그들은 z 축 "을 직면"하는 것처럼 기본 단위

var element = document.createElement('div'); 
element.innerHTML = "test"; 
element.style.width = "75px"; 
element.style.height = "10px"; 

var object = new THREE.CSS3DObject(element); 

object.position.x = x; 
object.position.y = y; 
object.position.z = z; 

는, 생성 된 객체가 정의됩니다

내 CSS 오브젝트가 높은 것보다 훨씬 더 넓은 간단한 사각형이다. 즉, lookAt() 함수를 사용하면 객체가 회전하여 "테스트"텍스트가 해당 점을 향하게됩니다.

내 문제는 오히려 div의 "오른쪽 가장자리"가 원하는 지점을 가리키고 있도록 회전하는 것입니다. 나는 업 - 벡터를 노려 보았지만 여전히 업 - 벡터가 가리 키기를 원하기 때문에 일하지 않을 것 같다. 나는 또한 먼저 y 축을 따라 객체 Math.PI/2을 회전 시키려고했지만, lookAt()은 이전에 설정된 회전을 무시하는 것으로 보입니다.

로컬 z 벡터 대신 개체를 재정의해야 할 필요가있는 것처럼 보입니다. 그러면 글로벌 x 벡터와 함께 실행됩니다. 그런 식으로 "보고있는"방향의 물체가 장면의 오른쪽에있는 것입니다. 그런 다음 lookAt()은 올바르게 방향을 지정합니다.

어쩌면 mangling 용어에 대한 죄송합니다, 뉴비 3D 프로그래머가 여기 있습니다.

Answer 1

Object.lookAt(point)은 개체의 내부 양의 z 축이 원하는 지점 방향을 가리 키도록 개체의 방향을 지정합니다. 이 작품

object.lookAt(point); 
object.rotateY(- Math.PI/2); 

three.js를 r.84