可视化开发--three.js

three.js 是一个基于 WebGL 的 JavaScript 3D 库，它简化了在网页上创建和显示 3D 图形的过程，让开发者无需深入了解复杂的 WebGL 底层知识就能轻松实现各种 3D 效果。以下从多个方面详细介绍 three.js 的相关知识。

基本概念

场景（Scene）

场景是所有 3D 对象的容器，就像一个舞台，所有的物体、灯光、相机等元素都需要添加到场景中才能被渲染出来。

import * as THREE from 'three';
// 创建场景
const scene = new THREE.Scene();

相机（Camera）

相机决定了从哪个角度观察场景中的物体。three.js 提供了多种类型的相机，常用的有透视相机 (PerspectiveCamera) 和正交相机 (OrthographicCamera)。

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

渲染器（Renderer）

渲染器负责将场景和相机组合起来，生成最终的 2D 图像并显示在网页上。three.js 支持多种渲染器，如 WebGL 渲染器（WebGLRenderer）。

// 创建 WebGL 渲染器
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

几何体（Geometry）

几何体定义了 3D 对象的形状，例如立方体（BoxGeometry）、球体（SphereGeometry）等。

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

材质（Material）

材质决定了几何体的外观，如颜色、光泽、纹理等。three.js 提供了多种材质，如基础材质（MeshBasicMaterial）、标准材质（MeshStandardMaterial）等。

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

网格（Mesh）

网格是几何体和材质的组合，将几何体和材质结合起来形成一个可渲染的 3D 对象。

// 创建网格
const cube = new THREE.Mesh(geometry, material);
// 将网格添加到场景中
scene.add(cube);

渲染循环

为了实现动画效果，需要不断地更新场景并重新渲染。通常使用 requestAnimationFrame 函数来创建渲染循环。

function animate() {
    requestAnimationFrame(animate);
    // 旋转立方体
    cube.rotation.x += 0.01;
    cube.rotation.y += 0.01;
    // 渲染场景
    renderer.render(scene, camera);
}

animate();

光照

光照可以增强场景的真实感，three.js 提供了多种类型的光照，如环境光（AmbientLight）、点光源（PointLight）、平行光（DirectionalLight）等。

// 创建环境光
const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
scene.add(ambientLight);
// 创建点光源
const pointLight = new THREE.PointLight(0xffffff, 1);
pointLight.position.set(5, 5, 5);
scene.add(pointLight);

纹理映射

纹理映射可以为几何体添加更丰富的外观效果，例如为立方体添加木纹纹理。

// 加载纹理
const textureLoader = new THREE.TextureLoader();
const texture = textureLoader.load('wood.jpg');
// 创建使用纹理的材质
const materialWithTexture = new THREE.MeshBasicMaterial({ map: texture });
// 创建使用纹理材质的网格
const cubeWithTexture = new THREE.Mesh(geometry, materialWithTexture);
scene.add(cubeWithTexture);

交互

可以通过 three.js 实现与 3D 对象的交互，例如鼠标点击、拖动等。常用的库有 THREE.Raycaster 来检测鼠标点击的对象。

const raycaster = new THREE.Raycaster();
const mouse = new THREE.Vector2();
function onMouseClick(event) {
    // 计算鼠标在标准化设备坐标中的位置
    mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
    mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
    // 通过鼠标位置更新射线
    raycaster.setFromCamera(mouse, camera);
    // 计算射线与场景中物体的交点
    const intersects = raycaster.intersectObjects(scene.children);
    if (intersects.length > 0) {
        // 处理点击事件
        console.log('Clicked on object:', intersects[0].object);
    }
}
window.addEventListener('click', onMouseClick);

加载外部模型

three.js 支持加载多种外部 3D 模型格式，如 .obj、.glTF 等。以加载 .glTF 模型为例：

import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
const loader = new GLTFLoader();
loader.load('model.gltf', function (gltf) {
    const model = gltf.scene;
    scene.add(model);
}, undefined, function (error) {
    console.error(error);
});

以上是 three.js 的一些基本概念和常见应用，通过这些知识可以在网页上创建出丰富多样的 3D 场景和效果。