threejs - 几何坐标系到屏幕坐标系答案

【问题标题】：threejs - geometry coordinate system to screen coordinate systemthreejs - 几何坐标系到屏幕坐标系
【发布时间】：2016-12-04 12:16:01
【问题描述】：

平面宽度为 800px：

geometry = new THREE.PlaneGeometry( 800, 20, 0, 0 );

material = new THREE.MeshBasicMaterial({ 
    color:0xFFFFFF,
    side:THREE.DoubleSide 
});

mesh = new THREE.Mesh(geometry, material);
mesh.updateMatrixWorld();
scene.add(mesh);

当我试图操纵它时，使坐标系变得其他垃圾

mesh.geometry.vertices[0].setY(0);
mesh.geometry.vertices[0].setX(0);
mesh.geometry.vertices[0].setZ(0);

mesh.geometry.vertices[1].setY(0);
mesh.geometry.vertices[1].setX(800);
mesh.geometry.vertices[1].setZ(0);

mesh.geometry.vertices[2].setY(20);
mesh.geometry.vertices[2].setX(0);
mesh.geometry.vertices[2].setZ(0);

mesh.geometry.vertices[3].setY(20);
mesh.geometry.vertices[3].setX(800);
mesh.geometry.vertices[3].setZ(0);

mesh.geometry.verticesNeedUpdate = true;

我可以将几何对象的坐标系调整到相机框架的坐标系吗？

0px = 0

【问题讨论】：

你的问题不是很清楚。
我想将单个顶点放在屏幕坐标上。
当你说0px = 0时，你的意思是让场景中的每个坐标（我假设xy，因为屏幕没有az）与屏幕的坐标对齐，即矩形@（30， 50,10) 会（在屏幕上）@ (30px, 50px) 正确吗？
Three.js: converting 3d position to 2d screen position [r69!]的可能重复

标签： javascript three.js

【解决方案1】：

如果这不是您想要的，我深表歉意。如果您的意思是需要将 3d 世界中的 vector3 位置转换为其在屏幕上的 2d 像素位置，这是一个典型的转换：

    getScreenTranslation = function (obj, renderer, camera) {
        var vector = new THREE.Vector3();
        var widthHalf = 0.5 * renderer.context.canvas.width;
        var heightHalf = 0.5 * renderer.context.canvas.height;

        vector.setFromMatrixPosition(obj.matrixWorld);
        vector.project(camera);
        vector.x = vector.x * widthHalf + widthHalf;
        vector.y = -(vector.y * heightHalf) + heightHalf;
        return {
                x: vector.x,
                y: vector.y
        };
   };

请记住，您可能需要补偿画布元素在网页中的位置。

【讨论】：