2

注: 以下のコードは WestLangley の修正で更新されました。

3D から 2D への投影の例をいくつか試しました。ただし、projectVector を使用しようとすると、結果が -1 と 1 の間ではないため、ウィンドウの幅/高さを掛けると、非常に大きな数値 (画面の解像度よりもはるかに大きい) が得られます。私の問題が単純なものであることを願っています。three.min.js r56 を使用しており、内部ウィンドウのサイズは 1366x418 です。

以下のコードは、3D ポイント (1200,625,100) に対して (-7.874704599380493,-13.403168320655823) の射影 (x,y) を生成します。この結果をウィンドウの高さと幅の半分などで乗算する必要があることはわかっていますが、結果のピクセル単位の (x,y) は画面から大きく外れています。

<html>
<head>
<title>Test</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">

<script type="text/javascript" src="three.min.js"></script>
</head>
<body>
<canvas id='container'></canvas>

<script>

    /// GLOBAL VARIABLES
    var camera, scene, renderer, container, projector;

    init();

    function toXYCoord (object) {
        var vector = projector.projectVector(object.position.clone(), camera);
        return vector;
    }

    /// INIT
    function init() {

        scene = new THREE.Scene();

        camera = new THREE.PerspectiveCamera(  50, window.innerWidth / window.innerHeight, 0.1, 20000 );
        scene.add(camera);
        camera.position.set(0,-1500,1500);
        camera.lookAt(scene.position);
        camera.updateMatrixWorld();     ///////////////// THIS IS THE FIX
        projector = new THREE.Projector();

        // sphere   
        var sphere = new THREE.Mesh( new THREE.SphereGeometry( 200, 32, 16 ), new THREE.MeshBasicMaterial({ color: 0x000000 }) );
        sphere.position.set(1200,625,100);
        scene.add(sphere);

        container = document.getElementById('container');
        renderer = new THREE.WebGLRenderer( { canvas: container, antialias:true } );
        renderer.setSize( window.innerWidth, window.innerHeight );

        var testVector = toXYCoord(sphere);

        console.log(window.innerWidth + "x" + window.innerHeight);
        console.log("Got: (" + testVector.x + "," + testVector.y + ")");

        renderer.render( scene, camera );
    }

</script>

</body>
</html>
4

1 に答える 1

2

レンダラーは、通常はレンダー ループで行われるいくつかの計算を行います。

render()単一の呼び出しをスクリプトの最後の行として配置したため、これらは実行されていません。

の後に次の行を配置する必要がありますcamera.lookAt()。

camera.updateMatrixWorld();

または、移動することもできます

renderer.render( scene, camera );

関数への呼び出しの前に発生するように呼び出しますtoXYCoord()。

于 2013-03-07T02:10:29.880 に答える