如何将世界旋转转换为屏幕旋转？

Question

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

附件是一个例子plunkr＆amp;转换代码。

白色的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函数是什么，只需在检测到与平面的光线投影碰撞时调用