3D场景的神奇世界：用Three.js把创意化为现实

前端

2022-12-02 03:13:17

Three.js：让网页焕发生机的 3D 魔术师

体验 3D 网页的魅力

Three.js 是一个强大的 JavaScript 库，让开发者可以在浏览器中构建交互式的 3D 场景。凭借其简单易学、功能强大的特点，您可以创造令人惊叹的 3D 效果，让您的网页栩栩如生。

Three.js 的优势

Three.js 受到广泛的欢迎，因为它具有以下优势：

易于使用： Three.js 拥有直观的 API，即使新手也能轻松上手。
功能强大： 提供丰富的功能，包括几何体、材质、纹理、灯光、动画和交互。
跨平台： 在所有主流浏览器（包括移动浏览器）中运行顺畅。
开源： 作为开源库，可免费使用和修改。

如何使用 Three.js

创建交互式 3D 场景的过程涉及以下步骤：

安装 Three.js： 通过官方网站下载或使用 CDN 加载到您的网页中。
创建场景： 定义一个场景对象来容纳您的 3D 对象。
添加对象： 使用 Three.js 的对象类（如几何体、材质和纹理）创建 3D 对象。
添加灯光： 照亮场景，防止对象陷入黑暗。
添加相机： 为查看场景设置一个相机。
添加交互： 利用交互事件让您的场景与用户互动，响应鼠标点击、键盘输入或手势。

Three.js 示例

下面是一个简单的 Three.js 示例，演示了一个旋转立方体：

<script type="module">
  import * as THREE from 'three';

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

  // 创建几何体
  const geometry = new THREE.BoxGeometry(1, 1, 1);

  // 创建材质
  const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });

  // 创建网格对象
  const cube = new THREE.Mesh(geometry, material);

  // 将网格对象添加到场景中
  scene.add(cube);

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

  // 创建渲染器
  const renderer = new THREE.WebGLRenderer();

  // 将渲染器添加到页面中
  document.body.appendChild(renderer.domElement);

  // 设置渲染器的大小
  renderer.setSize(window.innerWidth, window.innerHeight);

  // 循环渲染
  function animate() {
    requestAnimationFrame(animate);

    // 旋转立方体
    cube.rotation.x += 0.01;
    cube.rotation.y += 0.01;

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

  animate();
</script>