深入理解 Three.js 的 CSS3DRenderer

最新推荐文章于 2025-03-25 15:37:09 发布

贵州数擎科技有限公司

最新推荐文章于 2025-03-25 15:37:09 发布

阅读量1k

点赞数 19

文章标签： javascript css3 开发语言前端

本文链接：https://blog.csdn.net/qq_34820371/article/details/144934840

版权

开发领域：前端开发 | AI 应用 | Web3D | 元宇宙
技术栈：JavaScript、React、ThreeJs、WebGL、Go
经验经验：6年+ 前端开发经验，专注于图形渲染和AI技术
开源项目：AI智简未来、晓智元宇宙、数字孪生引擎
大家好！我是 [晓智]，一位热爱探索新技术的前端开发者，在这里分享前端和Web3D、AI技术的干货与实战经验。如果你对技术有热情，欢迎关注我的文章，我们一起成长、进步！

在使用 Three.js 进行 WebGL 开发时，通常我们会利用其 WebGLRenderer 来渲染 3D 场景。但在某些情况下，我们可能希望将 HTML 和 3D 场景结合，例如在 3D 空间中显示动态更新的 HTML 内容。这时，CSS3DRenderer 就成了一个非常实用的工具。

本文将深入解析 Three.js 的 CSS3DRenderer，包括其用途、原理、使用方法和注意事项。

一、什么是 CSS3DRenderer？

CSS3DRenderer 是 Three.js 提供的一种渲染器，用于将 3D 场景中的对象映射到 HTML DOM 元素。与 WebGLRenderer 不同，它不是通过 WebGL 渲染图像，而是利用 CSS3 的 transform 属性在 3D 空间中对 HTML 元素进行定位和变换。

1.1 主要特点

HTML 内容的 3D 显示：可以将 HTML 元素（如文字、图片、表单等）放置到 3D 场景中。
独立于 WebGL 渲染：可以与 WebGLRenderer 同时使用，实现 WebGL 内容与 HTML 内容的无缝结合。
高性能：依赖于浏览器对 CSS3 的硬件加速，性能较好。

二、`CSS3DRenderer` 的核心原理

CSS3DRenderer 的原理是利用 CSS3 的 transform: matrix3d 属性对 HTML 元素进行变换。它会根据 Three.js 中的摄像机视角，将 3D 对象的位置、旋转和缩放转换为对应的 CSS3 矩阵值，从而使 HTML 元素在 3D 空间中正确显示。

2.1 HTML 结构

CSS3DRenderer 渲染的内容是普通的 DOM 元素，渲染器会为每个 3D 对象生成一个对应的 HTML 节点，并根据场景中的变换实时更新其样式。

2.2 核心流程

初始化渲染器：创建 CSS3DRenderer 并将其附加到页面上。
创建 CSS3DObject：将 HTML 元素包裹为 CSS3DObject，并添加到场景中。
同步摄像机视角：CSS3DRenderer 根据摄像机的位置和方向计算每个 HTML 元素的 CSS3 变换。
更新渲染：在每一帧中实时更新 DOM 树的变换矩阵。

三、如何使用 CSS3DRenderer？

以下是一个完整的示例，展示如何使用 CSS3DRenderer 在 3D 场景中嵌入 HTML 内容。

3.1 基础代码示例

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

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

// 创建摄像机
const camera = new THREE.PerspectiveCamera(
  75,
  window.innerWidth / window.innerHeight,
  0.1,
  1000,
);
camera.position.set(0, 0, 10);

// 创建 WebGLRenderer（用于渲染 3D 场景）
const webGLRenderer = new THREE.WebGLRenderer();
webGLRenderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(webGLRenderer.domElement);

// 创建 CSS3DRenderer（用于渲染 HTML）
const cssRenderer = new CSS3DRenderer();
cssRenderer.setSize(window.innerWidth, window.innerHeight);
cssRenderer.domElement.style.position = 'absolute';
cssRenderer.domElement.style.top = '0';
document.body.appendChild(cssRenderer.domElement);

// 创建一个 HTML 元素并包装为 CSS3DObject
const element = document.createElement('div');
element.style.width = '200px';
element.style.height = '100px';
element.style.backgroundColor = 'rgba(0, 128, 255, 0.5)';
element.innerText = 'Hello CSS3D!';
const cssObject = new CSS3DObject(element);
cssObject.position.set(0, 0, -5);
scene.add(cssObject);

// 动画循环
function animate() {
  requestAnimationFrame(animate);
  webGLRenderer.render(scene, camera);
  cssRenderer.render(scene, camera);
}

animate();