将 HTML div 的 3D 位置和方向与动画 Three.js 平面对齐 Object3D

Question

尝试在 Threejs 背景上对齐 HTML 内容，我需要将 div 与 3d 平面相匹配。

正在关注 this post I was able to get the div to follow the plane position, but i m still having trouble with the orientation even following advices from

到目前为止这是我的代码：

screenPlane.updateWorldMatrix()
screenPlane.getWorldPosition(tempV)
screenPlane.getWorldQuaternion(tempQuat)
tempRotationV3.copy(screenPlane.up ).applyQuaternion(tempQuat)
tempV.project(camera)
const x = (tempV.x *  .5 + .5) * container.clientWidth
const y = (tempV.y * -.5 + .5) * container.clientHeight
div.style.transform = `translate(-50%, -50%) translate(${x}px,${y}px) `
div.style.transform += ` rotateX(${tempRotationV3.x}rad) rotateY(-${tempRotationV3.y}rad) rotateZ(${tempRotationV3.z}rad)`

位置不错，但方向明显不对：

仅

Here is a jsfiddle demo的位置

如有任何帮助，我们将不胜感激。

Answer 1

感谢@Marquizzo 的评论，我能够 fix the fiddle example 使用 CSS3DRenderer

var div = document.getElementById('overlay');
var cssScene = new THREE.Scene();
var cssObject = new CSS3DObject(div);
// we reference the same position and rotation 
cssObject.position.set(plane.position.x, plane.position.y, plane.position.z);
cssObject.rotation.set(plane.rotation.x, plane.rotation.y, plane.rotation.z);
// add it to the css scene
cssScene.add(cssObject);

var cssRenderer = new CSS3DRenderer();
cssRenderer.setSize( window.innerWidth, window.innerHeight );
cssRenderer.domElement.style.position = 'absolute';
cssRenderer.domElement.style.top = 0;
document.body.appendChild( cssRenderer.domElement );
window.div = cssObject

请注意，CSS3DRenderer 并未被 ThreeJS 弃用，但它是单独提供的，以保持主库更轻便。所以请确保单独导入它：

import { CSS3DRenderer, CSS3DObject } from 'https://threejs.org/examples/jsm/renderers/CSS3DRenderer.js';

将 HTML div 的 3D 位置和方向与动画 Three.js 平面对齐 Object3D

Aligning 3D position and orientation of a HTML div with an animated Three.js plane Object3D

matrix

quaternions

three.js