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

threejs入门学习日记

news 2025/9/6 7:00:45

前言：

Three.js 是一个强大的 JavaScript 3D 库，它让开发者无需深入了解 WebGL 底层 API 即可创建惊艳的 3D 场景。Three.js 通过封装 WebGL 的复杂细节，提供了一套更易于使用的 API，极大地降低了在网页端创建 3D 内容的门槛。

核心概念：

1、场景Scene

这是所有 3D 对象的容器，是一个三维空间。创建的所有物体、光源、相机都需要添加到场景中才能被渲染。

const scene = new THREE.Scene();

2、相机 Camera

相机决定了你观察场景的视角。最常用的两种相机是：

（1）、透视相机 (PerspectiveCamera): 模拟人眼视角，会产生“近大远小”的效果，更符合真实世界的观察体验。创建时需要指定视野角度、宽高比、近裁剪面和远裁剪面

const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 5; // 设置相机位置

（2）、正交相机 (OrthographicCamera): 无论物体远近，渲染尺寸都相同，常用于工程制图或一些特定游戏（如模拟城市）

/*** 相机设置 - 相机决定了我们从哪个角度观察3D场景*/const width = window.innerWidth;   // 获取浏览器窗口宽度const height = window.innerHeight; // 获取浏览器窗口高度const k = width / height;          // 计算窗口宽高比const s = 70;                     // 场景显示范围控制系数，数值越大显示范围越大// 创建正交相机对象，参数分别为：左边界、右边界、上边界、下边界、近裁剪面、远裁剪面// 正交相机的特点是物体不会因为距离远近而产生透视效果（大小不变）const camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 10000);camera.position.set(0, 0, 20);// 设置相机朝向场景中心点，这样相机会"看向"场景的原点(0,0,0)camera.lookAt(scene.position);

3.渲染器 Renderer)

渲染器负责将场景和相机看到的画面渲染到浏览器页面上。通常使用 WebGLRenderer。

const renderer = new THREE.WebGLRenderer({ antialias: true }); // antialias 开启抗锯齿
renderer.setSize(window.innerWidth, window.innerHeight); // 设置渲染尺寸
document.body.appendChild(renderer.domElement); // 将画布添加到页面

4、几何体 Geometry

定义物体的形状。Three.js 提供了许多内置几何体，如立方体 (BoxGeometry)、球体 (SphereGeometry)、圆锥体 (ConeGeometry) 等

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

    // 创建一个球体几何对象，参数分别为：半径10，水平分段数20，垂直分段数20// 分段数越高，球体越光滑，但性能消耗也越大const geometry = new THREE.SphereGeometry(10, 20, 20);

5.材质 Material

定义物体的外观，如颜色、光泽度、贴图等。常用的材质有不受光照影响的基础网格材质 (MeshBasicMaterial) 和受光照影响的朗伯材质 (MeshLambertMaterial) 等

color: 材质颜色（0xff0000红色）。

wireframe: 是否将几何体渲染为线框（true/false）。

注意！！！受光照影响的材质必须添加光源才能看到物体

6.网格 Mesh

将几何体和材质结合起来，才能创建一个可以添加到场景中的可见物体

const cube = new THREE.Mesh(geometry, material);
scene.add(cube); // 将立方体添加到场景中

7.光源 Light

没有光，场景就是一片漆黑（使用 MeshBasicMaterial 除外）。常见的光源有环境光 (AmbientLight)、点光源 (PointLight)、平行光 (DirectionalLight) 等

     /*** 光源设置 - 没有光源的话，Lambert材质的物体会是黑色的*/// 创建点光源，颜色为白色(0xffffff)const point = new THREE.PointLight(0x33ff0);// 设置点光源的位置坐标(x=400, y=200, z=300)point.position.set(40, 40, 40);// 将点光源添加到场景中scene.add(point);// 创建环境光，提供整体的基础照明，颜色为灰色(0x444444)// 环境光会均匀照亮场景中的所有物体const ambient = new THREE.AmbientLight(0x444444);scene.add(ambient);

8、定义函数方法使得物体动起来

    /*** 动画循环函数 - 让球体持续旋转*/function animate(){requestAnimationFrame(animate);//   mesh.rotation.x += 0.01;//   mesh.rotation.y += 0.01;mesh.rotation.z += 0.01;mesh2.rotation.z += 0.01;mesh3.rotation.z += 0.01;renderer.render(scene, camera);}// 启动动画循环animate();

9、控制器 Controls

控制器是实现用户与3D场景交互的核心组件，它们能让你用鼠标、键盘或触摸来旋转、平移、缩放场景，或者实现第一人称漫游等高级交互。

    const controls = new OrbitControls(camera, renderer.domElement);controls.enableDamping = true; // 启用阻尼（惯性）controls.dampingFactor = 0.1;  // 阻尼系数controls.enableZoom = true;   // 启用缩放controls.enableRotate = true; // 启用旋转controls.enablePan = false;    // 启用平移（右击）在动画循环函数中需加入// 更新控制器controls.update();

有 controls.update() 的效果：

鼠标拖拽后松开，相机会平滑减速停止（有惯性）

操作感觉更流畅自然

没有 controls.update() 的效果：

鼠标拖拽后松开，相机会立即停止（无惯性）

操作感觉比较生硬

10、添加坐标轴辅助和网格辅助

// 添加3D坐标轴辅助（红色X, 绿色Y, 蓝色Z）
const axesHelper = new THREE.AxesHelper(5);
scene.add(axesHelper);// 添加网格地面辅助
const gridHelper = new THREE.GridHelper(10, 10);
scene.add(gridHelper);