Three.js -岩石教程

主要特点和功能

跨平台支持： Three.js 可以在所有支持 WebGL 的浏览器中运行，包括移动设备和桌面设备。
丰富的渲染器：支持多种渲染器，包括 WebGLRenderer、CanvasRenderer 和 SVGRenderer 等，可以根据需要选择合适的渲染方式。
几何体和材质：提供了多种预定义的几何体和材质，开发者可以轻松创建立方体、球体、平面等基本形状，并应用各种材质和纹理。
光照和阴影：支持多种光源（如环境光、平行光、点光源等）和阴影效果，使场景更加真实。
相机控制：提供了多种相机类型（如透视相机、正交相机）和控制器（如轨迹球控制器、第一人称控制器等），方便开发者控制视角和交互。
动画和物理：支持关键帧动画、骨骼动画和物理引擎集成（如 Cannon.js），可以创建复杂的动画效果和物理仿真。
导入和导出：支持多种 3D 文件格式的导入和导出，如 OBJ、FBX、GLTF 等，方便与其他 3D 工具和平台互通。

安装和使用

CDN 引入：可以通过引入 Three.js 的 CDN 链接来快速开始使用，例如：

  <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>

下载安装：也可以通过 npm 安装 Three.js：
```
npm install three
```
然后在项目中引入：
```
import * as THREE from 'three';
```

示例代码

以下是一个简单的使用 Three.js 创建 3D 场景的示例代码，包括一个旋转的立方体：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Three.js Example</title>
  <style>
    body { margin: 0; }
    canvas { display: block; }
  </style>
</head>
<body>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
  <script>
    // 创建场景
    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.body.appendChild(renderer.domElement);

    // 创建立方体
    const geometry = new THREE.BoxGeometry();
    const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
    const cube = new THREE.Mesh(geometry, material);
    scene.add(cube);

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

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

      renderer.render(scene, camera);
    }
    animate();
  </script>
</body>
</html>