Three.js 是一个功能强大的 JavaScript 库,用于在 Web 浏览器中创建和显示动画 3D 图形。它的丰富 API 和模块化设计使得开发者可以轻松构建复杂的 3D 场景和动画效果。本文将详细介绍 Three.js 中的一些重要组件和模块,包括场景、相机、几何体、材质、光源、渲染器和控制器等。
场景是 Three.js 的核心组件之一,用于容纳和管理 3D 对象、光源和相机。所有的 3D 对象都必须添加到场景中,才能被渲染器绘制。
const scene = new THREE.Scene();JAVASCRIPT
相机定义了视图的角度和范围。Three.js 提供了多种相机类型,其中最常用的是透视相机 (PerspectiveCamera) 和正交相机 (OrthographicCamera)。
透视相机模仿了人眼的视角,适合大多数 3D 场景。
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.set(0, 0, 5);JAVASCRIPT
正交相机不考虑距离缩放,适合二维图表和 UI 元素的渲染。
const camera = new THREE.OrthographicCamera(-1, 1, 1, -1, 0.1, 1000);
camera.position.set(0, 0, 5);JAVASCRIPT
几何体定义了 3D 对象的形状和结构。Three.js 提供了多种内置几何体,如立方体、球体、平面、圆柱体等。
创建一个立方体几何体:
const geometry = new THREE.BoxGeometry(1, 1, 1);JAVASCRIPT
创建一个球体几何体:
const geometry = new THREE.SphereGeometry(1, 32, 32);JAVASCRIPT
材质定义了几何体的表面属性,如颜色、光泽、纹理等。常用的材质包括 MeshBasicMaterial、MeshStandardMaterial 和 MeshPhongMaterial。
一种不受光照影响的材质:
const material = new THREE.MeshBasicMaterial({ color: 0xff0000 });JAVASCRIPT
一种支持光照和物理属性的材质:
const material = new THREE.MeshStandardMaterial({ color: 0x00ff00, roughness: 0.5, metalness: 0.5 });JAVASCRIPT
光源用于照亮场景中的几何体,Three.js 提供了多种光源类型,如环境光 (AmbientLight)、点光源 (PointLight)、平行光 (DirectionalLight) 和聚光灯 (SpotLight)。
环境光为场景提供整体照明:
const light = new THREE.AmbientLight(0x404040);
scene.add(light);JAVASCRIPT
点光源从一个点向所有方向发射光线:
const light = new THREE.PointLight(0xffffff, 1, 100);
light.position.set(10, 10, 10);
scene.add(light);JAVASCRIPT
渲染器负责将场景中的对象绘制到屏幕上。Three.js 提供了 WebGLRenderer,这是最常用的渲染器,支持现代浏览器中的硬件加速。
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);JAVASCRIPT
控制器用于处理用户输入,如鼠标、键盘等,允许用户交互并控制视图。最常用的是 OrbitControls,允许用户旋转、缩放和平移视图。
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
const controls = new OrbitControls(camera, renderer.domElement);
controls.enableDamping = true;JAVASCRIPT
为了创建动画效果,需要在渲染器中添加一个动画循环,不断更新场景并重新渲染。
function animate() {
requestAnimationFrame(animate);
// 更新控制器
controls.update();
// 渲染场景
renderer.render(scene, camera);
}
animate();JAVASCRIPT
纹理用于给几何体表面添加图像或图案。Three.js 提供了 TextureLoader 用于加载纹理图像。
const textureLoader = new THREE.TextureLoader();
const texture = textureLoader.load('path/to/texture.jpg');
const material = new THREE.MeshStandardMaterial({ map: texture });JAVASCRIPT
Three.js 支持多种 3D 模型格式,如 GLTF、OBJ 和 FBX,可以使用相应的加载器来加载和显示模型。
加载 GLTF 格式的 3D 模型:
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
const loader = new GLTFLoader();
loader.load('path/to/model.gltf', function (gltf) {
scene.add(gltf.scene);
});
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。