3D position (x, y, z)를 2D position (x, y)로 변경

3d object위에 그 object에 대한 설명이 달린 태그를 붙여서 object를 따라다니게 하려고 한다.

div로 만든 태그를 object위에 붙여서 따라다니게 하려면 object의 position 값을 대입해야 되는데 position은 x,y,z 값을 가지고 있고, div는 x, y 값만 가지고 있기 때문에 3d position(x,y,z)를 x,y로 변경해서 사용해야만 한다.

‘cube’라는 이름의 Box를 생성한다.

var geo = new THREE.BoxBufferGeometry( 10, 10, 10 );
var mat = new THREE.MeshPhongMaterial( { color : 0xff0000 } );
var cube = new THREE.Mesh( geo, mat );
    cube.position.set( 0, 5, 0 );
    scene.add( cube );

id가 tag인 div를 생성

 <div id="tag">TAG</div>

tag라는 변수명으로 사용

 <div id="tag">TAG</div>

loop 함수 안에 이 구문을 집어넣고 매 프레임마다 실행한다.

var canvasWidth = window.innerWidth;       // 3D 캔버스의 넓이
var canvasHeight = window.innerHeight;     // 3D 캔버스의 높이
var widthHalf = canvasWidth / 2;           // 3D 캔버스의 넓이의 절반 값
var heightHalf = canvasHeight / 2;         // 3D 캔버스의 높이의 절반 값

var pos = cube.position.clone();           // 큐브의 위치값 복사
pos.project( camera );
pos.x = ( pos.x * widthHalf ) + widthHalf;
pos.y = - ( pos.y * heightHalf ) + heightHalf;

// pos.x 와 pos.y를 2D 상의 좌표로 사용하면 된다.

tag.style.top = pos.y + 'px';
tag.style.left = pos.x + 'px';