当前位置：首页 > news >正文

[THREEJS]实战-基础三要素

news 2025/10/14 22:45:22

1.1 Three.js 简介

Three.js 是什么
为什么选择 Three.js
Three.js 的应用场景
开发环境搭建

1.2 Three.js 三要素详解

1.2.1 场景（Scene）

概念说明：
场景是 Three.js 中所有物体的容器，是 3D 世界的舞台。所有需要渲染的对象（网格、光源、相机等）都必须添加到场景中。

基本用法：

const scene = new THREE.Scene();
scene.background = new THREE.Color(0x000000); // 设置背景色
scene.fog = new THREE.Fog(0xffffff, 0, 750); // 添加雾效

核心知识点：

场景的创建与初始化
向场景添加/移除对象
场景背景设置（颜色、纹理、天空盒）
场景雾效（Fog、FogExp2）
场景层级结构管理

1.2.2 相机（Camera）

概念说明：
相机定义了观察 3D 场景的视角和方式，决定了用户能看到什么内容。Three.js 提供了多种相机类型，最常用的是透视相机和正交相机。

基本用法：

// 透视相机（模拟人眼视角）
const camera = new THREE.PerspectiveCamera(75,                                   // 视野角度（FOV）window.innerWidth / window.innerHeight, // 宽高比0.1,                                  // 近裁剪面1000                                  // 远裁剪面
);
camera.position.set(0, 0, 5); // 设置相机位置
camera.lookAt(0, 0, 0);       // 相机朝向

核心知识点：

透视相机（PerspectiveCamera）与正交相机（OrthographicCamera）的区别
相机参数详解（FOV、aspect、near、far）
相机位置与朝向控制
相机控制器（OrbitControls、TrackballControls 等）
相机动画与过渡

1.2.3 渲染器（Renderer）

概念说明：
渲染器负责将场景和相机的内容绘制到屏幕上，是连接 Three.js 和浏览器 Canvas 的桥梁。

基本用法：

const renderer = new THREE.WebGLRenderer({antialias: true,  // 抗锯齿alpha: true       // 透明背景
});
renderer.setSize(window.innerWidth, window.innerHeight); // 设置渲染尺寸
renderer.setPixelRatio(window.devicePixelRatio);        // 设置像素比
document.body.appendChild(renderer.domElement);         // 添加到 DOM// 渲染循环
function animate() {requestAnimationFrame(animate);renderer.render(scene, camera);
}
animate();