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

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

附件是一个示例plunkr和转换代码

白色的facebook按钮应该与红色平面对齐

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

---

我强烈建议不要尝试将其与摄影机空间匹配，而是将图像作为纹理贴图应用于红色平面，然后使用光线投射查看单击是否经过该平面。在平移和旋转符号，然后将其隐藏在立方体后面等过程中，您可以省去自己的头疼

---

这比尝试旋转和匹配要灵活和容易得多。然后，无论“btn”onclick函数是什么，只要在检测到与平面的光线投射碰撞时调用即可

，这就是

css3drender

的作用。请参见“沙盒”示例。显示更新后的plnkr，如果它正常工作。：）

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