Three.js 使用指南

介绍

Three.js 是一个用于在 Web 浏览器中创建和渲染 3D 图形的 JavaScript 库。它提供了一系列强大的功能和工具，使开发者能够轻松地在网页中创建交互式的 3D 场景和动画。

本指南将详细介绍如何开始使用 Three.js，并提供一些常见的用法示例和技巧。

安装

你可以从官方网站（https://threejs.org）下载最新版本的 Three.js，或者使用 npm 安装：

npm install three

然后，在 HTML 文件中引入 Three.js：

<script src="path/to/three.js"></script>

创建场景

要使用 Three.js 创建一个 3D 场景，你需要准备一个 HTML 元素作为渲染容器，例如：

<div id="canvas-container"></div>

然后，在 JavaScript 代码中，你可以创建一个场景对象、一个相机对象和一个渲染器对象：

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

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

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

// 将渲染器的输出添加到 HTML 元素中
document.getElementById('canvas-container').appendChild(renderer.domElement);

现在，你已经设置好了基本的场景、相机和渲染器。接下来，我们可以向场景中添加物体并进行渲染。

添加物体

Three.js 支持多种类型的 3D 物体，包括几何体（Geometry）、网格（Mesh）和材质（Material）。你可以根据自己的需求选择合适的物体类型，并设置其属性。

以下是一个简单的示例，演示如何创建一个立方体并将其添加到场景中：

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

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

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

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

现在，你可以通过调用渲染器的 render 方法来渲染场景：

function animate() {
    
    
  requestAnimationFrame(animate);

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

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

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

这样，你就可以在浏览器中看到一个旋转的绿色立方体了！

其他功能和技巧

Three.js 支持多种不同类型的相机（camera），如透视相机（PerspectiveCamera）、正交相机（OrthographicCamera）和立方体相机（CubeCamera）。你可以根据需要选择适合的相机类型，并设置相应的属性，如视野角度（fov）、近剪裁面（near）和远剪裁面（far）等。

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

// 创建正交相机
var camera = new THREE.OrthographicCamera(-width / 2, width / 2, height / 2, -height / 2, near, far);

// 创建立方体相机
var camera = new THREE.CubeCamera(near, far, resolution);

Three.js 还提供了丰富的材质选项，如基础材质（MeshBasicMaterial）、Lambert 材质（MeshLambertMaterial）、Phong 材质（MeshPhongMaterial）和标准材质（MeshStandardMaterial）等。你可以根据需求选择合适的材质，并设置其属性，如颜色、纹理、光照和阴影等。

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

// 创建 Lambert 材质
var material = new THREE.MeshLambertMaterial({
    
     color: 0x00ff00 });

// 创建 Phong 材质
var material = new THREE.MeshPhongMaterial({
    
     color: 0x00ff00 });

// 创建标准材质
var material = new THREE.MeshStandardMaterial({
    
     color: 0x00ff00 });

Three.js 提供了许多内置的几何体（Geometry），如立方体（BoxGeometry）、球体（SphereGeometry）、圆柱体（CylinderGeometry）和平面（PlaneGeometry）等。你可以选择适合的几何体，并设置其属性，如尺寸、分段数和位置等。

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

// 创建球体几何体
var geometry = new THREE.SphereGeometry(radius, segments, rings);

// 创建圆柱体几何体
var geometry = new THREE.CylinderGeometry(radiusTop, radiusBottom, height, radialSegments);

// 创建平面几何体
var geometry = new THREE.PlaneGeometry(width, height);

Three.js 支持光源（Light）和阴影（Shadow）的渲染。你可以添加不同类型的光源，如环境光（AmbientLight）、点光源（PointLight）、平行光（DirectionalLight）和聚光灯（SpotLight）等，并设置其属性。

// 创建环境光
var light = new THREE.AmbientLight(0x404040);

// 创建点光源
var light = new THREE.PointLight(0xffffff, 1, 100);
light.position.set(0, 0, 0);

// 创建平行光
var light = new THREE.DirectionalLight(0xffffff, 1);
light.position.set(0, 1, 0);

// 创建聚光灯
var light = new THREE.SpotLight(0xffffff, 1, 100, Math.PI / 4, 10);
light.position.set(0, 0, 0);
light.target.position.set(0, 0, -1);

Three.js 支持纹理（Texture）的加载和应用，你可以通过加载图像或生成动态纹理来给物体添加贴图效果。

// 加载图像纹理
var textureLoader = new THREE.TextureLoader();
var texture = textureLoader.load('path/to/texture.jpg');

// 生成动态纹理
var canvas = document.createElement('canvas');
// 绘制图像到 canvas
var texture = new THREE.CanvasTexture(canvas);

然后，你可以将纹理应用到材质上：

material.map = texture;

Three.js 还提供了丰富的控制器（Controller）和动画（Animation）库，帮助你实现交互和动画效果。

// 使用 OrbitControls 控制相机
var controls = new THREE.OrbitControls(camera, renderer.domElement);
controls.update();

// 使用 Tween.js 创建动画效果
var tween = new TWEEN.Tween(object.position)
  .to({
    
     x: 1, y: 1, z: 1 }, 1000)
  .easing(TWEEN.Easing.Quadratic.InOut)
  .start();

这只是 Three.js 的一小部分功能和技巧，它还提供了更多的选项和扩展性。你可以参考官方文档（https://threejs.org/docs）和示例库（https://threejs.org/examples）来深入了解和探索 Three.js 的更多功能和用法。

希望本指南能够帮助你入门 Three.js，并为你创建出精彩的 3D 场景提供指导！