ThreeJS入门（226）：THREE.CSS3DRenderer 知识详解，示例代码

作者： 还是大剑师兰特 ，曾为美国某知名大学计算机专业研究生，现为国内GIS领域高级前端工程师，CSDN知名博主，深耕openlayers、leaflet、mapbox、cesium，webgl，ThreeJS，canvas，echarts等技术开发，欢迎加微信（gis-dajianshi），一起交流。

查看本专栏目录 - 本文是第 226篇入门文章

THREE.CSS3DRenderer 是 Three.js 中的一个特殊类型的渲染器，用于在 Three.js 场景中渲染基于 CSS 的 3D 图形元素。这个渲染器允许你在 3D 场景中添加 HTML 元素，如文本标签、图标和其他 2D 或 3D 图形，并将它们绑定到 3D 几何体上，使得这些元素能够在 3D 场景中正确地定位和显示。

特性

• CSS 元素：支持将 HTML 元素作为 3D 图形元素添加到 Three.js 场景中。
• 定位：支持将 2D 或 3D 元素绑定到 3D 几何体上，并根据相机的视角正确地定位这些元素。
• 交互性：支持与 2D 或 3D 元素进行交互，如点击事件等。
• 响应式布局：支持响应式布局，使得 2D 或 3D 元素能够适应不同尺寸的屏幕。

构造函数

构造函数 new THREE.CSS3DRenderer() 创建一个新的 THREE.CSS3DRenderer 实例。

方法

render(scene, camera[, elementParent])

渲染给定的场景。

• scene：要渲染的 THREE.Scene。
• camera：渲染所使用的 THREE.Camera。
• elementParent：可选参数，用于指定一个 DOM 元素作为 3D 元素的父元素，默认为渲染器的 domElement。

dispose()

清理渲染器创建的所有 DOM 元素和事件监听器。

getSize()

获取渲染器的大小（宽度和高度）。

setSize(width, height)

设置渲染器的大小。

• width：渲染器的宽度。
• height：渲染器的长度。

setPixelRatio(pixelRatio)

设置渲染器的像素比率。

• pixelRatio：像素比率，通常用于高 DPI 屏幕。

使用示例

下面是一个简单的示例，展示如何使用 THREE.CSS3DRenderer 来在 Three.js 场景中添加文本标签：

import * as THREE from 'three';
import { CSS3DRenderer, CSS3DObject } from 'three/examples/jsm/renderers/CSS3DRenderer.js';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';

// 创建场景
const scene = new THREE.Scene();

// 创建相机
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.set(0, 10, 20); // 设置相机初始位置

// 创建渲染器
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// 创建轨道控制器
const controls = new OrbitControls(camera, renderer.domElement);

// 创建一个立方体
const geometry = new THREE.BoxGeometry(5, 5, 5);
const material = new THREE.MeshStandardMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

// 创建 CSS3DRenderer 实例
const cssRenderer = new THREE.CSS3DRenderer();
cssRenderer.setSize(window.innerWidth, window.innerHeight);
cssRenderer.domElement.style.position = 'absolute';
cssRenderer.domElement.style.top = '0px';
document.body.appendChild(cssRenderer.domElement);

// 创建一个文本标签
const spanElement = document.createElement('span');
spanElement.className = 'css3d-object';
spanElement.textContent = 'Hello, World!';
spanElement.style.color = '#ff0000';
spanElement.style.fontSize = '2em';
spanElement.style.background = '#000000';
spanElement.style.display = 'block';
spanElement.style.padding = '0.5em';
spanElement.style.width = 'auto';
spanElement.style.pointerEvents = 'none'; // 防止覆盖鼠标事件

// 创建 CSS3DObject
const cssObject = new CSS3DObject(spanElement);
cssObject.position.copy(cube.position);
cssObject.layers.set(1); // 设置一个独立的层
scene.add(cssObject);

// 渲染循环
function animate() {
    requestAnimationFrame(animate);

    // 更新轨道控制器
    controls.update();

    // 渲染 3D 场景
    renderer.render(scene, camera);

    // 渲染 CSS3D 场景
    cssRenderer.render(scene, camera);

    // 更新 CSS3DObject 的位置
    cssObject.position.copy(cube.position);
}
animate();

注意事项

1. DOM 元素：确保添加的 DOM 元素不会干扰 Three.js 的交互。可以通过设置 pointerEvents 属性为 none 来防止覆盖鼠标事件。
2. 层设置：可以为 CSS3DObject 设置不同的层，以控制它们与其他 Three.js 对象的交互。
3. 大小和位置：确保正确设置渲染器的大小和位置，使其与 Three.js 的渲染器对齐。
4. 响应式布局：如果需要，可以使用 CSS 媒体查询或其他响应式技术来使 2D 或 3D 元素适应不同尺寸的屏幕。
5. 性能影响：虽然 THREE.CSS3DRenderer 提供了一种灵活的方式来在 3D 场景中添加 2D 或 3D 元素，但过多的 DOM 元素可能会对性能产生负面影响。

总结

THREE.CSS3DRenderer 是 Three.js 中用于在 3D 场景中添加基于 CSS 的 3D 图形元素的渲染器。通过使用 THREE.CSS3DRenderer，开发者可以在 Three.js 场景中轻松地添加文本标签、图标和其他 2D 或 3D 图形，并确保这些元素能够正确地定位和显示。在使用时，确保正确设置 DOM 元素的样式和位置，并根据需要处理层设置和响应式布局。

请注意，THREE.CSS3DRenderer 的具体实现可能会随着 Three.js 版本的更新而有所变化，请参考最新版本的官方文档以获取最准确的信息。此外，确保在项目中正确引入和配置 CSS3DRenderer 相关的文件。如果需要进一步定制渲染行为或支持更多的渲染选项，可以考虑扩展 THREE.CSS3DRenderer 类或编写自己的渲染逻辑。