阅读数:6 评论数:0

一、概述

CSS2DRenderer 是 three.js 中的一个渲染器，用于将 HTML/CSS 元素（如标签、文本、图片等）渲染到 3D 场景中的指定位置。这种渲染器与 WebGLRenderer 不同，它不通过 WebGL 渲染 3D 图形，而是将 2D HTML 元素（如 <div> 或 <span>）渲染到屏幕上，并使其与 3D 场景中的物体保持位置和视角一致。CSS2DRenderer 常用于渲染场景中的标签、文本框、数字计数器等，它与 3D 对象的相对位置和旋转保持同步。

二、基本使用

1、引入CSS2DRender

你需要单独引入 CSS2DRenderer，它并没有包含在 three.js 的核心库中。

import { CSS2DRenderer } from 'three/examples/js/renderers/CSS2DRenderer';

2、创建CSS2DRender

在创建了 WebGLRenderer 和场景后，可以创建一个 CSS2DRenderer 实例，并将它与页面上的 HTML 元素结合：

import * as THREE from 'three';
import { CSS2DRenderer } from 'three/examples/js/renderers/CSS2DRenderer';

// 创建场景、相机和 WebGL 渲染器
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

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

在这里，我们创建了一个常规的 WebGLRenderer 用于渲染 3D 内容，同时创建了一个 CSS2DRenderer 用于渲染 2D HTML 元素。

3、创建和添加2D HTML元素

现在，我们可以在场景中添加 HTML 元素（例如标签）：

const labelDiv = document.createElement('div');
labelDiv.className = 'label';
labelDiv.textContent = 'This is a label';
labelDiv.style.color = 'white';
labelDiv.style.fontSize = '24px';
labelDiv.style.backgroundColor = 'rgba(0, 0, 0, 0.5)';
labelDiv.style.padding = '5px';
labelDiv.style.borderRadius = '5px';

// 创建一个对象3D并将该标签作为它的 HTML 元素
const label = new THREE.CSS2DObject(labelDiv);
label.position.set(0, 2, 0);  // 标签的位置在 (0, 2, 0)

// 将标签添加到场景中
scene.add(label);

这里创建了一个包含文字的 div 元素，并将其转换为 CSS2DObject。然后将该标签放置在场景中的 (0, 2, 0) 位置。

4、渲染场景

最后，在 animate() 循环中，我们需要调用两个渲染器的 render 方法：

function animate() {
  requestAnimationFrame(animate);

  // 更新相机
  camera.position.x += 0.01;
  camera.position.y += 0.01;
  camera.position.z = 5;
  camera.lookAt(scene.position);

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

  // 渲染 2D 元素
  cssRenderer.render(scene, camera);
}

animate();

5、响应窗口大小变化

为了确保渲染器适应屏幕大小，我们还可以监听 resize 事件来调整渲染器和相机的大小：

window.addEventListener('resize', () => {
  const width = window.innerWidth;
  const height = window.innerHeight;

  renderer.setSize(width, height);
  cssRenderer.setSize(width, height);
  camera.aspect = width / height;
  camera.updateProjectionMatrix();
});