【Three.js】知识梳理十八：CSS2D/CSS3D渲染器

在Three.js开发过程中，有时需要将 HTML 元素与 Three.js 渲染的 3D 场景相结合，这就需要用到 CSS2DRenderer 和 CSS3DRenderer。本文将详细介绍这两种渲染器的原理及其应用。

一、CSS2DRenderer 渲染器

概述

CSS2DRenderer 渲染器用于在 3D 场景中渲染纯 2D 的 HTML 元素。这些元素不会具有 3D 透视效果，但可以与 3D 对象一起移动和旋转，非常适合用于标签、注释等需要固定显示的内容。

案例： three.js examples (threejs.org)

使用方法

引入库

首先，需要确保已经引入了 Three.js 库和 CSS2DRenderer 渲染器。

js 复制代码

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
<script src="https://threejs.org/examples/js/renderers/CSS2DRenderer.js"></script>

初始化 CSS2DRenderer

js 复制代码

// 创建 CSS2D 渲染器
const labelRenderer = new THREE.CSS2DRenderer();
labelRenderer.setSize(window.innerWidth, window.innerHeight);
labelRenderer.domElement.style.position = 'absolute';
labelRenderer.domElement.style.top = '0px';
document.body.appendChild(labelRenderer.domElement);

创建 HTML 标签并添加到场景中

js 复制代码

// 创建 HTML 元素
const div = document.createElement('div');
div.className = 'label';
div.textContent = 'Hello, CSS2D!';
const label = new THREE.CSS2DObject(div);

// 将标签添加到一个 Three.js 对象上
const object = new THREE.Mesh(new THREE.BoxGeometry(1, 1, 1), new THREE.MeshBasicMaterial({ color: 0x00ff00 }));
object.add(label);
scene.add(object);

渲染场景

js 复制代码

function animate() {
    requestAnimationFrame(animate);
    renderer.render(scene, camera);
    labelRenderer.render(scene, camera);
}
animate();

适用场景

CSS2DRenderer 非常适合用于渲染不需要 3D 透视效果的元素，比如工具提示、标签、注释等。这些元素在视图变换时始终保持朝向屏幕，提供清晰易读的信息展示。

二、CSS3DRenderer 渲染器

概述

CSS3DRenderer 渲染器用于在 3D 场景中渲染具有 3D 透视效果的 HTML 元素。相比 CSS2DRenderer，它可以让 HTML 元素更好地融入 3D 场景，具有真实的空间感。

案例： three.js examples (threejs.org)

使用方法

引入库

首先，需要确保已经引入了 Three.js 库和 CSS3DRenderer 渲染器。

js 复制代码

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
<script src="https://threejs.org/examples/js/renderers/CSS3DRenderer.js"></script>l

初始化 CSS3DRenderer

js 复制代码

// 创建 CSS3D 渲染器
const css3DRenderer = new THREE.CSS3DRenderer();
css3DRenderer.setSize(window.innerWidth, window.innerHeight);
css3DRenderer.domElement.style.position = 'absolute';
css3DRenderer.domElement.style.top = '0px';
document.body.appendChild(css3DRenderer.domElement);

创建 HTML 元素并添加到场景中

js 复制代码

// 创建 HTML 元素
const iframe = document.createElement('iframe');
iframe.src = 'https://threejs.org';
iframe.style.border = '0px';
const css3DObject = new THREE.CSS3DObject(iframe);
css3DObject.position.set(0, 0, -500);
css3DObject.rotation.y = Math.PI;
scene.add(css3DObject);

渲染场景

js 复制代码

function animate() {
    requestAnimationFrame(animate);
    renderer.render(scene, camera);
    css3DRenderer.render(scene, camera);
}
animate();

适用场景

CSS3DRenderer 非常适合用于渲染需要 3D 透视效果的元素，比如嵌入的网页、视频播放器等。这些元素可以随场景变换产生真实的 3D 效果，为用户提供更为沉浸的交互体验。

Three.js 提供的 CSS2DRenderer 和 CSS3DRenderer 渲染器让我们能够将 HTML 元素无缝地集成到 3D 场景中。通过正确使用这些渲染器，我们可以实现更丰富的交互效果和信息展示，为用户带来更佳的视觉体验。