利用CSS2DRenderer在3D项目中添加Label标签及其点击事件

前端

2023-12-15 03:37:30

三维场景中的 HTML 元素：探索 CSS2DRenderer

在当今信息爆炸的时代，仅仅依靠三维模型来展示信息已不再足够。为了提升用户体验并提供更丰富的交互，我们需要将 HTML 元素引入三维场景中。这就是 CSS2DRenderer 登场的时候了。

CSS2DRenderer 简介

CSS2DRenderer 是一个强大的 Three.js 库，它允许您将 HTML 元素无缝集成到您的三维场景中。它利用 WebGL 技术将 HTML 元素渲染为纹理，从而与三维场景中的其他元素完美融合。

创建 HTML 标签

要将 HTML 元素添加到场景，首先需要创建一个标签对象。您可以使用以下代码来创建一个

元素：

const labelElement = document.createElement('div');

接下来，设置元素的 HTML 内容。在本例中，我们将创建一个显示“Hello, world!”的标签：

labelElement.innerHTML = 'Hello, world!';

添加到三维场景

使用 CSS2DObject 类将 HTML 元素包装到场景中。这个类将负责将元素渲染到三维空间：

const labelObject = new THREE.CSS2DObject(labelElement);
scene.add(labelObject);

定位和事件处理

接下来，设置标签的位置。您可以使用 CSS2DObject.position 属性来指定其在三维空间中的位置：

labelObject.position.set(0, 0, 10);

要添加点击事件或任何其他事件处理程序，请使用 CSS2DObject.addEventListener() 方法：

labelObject.addEventListener('click', function() {
  console.log('标签被点击了！');
});

刷新渲染

在对场景进行更改后，您需要调用 CSS2DRenderer.render() 方法来刷新渲染：

css2DRenderer.render(scene, camera);

代码示例

以下是使用 CSS2DRenderer 创建交互式 HTML 标签的完整代码示例：

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

// 创建 CSS2DRenderer
const css2DRenderer = new THREE.CSS2DRenderer();

// 创建 HTML 标签
const labelElement = document.createElement('div');
labelElement.innerHTML = 'Hello, world!';

// 创建 CSS2DObject
const labelObject = new THREE.CSS2DObject(labelElement);
scene.add(labelObject);

// 设置位置
labelObject.position.set(0, 0, 10);

// 添加点击事件
labelObject.addEventListener('click', function() {
  console.log('标签被点击了！');
});

// 创建相机
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 50;

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

// 动画循环
function animate() {
  requestAnimationFrame(animate);

  // 刷新渲染
  css2DRenderer.render(scene, camera);
  renderer.render(scene, camera);
}

animate();