Three.js骰子旋转：在JavaScript中制作简单的3D动画

2024-02-04 02:20:52

JavaScript的三维世界——Three.js简介

Three.js是一个流行的JavaScript库，用于在网页上创建和渲染3D图形。它提供了丰富的功能和直观的API，使得我们可以轻松地创建和控制3D场景、对象、材质和动画。Three.js广泛应用于游戏、交互式可视化、增强现实(AR)和虚拟现实(VR)等领域。

搭建Three.js开发环境

在开始使用Three.js之前，我们需要在本地电脑上搭建开发环境。首先，我们需要安装Node.js和npm，这是JavaScript的运行时环境和包管理器。然后，我们可以使用npm安装Three.js及其依赖项。

npm install three

安装完成后，我们就可以创建一个简单的HTML文件和JavaScript文件来开始我们的Three.js项目。

<!DOCTYPE html>
<html>
  <head>
    
  </head>
  <body>
    <div id="three-container"></div>

    <script src="three.js"></script>
    <script src="script.js"></script>
  </body>
</html>

在script.js文件中，我们可以编写Three.js代码来创建3D场景、导入骰子模型，并控制骰子的旋转。

创建Three.js场景

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

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

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

// 将渲染器添加到页面中
document.getElementById('three-container').appendChild(renderer.domElement);

导入骰子模型

接下来，我们需要导入骰子模型。我们将使用Three.js的GLTFLoader来加载模型。

// 创建GLTF加载器
const loader = new THREE.GLTFLoader();

// 加载骰子模型
loader.load('dice.gltf', (gltf) => {
  // 将骰子模型添加到场景中
  scene.add(gltf.scene);
});

控制骰子旋转

为了控制骰子旋转，我们需要在JavaScript中编写动画循环。动画循环是一个不断重复执行的函数，它负责更新场景并渲染画面。

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

  // 旋转骰子
  scene.rotation.y += 0.01;

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

// 启动动画循环
animate();

添加鼠标事件处理

我们可以添加鼠标事件处理来控制骰子的旋转。当鼠标移动时，我们可以计算鼠标在屏幕上的位置，并根据鼠标位置来改变骰子的旋转速度。

// 添加鼠标移动事件监听器
window.addEventListener('mousemove', (event) => {
  // 计算鼠标在屏幕上的位置
  const mouseX = event.clientX;
  const mouseY = event.clientY;

  // 根据鼠标位置改变骰子的旋转速度
  scene.rotation.y += mouseX / 1000;
  scene.rotation.x += mouseY / 1000;
});

完整代码

<!DOCTYPE html>
<html>
  <head>
    
  </head>
  <body>
    <div id="three-container"></div>

    <script src="three.js"></script>
    <script src="script.js"></script>
  </body>
</html>

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

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

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

// 将渲染器添加到页面中
document.getElementById('three-container').appendChild(renderer.domElement);

// 创建GLTF加载器
const loader = new THREE.GLTFLoader();

// 加载骰子模型
loader.load('dice.gltf', (gltf) => {
  // 将骰子模型添加到场景中
  scene.add(gltf.scene);
});

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

  // 旋转骰子
  scene.rotation.y += 0.01;

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

// 启动动画循环
animate();

// 添加鼠标移动事件监听器
window.addEventListener('mousemove', (event) => {
  // 计算鼠标在屏幕上的位置
  const mouseX = event.clientX;
  const mouseY = event.clientY;

  // 根据鼠标位置改变骰子的旋转速度
  scene.rotation.y += mouseX / 1000;
  scene.rotation.x += mouseY / 1000;
});

结语

本文中，我们使用Three.js创建了一个旋转的3D骰子，展示了如何使用Three.js制作简单的3D动画。我们介绍了Three.js的基本概念，如场景、相机、灯光、材质和渲染。您还了解了Three.js的事件处理，并能够通过鼠标移动来控制骰子的旋转。本教程适合初学者和希望学习Three.js基础的开发人员。