3d координаты на позицию 2d экрана

Question

Пытается создать интерактивный графический интерфейс для моего приложения, используя три js. Я нашел этот учебник: http://zachberry.com/blog/tracking-3d-objects-in-2d-with-three-js/

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

function getCoordinates(element, camera) { 

    var p, v, percX, percY, left, top; 
    var projector = new THREE.Projector(); 
    // this will give us position relative to the world 
    p = element.position.clone(); 
    console.log('project p', p); 
    // projectVector will translate position to 2d 
    v = p.project(camera); 
    console.log('project v', v); 

    // translate our vector so that percX=0 represents 
    // the left edge, percX=1 is the right edge, 
    // percY=0 is the top edge, and percY=1 is the bottom edge. 
    percX = (v.x + 1)/2; 
    percY = (-v.y + 1)/2; 

    // scale these values to our viewport size 
    left = percX * window.innerWidth; 
    top = percY * window.innerHeight; 

    console.log('2d coords left', left); 
    console.log('2d coords top', top); 

} 

мне пришлось изменить projector к vector.project и matrixWorld.getPosition().clone() к position.clone().

прохождения позиции (0,0,0) результаты с v = {x: NaN, y: NaN, z: -Infinity}, который не то, что ожидалось

камера, которая IM Пассингу camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 1, 10000)

Answer 1

function getCoordinates(element, camera) { 

    var screenVector = new THREE.Vector3(); 
    element.localToWorld(screenVector); 

    screenVector.project(camera); 

    var posx = Math.round((screenVector.x + 1) * renderer.domElement.offsetWidth/2); 
    var posy = Math.round((1 - screenVector.y) * renderer.domElement.offsetHeight/2); 

    console.log(posx, posy); 
} 

http://jsfiddle.net/L0rdzbej/122/