Three.js 是一个强大的 JavaScript 库，用于创建和展示 3D 图形。在 Three.js 的核心中，常量（Constants）扮演着至关重要的角色，帮助开发者轻松配置和控制 3D 场景的各个方面。本文将深入探讨 Three.js 中的 Core Constants，包括它们的定义、用途以及如何在实际项目中应用它们。我们将通过丰富的示例来展示这些常量的实际效果。

1. Core Constants 概述

Three.js 的 Core Constants 主要包括以下几个方面：

• 几何体类型常量：用于指定各种几何体的类型。
• 材质类型常量：用于指定不同的材质类型。
• 光源类型常量：用于定义不同的光源类型。
• 相机类型常量：用于指定相机的类型。

这些常量极大地方便了开发者在创建 3D 场景时的配置和管理。

2. 常用 Core Constants 详解

2.1 几何体类型常量

Three.js 提供了一系列的几何体常量，用于创建不同形状的对象。常用的几何体类型常量包括：

• THREE.BoxGeometry：用于创建立方体几何体。
• THREE.SphereGeometry：用于创建球体几何体。
• THREE.CylinderGeometry：用于创建圆柱体几何体。
• THREE.PlaneGeometry：用于创建平面几何体。

示例代码：

// 创建场景、相机和渲染器
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// 创建一个立方体几何体
const boxGeometry = new THREE.BoxGeometry(1, 1, 1);
const boxMaterial = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const boxMesh = new THREE.Mesh(boxGeometry, boxMaterial);
scene.add(boxMesh);

// 创建一个球体几何体
const sphereGeometry = new THREE.SphereGeometry(0.5, 32, 32);
const sphereMaterial = new THREE.MeshBasicMaterial({ color: 0xff0000 });
const sphereMesh = new THREE.Mesh(sphereGeometry, sphereMaterial);
sphereMesh.position.x = 2; // 移动球体位置
scene.add(sphereMesh);

// 设置相机位置
camera.position.z = 5;

// 渲染循环
function animate() {
    requestAnimationFrame(animate);
    boxMesh.rotation.x += 0.01;
    boxMesh.rotation.y += 0.01;
    sphereMesh.rotation.x += 0.02;
    sphereMesh.rotation.y += 0.02;
    renderer.render(scene, camera);
}
animate();

在这个示例中，我们创建了一个立方体和一个球体，分别使用不同的几何体类型常量。

2.2 材质类型常量

材质类型常量用于指定对象的外观效果，Three.js 提供了多种材质类型，常用的材质类型常量包括：

• THREE.MeshBasicMaterial：基础材质，不受光照影响。
• THREE.MeshLambertMaterial：漫反射材质，受光照影响。
• THREE.MeshPhongMaterial：高光材质，具有光泽感。
• THREE.MeshStandardMaterial：标准材质，适用于 PBR 渲染。

示例代码：

// 创建一个高光材质
const phongMaterial = new THREE.MeshPhongMaterial({ color: 0x00ffff, shininess: 100 });
const phongBox = new THREE.Mesh(boxGeometry, phongMaterial);
phongBox.position.x = -2; // 移动高光材质立方体位置
scene.add(phongBox);

// 创建一个标准材质
const standardMaterial = new THREE.MeshStandardMaterial({ color: 0xffff00 });
const standardBox = new THREE.Mesh(boxGeometry, standardMaterial);
standardBox.position.x = -4; // 移动标准材质立方体位置
scene.add(standardBox);

// 添加环境光
const ambientLight = new THREE.AmbientLight(0x404040); // 白色环境光
scene.add(ambientLight);

// 添加平行光源
const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
directionalLight.position.set(5, 5, 5).normalize();
scene.add(directionalLight);

在这个示例中，我们创建了不同类型的材质并将它们应用到相同的几何体上，以展示材质对物体外观的影响。

2.3 光源类型常量

Three.js 中的光源类型常量定义了不同的光源类型，包括：

• THREE.AmbientLight：环境光，不产生阴影。
• THREE.DirectionalLight：平行光，能产生阴影。
• THREE.PointLight：点光源，光线从一个点向四面八方散射。
• THREE.SpotLight：聚光灯，光束具有方向性并可投射阴影。

示例代码：

// 创建一个点光源
const pointLight = new THREE.PointLight(0xffffff, 1, 100);
pointLight.position.set(0, 5, 0);
scene.add(pointLight);

// 创建一个聚光灯
const spotLight = new THREE.SpotLight(0xffffff);
spotLight.position.set(0, 5, 5);
spotLight.angle = Math.PI / 6; // 设置光束角度
scene.add(spotLight);

在这个示例中，我们创建了一个点光源和一个聚光灯，展示了它们在场景中如何影响物体的光照效果。

2.4 相机类型常量

Three.js 提供了多种相机类型，常用的相机类型常量包括：

• THREE.PerspectiveCamera：透视相机，适用于大多数 3D 场景。
• THREE.OrthographicCamera：正交相机，适用于 2D 场景或特定效果。

示例代码：

// 创建正交相机
const aspect = window.innerWidth / window.innerHeight;
const orthoCamera = new THREE.OrthographicCamera(-aspect, aspect, 1, -1, 0.1, 1000);
orthoCamera.position.z = 5;

// 创建透视相机
const perspectiveCamera = new THREE.PerspectiveCamera(75, aspect, 0.1, 1000);
perspectiveCamera.position.z = 5;

// 渲染正交相机
function renderOrthoScene() {
    renderer.render(scene, orthoCamera);
}

// 渲染透视相机
function renderPerspectiveScene() {
    renderer.render(scene, perspectiveCamera);
}

在这个示例中，我们创建了一个正交相机和一个透视相机，可以根据不同的场景需求选择使用。

3. 综合示例：使用 Core Constants 创建完整场景

结合上述所有常量，我们可以创建一个更复杂的 Three.js 场景，展示不同的几何体、材质、光源和相机类型。

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

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

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

// 创建几何体和材质
const geometries = [
    new THREE.BoxGeometry(1, 1, 1),
    new THREE.SphereGeometry(0.5, 32, 32),
    new THREE.CylinderGeometry(0.5, 0.5, 2, 32)
];

const materials = [
    new THREE.MeshBasicMaterial({ color: 0xff0000 }),
    new THREE.MeshLambertMaterial({ color: 0x00ff00 }),
    new THREE.MeshPhongMaterial({ color: 0x0000ff, shininess: 100 })
];

const meshes = geometries.map((geometry, index) => {
    return new THREE.Mesh(geometry, materials[index % materials.length]);
});

// 布局 meshes
meshes[0].position.x = -2;
meshes[1].position.x = 0;
meshes[2].position.x = 2;

meshes.forEach(mesh => scene.add(mesh));

// 添加光源
const ambientLight = new THREE.AmbientLight(0x404040);
scene.add(ambientLight);

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

// 渲染循环


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

在这个综合示例中，我们创建了一个包含多个几何体、不同材质、光源以及透视相机的完整 3D 场景。通过渲染循环，我们使这些对象不断旋转，展示 Three.js 的强大功能。

结论

Three.js 的 Core Constants 提供了许多方便的工具，使得 3D 场景的创建和管理更加简便。通过理解和应用这些常量，开发者可以快速搭建出各种复杂的 3D 场景。希望本文能够帮助您更好地理解 Three.js 中的常量及其使用，开启您在 3D 图形开发的旅程！