Three.js 3D图形库基础入门指南-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00046/article/details/148323192

Three.js 3D图形库基础入门指南

three.js JavaScript 3D Library. 项目地址: https://gitcode.com/gh_mirrors/th/three.js

Three.js是一个强大的JavaScript 3D图形库，它让开发者能够在网页中轻松创建和渲染3D内容。本文将带你了解Three.js的核心概念和基本使用方法。

Three.js简介

Three.js是一个基于WebGL的3D图形库，它简化了在网页中创建3D场景的过程。WebGL本身虽然强大，但使用起来相当复杂，需要编写大量底层代码。Three.js则提供了更高层次的抽象，让开发者能够专注于3D内容的创作，而不必纠结于WebGL的复杂细节。

核心概念

Three.js应用由几个关键组件构成：

场景(Scene): 3D世界的容器，包含所有要渲染的对象
相机(Camera): 决定场景中哪些部分会被渲染
渲染器(Renderer): 负责将场景和相机结合，输出到画布上
网格(Mesh): 由几何体(Geometry)和材质(Material)组成的可渲染对象
几何体(Geometry): 定义物体的形状和结构
材质(Material): 定义物体的外观特性
光源(Light): 照亮场景中的物体

创建第一个3D场景

让我们创建一个简单的3D立方体场景：

1. 初始化场景

首先需要创建场景、相机和渲染器：

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

2. 创建立方体

创建一个立方体需要几何体和材质：

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);

3. 设置相机位置

默认情况下相机和立方体会重叠，我们需要将相机向后移动：

camera.position.z = 5;

4. 渲染场景

最后渲染场景：

renderer.render(scene, camera);

添加动画

为了让立方体动起来，我们可以使用requestAnimationFrame创建动画循环：

function animate() {
  requestAnimationFrame(animate);
  
  cube.rotation.x += 0.01;
  cube.rotation.y += 0.01;
  
  renderer.render(scene, camera);
}
animate();

添加光照效果

为了更真实的3D效果，我们可以添加光源：

const light = new THREE.DirectionalLight(0xffffff, 1);
light.position.set(1, 1, 1);
scene.add(light);

// 记得将材质改为受光照影响的类型
const material = new THREE.MeshStandardMaterial({ color: 0x00ff00 });