4 步跑通 three.js：从安装到转起第一个立方体

4 步跑通 three.js从安装到转起第一个立方体【免费下载链接】three.jsJavaScript 3D Library.项目地址: https://gitcode.com/GitHub_Trending/th/three.jsthree.js 是一个跨浏览器的 JavaScript 3D 库底层走 WebGL / WebGPU 渲染。做数据可视化、3D 产品展示或轻量网页游戏想 10 分钟看到三维效果的开发者看这篇就够了。为什么写 WebGL 和套重型引擎都不如它直接手写 WebGL着色器、缓冲、视口、矩阵变换一样都少不了光一个漫反射光照就要几十行 GLSL调通之前先怀疑人生。把 Unreal 这类重型引擎塞进网页产物动辄上百兆首屏加载速度不可接受。three.js 卡在这两者中间你写的是scene、camera、renderer这种高层对象着色器细节它替你处理好。想搞自定义效果时再下沉到ShaderMaterial或 TSL 节点系统进退自如。安装 three.js 并渲染第一个旋转立方体第 1 步拿源码。全量历史体积大--depth1只拉最新提交快很多# --depth1 只拉最新一次提交体积小得多 git clone --depth1 https://gitcode.com/GitHub_Trending/th/three.js cd three.js npm install第 2 步在项目根目录建index.html。three.js 是 ES Module用 importmap 声明模块映射别用script src老写法html head script typeimportmap { imports: { three: ./src/Three.js, !-- 主库入口 -- three/addons/: ./examples/jsm/ !-- 官方扩展库 -- } } /script /head body script typemodule src./main.js/script /body /html第 3 步写main.js。这段建场景、相机、一个立方体、渲染器并挂上动画循环import * as THREE from three; const camera new THREE.PerspectiveCamera(70, innerWidth / innerHeight, 0.01, 10); camera.position.z 1; const scene new THREE.Scene(); scene.add(new THREE.Mesh( new THREE.BoxGeometry(0.2, 0.2, 0.2), new THREE.MeshNormalMaterial() // 法线材质无需灯光就有颜色变化 )); const renderer new THREE.WebGLRenderer({ antialias: true }); renderer.setSize(innerWidth, innerHeight); renderer.setAnimationLoop((time) { // requestAnimationFrame 的封装 const cube scene.children[0]; cube.rotation.x time / 2000; cube.rotation.y time / 1000; renderer.render(scene, camera); }); document.body.appendChild(renderer.domElement);第 4 步起个静态服务器打开页面。别双击 html 文件直接跑file 协议会被 CORS 拦住python3 -m http.server 8080然后浏览器访问http://localhost:8080。看到彩色立方体在黑色背景里平滑旋转说明渲染管线全通了。能力地图四个高频场景怎么用加轨道控制让用户能拖着转模型的时候给相机挂上 OrbitControls用户就能拖拽旋转、滚轮缩放做模型预览一步到位。这段只有两行核心配置import { OrbitControls } from three/addons/controls/OrbitControls.js; const controls new OrbitControls(camera, renderer.domElement); controls.enableDamping true; // 惯性阻尼拖起来更顺滑加载 glTF 模型把美术资产搬进网页的时候仓库 examples/models/ 里有现成的 DamagedHelmet 等 glTF / OBJ / FBX 测试模型练手零成本。下面这段把模型读进场景import { GLTFLoader } from three/addons/loaders/GLTFLoader.js; new GLTFLoader().load(examples/models/gltf/DamagedHelmet/glTF/DamagedHelmet.gltf, (gltf) { scene.add(gltf.scene); camera.position.set(0, 1, 4); });接后处理管线画面不够电影感的时候泛光、景深、SSR 这些 pass 全在 examples/jsm/postprocessing/挂到 EffectComposer 上即可。以泛光为例import { EffectComposer } from three/addons/postprocessing/EffectComposer.js; import { UnrealBloomPass } from three/addons/postprocessing/UnrealBloomPass.js; const composer new EffectComposer(renderer); composer.addPass(new UnrealBloomPass(new THREE.Vector2(innerWidth, innerHeight), 1.2));注意动画循环里要改成调composer.render()而不是renderer.render()。用 WebGPU compute 模拟数万粒子CPU 算不动的时候新版 TSL 节点系统让 GPU 端模拟不难examples/webgpu_compute_particles.html 就是 20 万粒子的完整参考实现。核心是这段用 TSL 把物理逻辑写成 JS 风格的节点再交给 GPU compute// 示例从 three/webgpu 和 three/tsl 导入importmap 里要相应补上映射 const computeUpdate Fn(() { const position positions.element(instanceIndex); const velocity velocities.element(instanceIndex); velocity.addAssign(vec3(0.00, gravity, 0.00)); position.addAssign(velocity); })().compute(particleCount); // 编译成 GPU compute 任务 renderer.setAnimationLoop(() { renderer.compute(computeUpdate); // 先在 GPU 上更新粒子位置 renderer.render(scene, camera); });粒子缓冲初始化、材质部分看示例文件里computeInit和SpriteNodeMaterial那段直接抄。踩过的坑与修复importmap 不生效控制台报 Failed to resolve module specifier。根因是 importmap 脚本必须出现在 module 脚本之前声明才生效。检查 HTML 里两段脚本的先后顺序9 次有 8 次是这个。双击 html 加载 GLTF 报 CORS 错误起服务器就没事。file:// 协议下浏览器的 fetch 请求会被直接拦掉。任何静态服务器python3 -m http.server都能解决别用 file 协议跑 three.js。场景越跑越卡显存占用一直涨。频繁创建又销毁的 mesh对应的 geometry 和 material 没释放GPU 显存只增不减。删除对象前补一句mesh.geometry.dispose(); mesh.material.dispose()就干净了。什么时候别用它以及怎么调试场景仓库自带 Chrome DevTools 调试扩展chrome://extensions开启开发者模式加载已解压的扩展程序选 devtools/ 目录DevTools 的 Three.js 标签页会这样展示场景图场景图、渲染器状态一目了然调试场景结构比 console.log 快得多。three.js 适合把 3D 门槛从会写 GLSL降到会拼场景产品可视化、数据大屏、轻量网页游戏直接选它重度实时 3D 产品要配合引擎并自己做优化别指望开箱即用的帧率。花 10 分钟把上面的立方体转起来比看十篇教程都管用。【免费下载链接】three.jsJavaScript 3D Library.项目地址: https://gitcode.com/GitHub_Trending/th/three.js创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考