三个 JS 将 3D 尺寸转换为 2D答案

【问题标题】：Three JS convert 3D dimensions to 2D三个 JS 将 3D 尺寸转换为 2D
【发布时间】：2017-11-02 16:34:52
【问题描述】：

我想将球体的世界空间坐标转换为屏幕空间坐标，以获得屏幕空间边界，然后我可以用它来覆盖 div。

理想情况下，我想扩展此函数以返回对象的高度和宽度，以及 x 和 y ：

toScreenPosition : 函数 (obj, 相机) {

    var vector = new THREE.Vector3();

    var widthHalf = 0.5*world.renderer.context.canvas.width;
    var heightHalf = 0.5*world.renderer.context.canvas.height;

    obj.updateMatrixWorld();

    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
    };

},

【问题讨论】：

我假设您的意思是要将世界空间坐标转换为屏幕空间坐标以获得球体的屏幕空间边界？
@Soviut 你是对的。
您应该更新您的问题和标题以提及这些详细信息。你会得到更好的牵引力。
@Soviut 更新

标签： javascript three.js

【解决方案1】：

您可以创建几个 THREE.Object3D 并将它们定位在场景中您要投影到屏幕的主要对象的边框位置。

然后你可以在其他空对象上使用你在主对象上使用的方法，并获取主对象边框在屏幕上的像素位置。

例如，如果您想知道半径为 5 的球体边框的屏幕坐标：

var first = new THREE.Object3D();
var second = new THREE.Object3D();
var third = new THREE.Object3D();
var fourth = new THREE.Object3D();

first.position.set(sphere.x,sphere.y+5,sphere.z);
second.position.set(sphere.x,sphere.y-5,sphere.z);

然后您可以应用您编写的函数，但不是：

obj.updateMatrixWorld();

等等……

你会做的：

first.updateMatrixWorld();
second.updateMatrixWorld();

等等……

然后您将在屏幕上看到这两个对象（位于主对象的边界上）的 x,y 坐标，您可以通过相减来检查高度。

【讨论】：

我不是很关注，你能提供一些示例代码吗？
仅供参考：Object3d 应该是 Object3D，前者会抛出错误，因为它不是 THREE.js 构造函数对象。
赞成。对于仍然遇到问题的任何人，应该注意的是，只有将这段代码放在 Three.js 动画循环中的渲染函数之后，它才能正常工作。

【解决方案2】：

我会编写一个函数，将 3D 点作为输入并返回 2D 屏幕点，就像 there 中的那个一样。然后，如果你处理一个球体，那将很容易：获取 3D 球体的中心，计算 2D 点，这将是覆盖 div 的中心，获取球体表面上的任何 3D 点，计算2D点，你会知道覆盖div所需的半径，从那里你可以很容易地计算出一个矩形区域。

【讨论】：