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

【问题标题】：Aligning 3D position and orientation of a HTML div with an animated Three.js plane Object3D将 HTML div 的 3D 位置和方向与动画 Three.js 平面 Object3D 对齐
【发布时间】：2020-06-23 04:13:43
【问题描述】：

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

按照this post，我能够让 div 跟随平面位置，但即使遵循 this post 的建议，我仍然无法确定方向

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

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的位置而已

任何帮助将不胜感激。

【问题讨论】：

你考虑过使用 CSS3DRenderer 吗？ threejs.org/docs/index.html#examples/en/renderers/CSS3DRenderer 该页面中有一些演示。
出于某种原因，我确信它已从 3 中弃用，我会调查一下，这绝对是个好主意。

标签： matrix three.js quaternions

【解决方案1】：

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

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

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

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

【讨论】：