three.js - 如何将世界旋转转换为屏幕旋转？

Question

我需要将 3D 对象的位置和旋转转换为屏幕位置和旋转。我可以轻松转换位置，但不能转换旋转。我尝试转换相机的旋转，但它不匹配。

附件是示例 plunkr 和转换代码。

白色的 Facebook 按钮应与红色平面对齐。

https://plnkr.co/edit/0MOKrc1lc2Bqw1MMZnZV?p=preview

function toScreenPosition(position, camera, width, height) {
    var p = new THREE.Vector3(position.x, position.y, position.z);
    var vector = p.project(camera);
    vector.x = (vector.x + 1) / 2 * width;
    vector.y = -(vector.y - 1) / 2 * height;

    return vector;
}

function updateScreenElements() {
    var btn = document.querySelector('#btn-share')
    var pos = plane.getWorldPosition();
    var vec = toScreenPosition(pos, camera, canvas.width, canvas.height);
    var translate = "translate3d("+vec.x+"px,"+vec.y+"px,"+vec.z+"px)";
    var euler = camera.getWorldRotation();
    var rotate = "rotateX("+euler.x+"rad)"+
      " rotateY("+(euler.y)+"rad)"+
      " rotateY("+(euler.z)+"rad)";

    btn.style.transform= translate+ " "+rotate;
}

...以及问题的屏幕截图。

Answer 1

我强烈建议不要尝试将其与相机空间匹配，而是将图像作为纹理贴图应用到红色平面，然后使用光线转换来查看单击是否越过该平面。您可以省去平移和旋转的麻烦，然后在符号位于立方体后面时隐藏符号等

check out the THREEjs examples to see how to use the Raycaster.它比尝试进行轮换和匹配更加灵活和容易。然后，无论“btn”onclick 函数是什么，您只需在检测到与平面的光线转换碰撞时调用