7

位置（x、y、z）の3Dオブジェクトがあります。そのオブジェクトの画面位置（x、y）を計算するにはどうすればよいですか？

私はそれを検索しましたが、1つの解決策は、投影行列を見つけてから、3D位置ポイントにこの行列を掛けて2D表示面（コンピューター画面）に投影する必要があることです。しかし、Three.jsでこのマトリックスを見つける方法がわかりません。

このような変換関数を試しましたが、間違った結果になります

function Point3DToScreen2D(point3D){
            var screenX = 0;
            var screenY = 0;
            var inputX = point3D.x - camera.position.x;
            var inputY = point3D.y - camera.position.y;
            var inputZ = point3D.z - camera.position.z;
            var aspectRatio = renderer.domElement.width / renderer.domElement.height;
            screenX = inputX / (-inputZ * Math.tan(camera.fov/2));
            screenY = (inputY * aspectRatio) / (-inputZ * Math.tan(camera.fov / 2));
            screenX = screenX * renderer.domElement.width;
            screenY = renderer.domElement.height * (1-screenY);
            return {x: screenX, y: screenY};
        }

少し早いですがお礼を。

4

3 に答える 3

5

最後に、次のコードで実行します。

注: div パラメータ = キャンバス dom 要素。

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

            var offset = findOffset(div);

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

        }
function findOffset(element) { 
          var pos = new Object();
          pos.left = pos.top = 0;        
          if (element.offsetParent)  
          { 
            do  
            { 
              pos.left += element.offsetLeft; 
              pos.top += element.offsetTop; 
            } while (element = element.offsetParent); 
          } 
          return pos;
        }
于 2012-07-20T04:17:02.107 に答える
-1

デモでソースをチェックしてください: http://stemkoski.github.com/Three.js/Mouse-Over.html

あなたが興味を持っていると思われるオブジェクトは THREE.Projector(); です。これは、たとえば、画面上のマウス カーソルの位置から光線を作成し、それをシーンに投影する計算を自動化するために使用できます。

于 2012-07-19T03:37:54.873 に答える