Three.js: unproject-특정 3D 개체의 '화면 (위, 왼쪽)'에서 실제 위치를 얻는 방법은 무엇입니까?

아마도 프로젝터를 사용하고 있지만 MrDoob은 분명히 이것에 대해 더 많이 알고 있습니다. :)

음은, 어쩌면 우리가해야 object3d.screen 될 것이라고 Vector2 모든 렌더링에 업데이트?

해당 object3D.screen Vector가 모든 object3D의 object3D.position을 2D로 변환하는 데만 사용되는 경우 object3D.screen 값이 너무 작지 않을까요? 내 말은 : x, y, z 위치에있는 모든 메시의 모든 점 x, y, z를 2D 좌표로 변환하는 것이 더 유용 할 것이라고 생각합니다.

즉, 모든 물체의 모든 3D 위치를 미리 계산할 수는 없습니다.

예를 들어 Vector3 (장면의 한 지점을 나타냄) 또는 Vector3와 개체 (Vector3가 개체의 한 지점을 나타냄)를 취하는 THREE.3dto2d() 함수를 사용하는 것이 유용합니다.
그런 다음이 함수는 장면에서 3D 위치를 계산합니다.
마지막으로 카메라, 위치, 회전, projectionMatrix 등을 가져 와서 점을 다시 2D로 변환합니다.

카메라도 함수의 매개 변수 여야한다고 생각합니다.

글쎄 ... Projector.projectScene 이미 그렇게하고 있습니다;)

봐, 나는 그것이 프로젝터 라는 것을 알고 있었다 ... ;-)

그것을 사용한 예가 있습니까?

흠 ... 아직 ...이 함수는 Renderer와 함께 사용하도록 설계되었습니다. 원래 객체와 관계없이 렌더링 할 요소 목록을 반환합니다. 원래 개체에 대한 링크를 넣어야 할 수도 있습니다. 그러면 ... 음, 좀 더 생각할 필요가 있습니다.

나는 현재 휴일이지만 돌아 오자마자 (다음 주) 렌즈 플레어 데모 (또는 무언가)를 할 것입니다.

물론입니다. 즐거운 휴가 보내시고 새로운 데모를 기대하겠습니다! :-)

흠, 이것은 저에게 효과가 있었는데 (r32), r35에서는 더 이상 작동하지 않습니다 ..

  toScreenXY: function(position, camera, jqdiv) {
    // converts 3D position to screen coords
    var pos = position.clone();
    projScreenMat = new THREE.Matrix4();
    projScreenMat.multiply( camera.projectionMatrix, camera.matrix);
    projScreenMat.multiplyVector3(pos);
    return { x: (pos.x+1)*jqdiv.width()/2 + jqdiv.offset().left, 
             y:(-pos.y+1)*jqdiv.height()/2 +jqdiv.offset().top }; 
  },

projScreenMat.multiplyVector3(pos); 이후의 위치는보기의 중심에서 -1과 1 ((0,0) 사이로 제한되었습니다.) 이었지만 이제는 예기치 않게 달라지는 것 같습니다 ..

예, camera.matrix 를 지금 camera.matrixWorldInverse 로 바꿔야합니다.
이것을 시도하십시오 :

toScreenXY: function ( position, camera, jqdiv ) {

    var pos = position.clone();
    projScreenMat = new THREE.Matrix4();
    projScreenMat.multiply( camera.projectionMatrix, camera.matrixWorldInverse );
    projScreenMat.multiplyVector3( pos );

    return { x: ( pos.x + 1 ) * jqdiv.width() / 2 + jqdiv.offset().left,
         y: ( - pos.y + 1) * jqdiv.height() / 2 + jqdiv.offset().top };

}

그래, 매트릭스 변경에 대해 몰랐습니다. 이 프로젝션 기능이 alivedise의 질문에 답하기를 바랍니다.

3D Cube에 대해 제 질문을하는 것이 올바른 스레드라고 생각합니다. 클릭 가능한면으로 캔버스에 큐브를 그렸습니다. 큐브는 X 축과 Y 축에서 자유롭게 회전합니다. 내가 원하는 것은 사용자가 마우스를 놓을 때 가장 앞면을 얻고 자동으로 회전하여 완전히 보이게 만드는 것입니다. 이 맥락에서 어떤 도움이라도 매우 감사 할 것입니다.

감사합니다.

@ imrantariq2011 :이 문제와는 관련이 없습니다. 새 문제를 열어도 될까요? 감사.

텍스처 매핑을 위해 주어진 얼굴에 대한 각 정점에 대한 x, y 화면 좌표를 얻을 수 있기를 원합니다.

위의 (toScreenXY : 함수)를 사용하여 어떻게 할 수 있는지 볼 수 있지만 먼저 주어진 얼굴에 대해 변환 된 (크기 조정, 이동 및 회전 된) 정점 세계가 필요합니다. Projector.projectScene을 살펴보면서 시간을 보냈고 위의 목표를 달성하는 더 간단한 방법이 있는지 궁금합니다. object.matrixWorld.getPosition ()이 얼굴 정점이 아닌 객체의 중심을 얻을 수 있습니다.

예, 위의 코드는 다음 중 하나입니다. .projectScene() 자체에서 코드 비트를 추출하는 것이 가장 좋으면 많은 포인트를 투영해야하는 경우.

여기에 오는 사람들은 이것에 대해 알고 싶어 할 것입니다 :

https://github.com/zachberry/threejs-tracking-3d-to-2d

나는 이것을 사용한다.

toScreenXY (pos3D) 함수
{
var projector = new THREE.Projector ();
var v = projector.projectVector (pos3D, 카메라);
var percX = (vx + 1) / 2;
var percY = (-vy + 1) / 2;
var left = percX * window.innerWidth;
var top = percY * window.innerHeight;

return new THREE.Vector2 (left, top);
}

2014 년 8 월 1 일 금요일 오전 11:24에 Artem Fitiskin [email protected] 은 다음과 같이 썼습니다.

toScreenXY를 사용할 때 나는 매우 큰 가치를 얻습니다.
console.log (pos) : // x : -1474.1436403989792, y : -730.829023361206, z : 3.0004000663757324
jqdiv와 곱하면 함수는 매우 큰 x와 y를 반환합니다.
내가 뭘 잘못하고 있니?
—
이 이메일에 직접 답장하거나 GitHub에서 확인하세요.

뿡 빵뀨

지침에 명시된대로 도움말 요청은 stackoverflow로 전달 되어야합니다. 이 게시판은 버그 및 기능 요청을위한 것입니다.

괜찮아요 ... 두브 씨가 직접 코드를 입력 했으니 어떻게 되나요?

@arieljake # 1979

업그레이드 후에도 누군가가 여전히 이것을 필요로한다면 ...

function screenXY(obj){

  var vector = obj.clone();
  var windowWidth = window.innerWidth;
  var minWidth = 1280;

  if(windowWidth < minWidth) {
    windowWidth = minWidth;
  }

  var widthHalf = (windowWidth/2);
  var heightHalf = (window.innerHeight/2);

  vector.project(camera);

  vector.x = ( vector.x * widthHalf ) + widthHalf;
  vector.y = - ( vector.y * heightHalf ) + heightHalf;
  vector.z = 0;

  return vector;

};

좋아, 아주 오래된 문제이지만 위의 코드에서 작동하지 않는 중첩 개체가 있습니다.
제 경우는 다음과 같습니다. 렌더링 후 중첩 된 개체에 대한 실제 x-and-y (및 z) 위치를 원했기 때문에 위의 예를 적용했습니다.
참고 :

1. 이제 위의 예에서 object.position만이 아니라 전체 개체를 인수로 제공합니다.
2. 또한 이것은 렌더러가 작업을 완료하고 호출 한 후에 만 ​​작동합니다.
3. 중첩되지 않은 객체에서도 작동하지만 몇 가지 계산을 너무 많이 수행합니다.
4. 또한 domElements 또는 zSort 레이블을 정렬하는 데 사용할 수있는 screen-Z도 제공합니다.
   screen-z 상대는 카메라 / 렌더러의 전면 및 후면 클리핑 평면을 기준으로 0과 1 사이이며 내 목적 (정렬)에 적합합니다.
5. renderer.domElement.width 및 renderer.domElement.height로 렌더러의 현재 너비와 높이를 가져올 수 있습니다.

scene.updateMatrixWorld(); 

과

parent.updateMatrixWorld(); 

```js
function nestedObjecttoScreenXYZ (obj, camera, width, height)
{
var vector = new THREE.Vector3 ();
vector.setFromMatrixPosition (obj.matrixWorld);
var widthHalf = (너비 / 2);
var heightHalf = (높이 / 2);
vector.project (카메라);
vector.x = (vector.x * widthHalf) + widthHalf;
vector.y =-(vector.y * heightHalf) + heightHalf;
리턴 벡터;
};

typical call:
```js
var screenpos=NestedObjecttoScreenXY(object,camera,renderer.domElement.width,renderer.domElement.height,true);

누군가 같은 문제에 부딪 힐 경우를 대비해.