Three.js CSS2DRenderer: 标签嵌入模型，解锁交互新高度！

2023-10-01 03:05:35

Three.js CSS2DRenderer：无缝融合模型和标签

简介

Three.js CSS2DRenderer 是一种卓越的工具，它使您能够将 HTML 标签嵌入 Three.js 场景中。这为您的 3D 模型增添了新的维度，让您添加文本、图像甚至视频等元素，从而创造出更加沉浸式和交互式的体验。

准备工作

首先，您需要加载 Three.js 和 CSS2DRenderer 库。完成后，您就可以创建一个场景，其中包含模型和光源。

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

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

// 加载模型
const model = await THREE.GLTFLoader().loadAsync('model.gltf');
scene.add(model);

// 添加光源
const light = new THREE.PointLight(0xffffff, 1);
light.position.set(10, 10, 10);
scene.add(light);

添加 CSS2DRenderer

接下来，创建一个 CSS2DRenderer 并将其添加到场景中。这将允许您将 HTML 标签渲染到场景中。

// 创建 CSS2DRenderer
const css2dRenderer = new CSS2DRenderer();
css2dRenderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(css2dRenderer.domElement);

创建标签

现在，您可以创建 HTML 标签并将其添加到场景中。

// 创建标签
const label = document.createElement('div');
label.textContent = '这是一个标签！';
label.style.position = 'absolute';
label.style.left = '100px';
label.style.top = '100px';

// 将标签添加到场景中
const labelObject = new THREE.CSS2DObject(label);
labelObject.position.set(0, 0, 1);
scene.add(labelObject);

添加 Raycaster 进行检测

为了检测模型上的点击事件，您可以使用 Raycaster。这将允许您在用户单击模型时触发事件。

// 创建光线投射器
const raycaster = new THREE.Raycaster();

// 监听鼠标点击事件
window.addEventListener('click', (event) => {
  const mouse = new THREE.Vector2();
  mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
  mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;

  raycaster.setFromCamera(mouse, camera);

  const intersects = raycaster.intersectObjects(scene.children);

  if (intersects.length > 0) {
    const object = intersects[0].object;

    if (object instanceof THREE.CSS2DObject) {
      // 标签被点击了
      console.log('标签被点击了！');
    }
  }
});