threejs look (일종의)

Question

나는 내 물건에서 한 물건을 가리키는 화살처럼 보이는 도형을 가지고있다. 그것은 카메라를 직접보고 추가됩니다. 카메라가 x, y를 향하고 있다고 상상해보십시오 (예 : 앞면은 첫 번째 그림 참조). 사용자가 "오른쪽"(z, x)로 회전하면 끝이 보일 것이므로 아무 것도 볼 수 없습니다. 괜찮아요. 그러나 무한히 얇아서, 위/아래에서 보면 똑같습니다. 그리고 낚시를 시작할 때 화살표를 말할 수 없습니다. 그게 내가 막고 싶은 것입니다.

렌더링 중에 lookat (camera.postion)을 사용하면 화살표가 더 이상 두 객체에 대한 원래 위치에 있지 않습니다.

내가 이것을 할 수있는 유일한 방법은 카메라가 움직일 때 단일 축을 따라 화살표를 회전시키는 것입니다. 사용자가가 사라지고 대신 장면을 회전 할 때 메신저 내가 시도하고 설명 할 수있는 이미지를 첨부 여기에 다른 suggestionsenter 이미지 설명

을 찾고 더 나은

는 기본적으로 나는 화살표 화살표처럼 할 꼭대기에서 볼 때 아무 것도. 이 화살표는 어떤 위치/방향으로 추가 될 수 있으므로 더 까다로워 질 수 있음을 유의하십시오.

Answer 1

두 가지 옵션이 있습니다. 완전 3D 옵션과 가짜 2D 옵션.

A. 차원 옵션

당신의 화살표가 기본 축 (꼬리에 머리에서 실행)와 (평평한 모양에 수직) 보조 축을 가지고 가정하자. 카메라 위치와 보조 축 간의 각도를 계산하면됩니다. 여기 이미지가 있습니다. 찾는 각도는 노란색 원호입니다.

그

은 당신의 화살표가 어떻게 정의되는지 분명하지 않다과 XYZ 축 중 어느 것이 기본이며, 차 때문에 여기에서 제공하지 않는 아주 간단한 계산이다.

각도를 알면 기본 축을 중심으로 화살표를 각도만큼 회전 할 수 있습니다. 그러면 화살표가 가장 잘 보이는 위치로 회전합니다.

카메라가 주 축에있는 경우 각도가 정의되지 않습니다. 하지만 어쨌든이 카메라 위치에서 어떤 화살도 보지 못할 것입니다.

B. 2 차원 옵션은

이 조금 더 간단합니다. 화살표를 3D로 렌더링하지 마십시오. 화살의 머리와 꼬리 위치를 3D로 추적하면됩니다. 카메라 위치가 변경되면이 3D 위치를 2D 캔버스 좌표로 투영합니다. 그런 다음 2D 머리 및 꼬리 위치 사이에 2D 모양을 그릴 수 있습니다. 2D 모양을 그리려면 현재 WebGL 캔버스 위에 투명한 2D 캔버스를 만들어야합니다.

2D 옵션의 단점은 3D 장면 위에 화살표가 겹쳐져 파란색 큐브와 겹쳐지는 경우입니다.