Question

注意：以下代码更新了WestLangley的修复程序。

我尝试了几个从3D投影到2D的例子。但是，当我尝试使用projectVector时，结果不在-1和1之间，因此当我乘以窗口的宽度/高度时，我得到的数字非常大（远大于我的屏幕分辨率）。希望我的问题很简单。我正在使用three.min.js r56，我的内部窗口尺寸是1366x418。

以下代码产生3D点（1200,625,100）的投影（x，y）:( - 7.874704599380493，-13.403168320655823）。我知道我仍然需要通过窗口高度和宽度的一半来获得多个结果，但是得到的（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>

Answer 1

渲染器会为您做一些通常在渲染循环中完成的计算。

由于您已将render()的单个电话作为脚本的最后一行，因此未完成这些操作。

您需要在camera.lookAt()之后放置以下行：

camera.updateMatrixWorld();

或者，您可以移动

renderer.render( scene, camera );

致电，以便在您致电toXYCoord()功能之前发生。

projectVector结果不在-1和1之间（three.js）

1 个答案: