不用学C++,不用装插件,Three.js让你直接在浏览器里玩转3D世界!

还记得以前想在网页上展示个3D模型有多麻烦吗？要么得让用户下载个几百M的插件，要么得用Flash那种老古董，折腾半天最后还得担心兼容性。现在好了，有了Three.js，你只需要会写几行JavaScript，就能在浏览器里直接渲染出电影级别的3D效果。

这玩意儿到底是个啥？

简单来说，Three.js就是一个基于WebGL的JavaScript 3D库。它帮咱们把底层那些复杂的图形学API都封装好了，你不用再跟什么着色器、缓冲区、矩阵变换死磕，直接调用现成的方法就能搞出各种酷炫的3D场景。

这个项目从2010年左右就开始开发了，作者是Ricardo Cabello（mrdoob），到现在已经在GitHub上攒了快10万颗星。基本上你想得到的Web 3D应用，从简单的模型展示到复杂的虚拟现实，它都能搞定。

为啥非得选它？

市面上3D引擎不少，Unity、Unreal都很强，但Three.js有它独特的优势。首先它纯前端，用户打开网页就能看，不用装任何东西。其次它轻量，核心库压缩后才几百KB。最重要的是，它文档齐全，社区活跃，遇到问题StackOverflow上一搜一大把答案。

而且最近的r183版本更新了不少好东西，比如新增了Bezier插值动画、BatchedMesh支持线框材质、还有更完善的TSL（Three Shading Language）支持。这些东西让性能优化和视觉效果都上了一个台阶。

咱们开始动手吧

理论说多了没意思，直接上手才是王道。首先你得有个现代浏览器，Chrome、Firefox、Safari都行，IE就算了，那玩意儿连WebGL都不支持。

第一步：安装

最简单的方式直接用CDN，在HTML文件里加这一行：

<scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>

如果你用npm管理项目，那就更简单了：

npm install three

然后在你的JS文件里导入：

import * as THREE from'three';

第二步：搭建基础场景

Three.js的核心就三个东西：场景（Scene）、相机（Camera）、渲染器（Renderer）。这仨的关系就像是拍电影：场景是舞台，相机是摄像机，渲染器是后期制作。

// 创建场景const scene = new THREE.Scene();scene.background = new THREE.Color(0x87CEEB); // 给背景设个天蓝色// 创建相机（透视相机，模拟人眼视角）const camera = new THREE.PerspectiveCamera(75, // 视角大小window.innerWidth / window.innerHeight, // 宽高比0.1, // 近裁剪面1000// 远裁剪面);camera.position.z = 5; // 把相机往后挪挪，不然贴脸上了啥也看不见// 创建渲染器const renderer = new THREE.WebGLRenderer({ antialias: true });renderer.setSize(window.innerWidth, window.innerHeight);renderer.shadowMap.enabled = true; // 开启阴影document.body.appendChild(renderer.domElement);

第三步：往场景里塞点东西

光有个空舞台多没意思，咱们加个立方体：

// 创建几何体const geometry = new THREE.BoxGeometry(1, 1, 1);// 创建材质，设成红色const material = new THREE.MeshStandardMaterial({ color: 0xff0000,roughness: 0.4,metalness: 0.6});// 把几何体和材质组合成网格const cube = new THREE.Mesh(geometry, material);cube.castShadow = true; // 让它能产生阴影scene.add(cube);

注意到这里用的是MeshStandardMaterial而不是基础的MeshBasicMaterial，因为前者能响应光照，看起来更真实。

第四步：加点灯光

没有光的世界一片漆黑。咱们加盏聚光灯：

const spotLight = new THREE.SpotLight(0xffffff, 100);spotLight.position.set(5, 10, 5);spotLight.angle = Math.PI / 4;spotLight.penumbra = 0.1;spotLight.decay = 2;spotLight.distance = 200;spotLight.castShadow = true;scene.add(spotLight);// 再加个环境光，不然背光面死黑一片const ambientLight = new THREE.AmbientLight(0x404040, 2);scene.add(ambientLight);

第五步：让它动起来

静态场景太无聊，咱们让立方体转起来，同时加上轨道控制器，让用户能用鼠标拖拽查看：

// 导入轨道控制器（如果用CDN方式直接在HTML引入）import { OrbitControls } from'three/examples/jsm/controls/OrbitControls.js';const controls = new OrbitControls(camera, renderer.domElement);controls.enableDamping = true; // 开启阻尼，手感更丝滑// 动画循环functionanimate() {  requestAnimationFrame(animate);// 让立方体旋转  cube.rotation.x += 0.01;  cube.rotation.y += 0.01;  controls.update(); // 更新控制器  renderer.render(scene, camera);}animate();

进阶玩法：加载外部模型

自己写几何体太麻烦？直接加载现成的3D模型啊。Three.js支持GLTF、OBJ、FBX等主流格式。咱们以GLTF为例（这是现在的标准格式）：

import { GLTFLoader } from'three/examples/jsm/loaders/GLTFLoader.js';const loader = new GLTFLoader();loader.load('path/to/your/model.gltf',function (gltf) {    scene.add(gltf.scene);// 自动调整相机位置看全模型const box = new THREE.Box3().setFromObject(gltf.scene);const center = box.getCenter(new THREE.Vector3());const size = box.getSize(new THREE.Vector3());const maxDim = Math.max(size.x, size.y, size.z);    camera.position.set(      center.x + maxDim * 1.5,      center.y + maxDim,      center.z + maxDim * 2    );    camera.lookAt(center);  },undefined,function (error) {console.error('模型加载出错了:', error);  });

性能优化小技巧

做3D最怕卡顿，这儿有几个实用的优化方法：

实例化渲染：如果要画一千棵树，别一个个创建Mesh，用InstancedMesh，性能提升几十倍。
LOD（细节层次）：远处的物体用低精度模型，近处用高精度，省不少算力。
纹理压缩：用KTX2或者Basis Universal格式，显存占用能少一半。
合理设置阴影：阴影质量别调太高，能用烘焙贴图解决的别用实时光影。

真实世界都在用它

你可能没意识到，很多牛叉的网站背后都是Three.js在撑腰。比如谷歌的一些创意实验、各大汽车厂商的在线车型展示、还有那些酷炫的数据可视化大屏。甚至连NASA的某些火星车可视化项目都用到了它。

最新的r183版本还在TSL（Three Shading Language）上下了大功夫，这是一种更现代的着色器编写方式，能让材质系统更灵活，后期维护也更方便。

结语

Three.js这东西学起来曲线挺平缓的，但要玩精通确实得下功夫。不过好在社区资料多，官网例子也丰富，从简单的几何体到复杂的粒子系统、后期处理、物理引擎集成，都有现成的代码可以参考。

要是你对Web 3D感兴趣，甭犹豫了，直接开干吧。现在这个年代，不会点3D的前端开发者都不好意思说自己是搞技术的。

源码地址：https://github.com/mrdoob/three.js

专注分享 GitHub知识，分享AI 资讯和AI搞米经验，分享AI Agent使用经验。