Three.js可视化企业实战WEBGL网-2024入门指南

Three.js 重要组件和模块

Three.js 是一个功能强大的 JavaScript 库，用于在 Web 浏览器中创建和显示动画 3D 图形。它的丰富 API 和模块化设计使得开发者可以轻松构建复杂的 3D 场景和动画效果。本文将详细介绍 Three.js 中的一些重要组件和模块，包括场景、相机、几何体、材质、光源、渲染器和控制器等。

1. 场景 (Scene)

场景是 Three.js 的核心组件之一，用于容纳和管理 3D 对象、光源和相机。所有的 3D 对象都必须添加到场景中，才能被渲染器绘制。

代码语言：javascript复制

const scene = new THREE.Scene();JAVASCRIPT

2. 相机 (Camera)

相机定义了视图的角度和范围。Three.js 提供了多种相机类型，其中最常用的是透视相机 (PerspectiveCamera) 和正交相机 (OrthographicCamera)。

2.1 透视相机

透视相机模仿了人眼的视角，适合大多数 3D 场景。

代码语言：javascript复制

const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.set(0, 0, 5);JAVASCRIPT

2.2 正交相机

正交相机不考虑距离缩放，适合二维图表和 UI 元素的渲染。

代码语言：javascript复制

const camera = new THREE.OrthographicCamera(-1, 1, 1, -1, 0.1, 1000);
camera.position.set(0, 0, 5);JAVASCRIPT

3. 几何体 (Geometry)

几何体定义了 3D 对象的形状和结构。Three.js 提供了多种内置几何体，如立方体、球体、平面、圆柱体等。

3.1 BoxGeometry

创建一个立方体几何体：

代码语言：javascript复制

const geometry = new THREE.BoxGeometry(1, 1, 1);JAVASCRIPT

3.2 SphereGeometry

创建一个球体几何体：

代码语言：javascript复制

const geometry = new THREE.SphereGeometry(1, 32, 32);JAVASCRIPT

4. 材质 (Material)

材质定义了几何体的表面属性，如颜色、光泽、纹理等。常用的材质包括 MeshBasicMaterial、MeshStandardMaterial 和 MeshPhongMaterial。

4.1 MeshBasicMaterial

一种不受光照影响的材质：

代码语言：javascript复制

const material = new THREE.MeshBasicMaterial({ color: 0xff0000 });JAVASCRIPT

4.2 MeshStandardMaterial

一种支持光照和物理属性的材质：

代码语言：javascript复制

const material = new THREE.MeshStandardMaterial({ color: 0x00ff00, roughness: 0.5, metalness: 0.5 });JAVASCRIPT

5. 光源 (Light)

光源用于照亮场景中的几何体，Three.js 提供了多种光源类型，如环境光 (AmbientLight)、点光源 (PointLight)、平行光 (DirectionalLight) 和聚光灯 (SpotLight)。

5.1 AmbientLight

环境光为场景提供整体照明：

代码语言：javascript复制

const light = new THREE.AmbientLight(0x404040);
scene.add(light);JAVASCRIPT

5.2 PointLight

点光源从一个点向所有方向发射光线：

代码语言：javascript复制

const light = new THREE.PointLight(0xffffff, 1, 100);
light.position.set(10, 10, 10);
scene.add(light);JAVASCRIPT

6. 渲染器 (Renderer)

渲染器负责将场景中的对象绘制到屏幕上。Three.js 提供了 WebGLRenderer，这是最常用的渲染器，支持现代浏览器中的硬件加速。

代码语言：javascript复制

const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);JAVASCRIPT

7. 控制器 (Controls)

控制器用于处理用户输入，如鼠标、键盘等，允许用户交互并控制视图。最常用的是 OrbitControls，允许用户旋转、缩放和平移视图。

代码语言：javascript复制

import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';

const controls = new OrbitControls(camera, renderer.domElement);
controls.enableDamping = true;JAVASCRIPT

8. 动画循环 (Animation Loop)

为了创建动画效果，需要在渲染器中添加一个动画循环，不断更新场景并重新渲染。

代码语言：javascript复制

function animate() {
    requestAnimationFrame(animate);

    // 更新控制器
    controls.update();

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

animate();JAVASCRIPT

9. 纹理 (Texture)

纹理用于给几何体表面添加图像或图案。Three.js 提供了 TextureLoader 用于加载纹理图像。

代码语言：javascript复制

const textureLoader = new THREE.TextureLoader();
const texture = textureLoader.load('path/to/texture.jpg');

const material = new THREE.MeshStandardMaterial({ map: texture });JAVASCRIPT

10. 模型加载器 (Model Loader)

Three.js 支持多种 3D 模型格式，如 GLTF、OBJ 和 FBX，可以使用相应的加载器来加载和显示模型。

10.1 GLTFLoader

加载 GLTF 格式的 3D 模型：

代码语言：javascript复制

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

three.js

0 人点赞