three.js标签标注、场景信息标注——系统总结，总有一款适合你

在WebGL或者Three.js中，我们可以使用各种方法来标注3D场景中的对象。这里我们将会介绍几种不同的方法，包括使用HTML标签、CSS3D对象以及使用2D标签覆盖3D场景。

方法一：使用HTML标签

HTML标签是最简单的方式来添加标注，但是它可能不适用于3D场景，因为HTML元素是2D的。

// 创建一个HTML元素
let label = document.createElement('div');
label.innerHTML = '这是一个标注';
label.style.position = 'absolute';
 
// 设置位置
label.style.left = '100px';
label.style.top = '50px';
 
// 将其添加到DOM中
document.body.appendChild(label);

方法二：使用CSS3D对象

Three.js提供了CSS3DRenderer，可以用来渲染CSS3D对象。

// 创建一个CSS3D对象
let label = document.createElement('div');
label.innerHTML = '这是一个标注';
label.style.position = 'absolute';
 
// 设置样式
label.style.webkitTransform = 'translateZ(50px)';
label.style.transform = 'translateZ(50px)';
 
// 将其添加到DOM中
document.body.appendChild(label);
 
// 创建CSS3DRenderer
let cssRenderer = new THREE.CSS3DRenderer();
cssRenderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(cssRenderer.domElement);
 
// 创建场景
let scene = new THREE.Scene();
 
// 创建相机
let camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);
 
// 创建3D对象
let labelObject = new THREE.CSS3DObject(label);
labelObject.position.set(100, 50, 0);
scene.add(labelObject);
 
// 渲染
function render() {
    requestAnimationFrame(render);
    cssRenderer.render(scene, camera);
}
render();

方法三：使用2D标签覆盖3D场景

如果你需要在3D场景中添加标注，并且希望它们是3D的，你可以使用2D标签覆盖3D场景。

// 创建2D标签
let label = document.createElement('div');
label.innerHTML = '这是一个标注';
label.style.position = 'absolute';
 
// 设置样式
label.style.background = 'rgba(255,255,255,0.8)';
label.style.color = 'black';
label.style.padding = '5px';
 
// 将其添加到DOM中
document.body.appendChild(label);
 
// 创建WebGLRenderer
let renderer = new THREE.WebGLRenderer({ alpha: true });
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
 
// 创建场景
let scene = new THREE.Scene();
 
// 创建相机
let camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);
 
// 创建3D对象
let labelObject = new THREE.CSS3DObject(label);
labelObject.position.set(100, 50, 0);
scene.add(labelObject);
 
// 渲染
function render() {
    requestAnimationFrame(render);
    renderer.render(scene, camera);
}
render();

以上三种方法各有优缺点，你可以根据实际需求选择最适合你的方法。