three.js의 3d 사각형으로 렌더링 box2d 사각형

Question

box2d 본문을 캔버스와 함께 렌더링 할 때 box2d는 본문과 각도의 중심을 제공 할 수 있다는 큰 문제가 있습니다 (캔버스는 사각형의 사각형을 좌상 각). 세스 땅에서 몇 가지 튜토리얼을보고 나는이 문제를 우회 지금 (나 자신에 의한이 같은 것을 알아낼 수 없었 것) 잘 작동했습니다

g.ctx.save(); 
g.ctx.translate(b.GetPosition().x*SCALE, b.GetPosition().y*SCALE); 
g.ctx.rotate(b.GetAngle()); 
g.ctx.translate(-(b.GetPosition().x)*SCALE, -(b.GetPosition().y)*SCALE); 
g.ctx.strokeRect(b.GetPosition().x*SCALE-30,b.GetPosition().y*SCALE-5,60,10); 
g.ctx.restore(); 

b 몸이

이 SCALE이입니다 canvas-pixel/box2d-meters 변환기, 60 및 10은 직사각형의 크기입니다 (따라서 30과 5는 절반 치수 임).

_

문제 이제

, 내가 three.js를에 렌더링하고 싶습니다. Box2d는 3d에서 작동하지 않는다는 첫 번째 이의가 있습니다. 그 문제는 없습니다. 단지 2D 사각형 위에 3D 사각형을 만들고 싶습니다. 마지막 차원을 완전히 임의적으로 만들려면 2 차원 축 차원을 box2d에서 가져와야합니다.

필자의 작품에는 3d 피직스가 필요하지 않지만 2d로 충분하지만이 두 번째 피사체에는 3 차원의 두께를 부여하고 싶습니다. 어떻게해야합니까?! 지금까지이 같은 노력했습니다 :

// look from above 
    camera.position.set(0,1000,0); 
    camera.rotation.set(-1.5,0,0); 

    geometry = new THREE.CubeGeometry(200, 60, 10 , 1,1,1); 

    // get b as box2d rectangle 
    loop(){ 
    mesh.rotation.y = -b.GetAngle(); 
    mesh.position.x = b.GetPosition().x*SCALE; 
    mesh.position.y = -b.GetPosition().y*SCALE; 
    } 

불행하게도이 전혀 Box2D의 디버그 무승부로 보이지 않는다. -1.5는 완벽한 90도 각도의 카메라를 켜는 올바른 값이 아닙니다 (정확한 값을 아는 사람이 있습니까?). 그리고 최악의 경우, three.js 사각형은 box2d 움직임을 따르지 않습니다. 거의 동일한 문제가 있습니다. 컨텍스트 변환 및 컨텍스트 회전을 사용하기 전에 표준 캔버스를 사용했습니다.

가능한 해결책을 설명 할 시간이 있으시길 바랍니다. 많은 감사드립니다! :)

편집 : http://game.2x.io/ http://serv1.aelag.com:8082/threeBox

두 번째는 그냥 그렇게 아무 문제 구체 있습니다 : 그것은 누군가가 이미 을했다 (크롬에 WebGL이 필요) 찾습니다 box2d와 threejs 사이의 회전 매핑에서. 첫 번째 것은 또한 큐브와 직사각형을 포함합니다.

Answer 1

어떤 종류의 카메라를 사용하고 있습니까?

"2D"효과를 얻으려면 직교 카메라를 사용해야합니다. 그렇지 않으면 투영 투영 된 물건을 얻게되고 물건이 2D에서 보는 것과 일치하지 않게됩니다.