步骤
// 引入CSS2模型对象CSS2DObject
import { CSS2DObject, CSS2DRenderer } from 'three/examples/jsm/renderers/CSS2DRenderer.js';
创建标签对象：首先需要创建一个标签对象，例如使用 CSS2DObject 来生成可视化的标签。
// 创建一个标签
const div = document.createElement('div');
div.innerHTML = "这是一个标签"; // 标签内容
设置标签位置：给标签设置一个明确的 position 属性，该位置是相对于场景坐标系的。
div.classList.add('tag-3d'); // 添加样式类
// 创建 CSS2DObject
const tag = new CSS2DObject(div);
// 设置标签的位置 (X, Y, Z)
tag.position.set(10, 5, 0);// 在场景中的指定位置
标签添加样式
将标签添加到场景：最后，将标签对象添加到 scene 中，使其能够渲染。
scene.add(tag);
添加渲染器
// 创建 CSS2DRenderer
const css2Renderer = new CSS2DRenderer();
css2Renderer.setSize(window.innerWidth, window.innerHeight);
css2Renderer.domElement.style.position = 'absolute';
css2Renderer.domElement.style.top = '0px';
css2Renderer.domElement.style.pointerEvents = 'none'; // 允许鼠标事件通过
// 将 CSS2DRenderer 添加到页面
document.body.appendChild(css2Renderer.domElement);
更新渲染信息
const animate=()=>{
requestAnimationFrame(animate);
// 渲染 Three.js 场景
renderer.render(scene,camera);
// 渲染 CSS2DObject
css2Renderer.render(scene,camera);
};
animate();
