Three.js устанавливающее положение 2d проекции на краю экрана

Question

Я использую код этого ответа, чтобы найти положение экрана 3d объектов в three.js:

Converting 3D position to 2d screen position [r69!]

I 'Рисуем 2d-строку с позиции 3D-объекта в сцене до 2-й точки на экране. несколько раз 3D-объект находится вне области просмотра. в этом случае я хотел бы нарисовать линию из 2d точки на экране до края к невидимому объекту, но я хочу, чтобы она была точной в правильном положении и в правильном положении.

У кого-нибудь есть предложения?

Answer 1

Вы можете использовать THREE.Raycaster() и .depthTest = false свойство материала объекта THREE.Line() для выполнения этого «трюка».

raycaster.setFromCamera(mouse, camera); 
raycaster.ray.at(1, dummyObject.position); 

это дает нам точку, не далеко (1 блок) из камеры, с которой вы можете установить начало строки к объекту.

И

var line = new THREE.Line(lineGeom, new THREE.LineBasicMaterial({ color: color })); 
line.material.depthTest = false; 

линия будет всегда видна и не может быть скрыта от других объектов.

jsfiddle пример. Вы можете использовать масштабирование и поворот, чтобы объект, связанный с красной точкой, вышел из окна просмотра, а красная линия привязки будет под прямым углом.