Three.js CSS 元素渲染

提示词

PLAINTEXT
1
使用 Three.js 的 CSS2DRenderer 和 CSS3DRenderer 在 3D 场景中渲染 HTML/CSS 元素。

效果描述

这是一个展示如何在 3D 场景中渲染 HTML/CSS 元素的示例，包括 2D 和 3D CSS 渲染器。

效果特性

  • CSS2D 渲染：使用 CSS2DRenderer 渲染 2D HTML 元素
  • CSS3D 渲染：使用 CSS3DRenderer 渲染 3D HTML 元素
  • DOM 元素：在 3D 场景中显示 HTML 元素
  • 交互支持：CSS2D 元素支持鼠标交互
  • 多元素：同时渲染多个 CSS 元素
  • 同步渲染：与 WebGL 渲染器同步渲染

核心参数

参数 值 说明
元素数量 5 2D 和 3D 元素各 5 个
2D 位置 (0, 0, z*2) 2D 元素沿 Z 轴分布
3D 位置 (0, y*2, 0) 3D 元素沿 Y 轴分布
3D 缩放 0.02 3D 元素缩放比例
图片大小 50px 图片元素大小

核心代码解析

CSS2D 元素创建

JAVASCRIPT
1
2
3
4
5
6
7
const setCss2dDOM = (DOM, position) => {
    DOM.style.pointerEvents = "auto";
    const mesh = new CSS2DObject(DOM);
    mesh.position.copy(position);
    scene.add(mesh);
    return mesh;
};

CSS3D 元素创建

JAVASCRIPT
1
2
3
4
5
6
const setCss3dDOM = (DOM, position) => {
    const mesh = new CSS3DObject(DOM);
    mesh.position.copy(position);
    scene.add(mesh);
    return mesh;
};

DOM 元素创建

JAVASCRIPT
1
2
3
4
5
6
7
8
9
10
11
function createDom(text) {
    const div = document.createElement("div");
    const img = document.createElement("img");
    img.src = "https://avatars.githubusercontent.com/u/72586973?v=4";
    img.style.width = "50px";
    img.style.height = "50px";
    div.appendChild(img);
    div.innerHTML += text;
    div.style.color = "white";
    return div;
}

渲染循环

JAVASCRIPT
1
2
3
4
5
6
function animate() {
    requestAnimationFrame(animate);
    renderer.render(scene, camera);
    css3DRender.render(scene, camera); // Css3D渲染
    css2DRender.render(scene, camera); // Css2D渲染
}

技术亮点

  1. CSS2DRenderer：渲染始终面向相机的 2D HTML 元素
  2. CSS3DRenderer：渲染可旋转的 3D HTML 元素
  3. DOM 元素：直接使用 HTML/CSS 创建元素
  4. 交互支持：CSS2D 元素支持鼠标交互
  5. 同步渲染：与 WebGL 渲染器同步渲染

调试技巧

  1. 元素位置：调整 position 控制元素位置
  2. 3D 缩放：调整 scale 控制 3D 元素大小
  3. 指针事件：pointerEvents 控制交互
  4. 渲染顺序：确保 CSS 渲染器在 WebGL 之后渲染
  5. 窗口大小：确保所有渲染器都响应窗口大小变化

扩展方向

  1. 动态内容：动态更新 DOM 元素内容
  2. 样式动画：使用 CSS 动画
  3. 事件处理：添加 DOM 元素事件监听
  4. 复杂布局：创建复杂的 HTML 布局
  5. 混合渲染：结合 WebGL 和 CSS 渲染

本文档由 ThreeLab 编辑整理，如需转载，请注明出处。