Three.js 画布自定义与交互：释放视觉创造力

2024-02-08 09:36:38

Three.js 的画布自定义与交互：创造灵动视觉体验

前言

Three.js，这个功能强大的 JavaScript 3D 库，赋予开发者构建交互式 3D 场景和模型的无限可能。本文将深入探讨 Three.js 中画布的自定义和用户界面 (UI) 交互，揭示如何打造灵动而引人入胜的 3D 体验。

自定义大小画布

默认情况下，Three.js 的画布会占据整个窗口。然而，有时我们可能需要自定义画布的大小以适应特定布局或设计需求。

const canvas = document.getElementById('myCanvas');
canvas.style.width = '500px';
canvas.style.height = '300px';

此代码将画布大小调整为 500px 宽和 300px 高。

动态调整画布尺寸

为了让画布随着窗口大小变化而自动调整，我们可以使用事件监听器：

window.addEventListener('resize', () => {
  const width = window.innerWidth;
  const height = window.innerHeight;
  canvas.style.width = `${width}px`;
  canvas.style.height = `${height}px`;
});

每当窗口调整大小时，此监听器都会触发，动态调整画布大小以匹配窗口大小。

UI 交互按钮

UI 交互按钮为用户提供了与 3D 场景进行交互的途径。我们可以使用 DOM 事件监听器来侦听按钮点击事件，并相应地修改场景：

const button = document.getElementById('myButton');
button.addEventListener('click', () => {
  // 更改模型颜色
  myModel.material.color.set('red');
});

当用户点击按钮时，此代码将模型的颜色设置为红色。

3D 场景交互

除了使用按钮外，我们还可以直接与 3D 场景进行交互，例如通过鼠标移动或点击：

canvas.addEventListener('mousemove', (e) => {
  // 移动相机
  camera.position.x += e.movementX;
  camera.position.y += e.movementY;
});

此代码使我们能够通过鼠标移动来平移相机，从而探索场景的不同角度。

渲染画布为文件

Three.js 提供了一个方便的函数来将渲染的场景导出为图像文件：

renderer.render(scene, camera);
renderer.domElement.toBlob((blob) => {
  // 创建图像文件并下载
  const file = new File([blob], 'myImage.png', { type: 'image/png' });
  const url = URL.createObjectURL(file);
  const link = document.createElement('a');
  link.href = url;
  link.download = 'myImage.png';
  link.click();
});