three.js 3D 渲染零门槛上手免构建6 段代码转起你的第一个立方体【免费下载链接】three.jsJavaScript 3D Library.项目地址: https://gitcode.com/GitHub_Trending/th/three.jsthree.js 把 WebGL 3D 渲染的矩阵、缓冲、着色器细节收进几十个高层对象你写 scene、camera、renderer一行 GLSL 不用碰。手写裸 WebGL一个带光照的材质就要几十行着色器上重型引擎打包体积以 MB 计还拖着一堆你用不上的系统。three.js 卡在两者中间产物小、加载快适合要在网页里做产品可视化、模型展示、轻量互动 3D 的开发者。为什么是 three.js裸 WebGL 和引擎都不划算方案代价裸 WebGL一个漫反射光照约几十行 GLSL矩阵、缓冲全自己管调试靠猜重型引擎打包体积 MB 级带着一整套你用不上的系统three.js几何体、材质、光照、相机都是类组合起来就是场景想要自定义效果时再下沉到 ShaderMaterial 或 TSL 节点系统不必一开始就写 GLSL进退有据。免构建跑起第一个旋转立方体仓库的 build/ 产物没进版本库但 src/ 是纯 JavaScript 的 ES Module浏览器原生就能跑所以不用 npm install、不用构建工具。步骤 1浅克隆只拉最新提交git clone --depth1 https://gitcode.com/GitHub_Trending/th/three.js cd three.js步骤 2建一个 quickstart/ 目录放自己的文件index.html 里用 importmap 声明模块映射script typeimportmap { imports: { three: ../src/Three.js, !-- 直接指向源码跳过构建 -- three/addons/: ../examples/jsm/ !-- OrbitControls 等扩展库 -- } } /script script typemodule src./main.js/scriptimportmap 必须写在 module 脚本之前才生效顺序错了后面全白搭。步骤 3写 main.jsimport * as THREE from three; const camera new THREE.PerspectiveCamera(60, innerWidth / innerHeight, 0.1, 100); camera.position.z 3; // 拉远到 3 个单位1 单位见方的立方体正好入镜 const cube new THREE.Mesh(new THREE.BoxGeometry(1, 1, 1), new THREE.MeshNormalMaterial()); const scene new THREE.Scene(); scene.add(cube); const renderer new THREE.WebGLRenderer({ antialias: true }); renderer.setSize(innerWidth, innerHeight); renderer.setAnimationLoop((t) { cube.rotation.set(t / 2000, t / 1000, 0); // 双轴不同速旋转立体感立刻出来 renderer.render(scene, camera); }); document.body.appendChild(renderer.domElement);MeshNormalMaterial 按法线给颜色不用布任何灯光第一帧就有明暗这是选它当第一个材质的原因。步骤 4在仓库根目录起静态服务器python3 -m http.server 8080浏览器打开 http://localhost:8080/quickstart/。你应看到黑底上一个六面颜色各异的立方体匀速自转切走标签页再回来它停在原位setAnimationLoop 是 requestAnimationFrame 的封装后台自动暂停。看到它转起来渲染管线就全通了。场景进阶交互、真实模型、泛光后处理相机能拖。加三行 OrbitControls用户就能拖拽旋转、滚轮缩放做模型预览一步到位import { OrbitControls } from three/addons/controls/OrbitControls.js; const controls new OrbitControls(camera, renderer.domElement); controls.enableDamping true; // 惯性阻尼松手有收势 renderer.setAnimationLoop((t) { controls.update(); // 开了阻尼必须每帧手动更新漏了就不灵 renderer.render(scene, camera); });搬进真实模型。GLTFLoader 是 glTF 加载的标准入口仓库的 examples/models/ 目录里躺着现成的 glTF、OBJ、FBX 测试模型拿 DamagedHelmet 练手零成本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, 0.5, 3); // 头盔约 1 单位高按重心取景 });加一层电影感。泛光、景深、SSR 的 Pass 都集中在 examples/jsm/postprocessing/ 里挂到 EffectComposer 上即可UnrealBloomPass 就是官方示例 webgl_postprocessing_unreal_bloom.html 里那一圈霓虹光晕。再往上还有 WebGPU computeexamples/ 目录下的 webgpu_compute_particles 系列把粒子、流体、积雪做成了完整参考上万粒子在 GPU 上模拟不用自己搭管线。最容易卡住的三个报错现象双击 index.html 直接打开页面空白控制台一片 CORS/fetch 报错。原因file:// 协议下浏览器拦掉模块和跨域请求。解法任何静态服务器都能跑别用 file 协议。现象控制台报 Failed to resolve module specifier。原因importmap 脚本排在了 module 脚本后面或漏掉 three/addons/ 这行映射。解法importmap 放head最前面两个键一个都别少。现象场景越跑越卡GPU 显存只涨不跌。原因频繁创建销毁的 mesh对应的 geometry 和 material 没释放。解法移出场景时顺手补上mesh.geometry.dispose(); mesh.material.dispose();。调试技巧装上仓库自带的 DevTools 扩展场景结构别靠 console.log 猜。devtools/ 目录是一个 Chrome 扩展在 chrome://extensions 开启开发者模式点加载已解压的扩展程序选中这个目录之后 DevTools 里会多出一个 Three.js 标签页场景树、每个对象用的几何体和材质类型、渲染器内存占用全部摊开。它适合什么不适合什么three.js 没有物理系统、没有游戏循环、没有资源管线drawcall 数量、合批、instancing 全得你自己管大规模场景的性能优化不在它的职责内WebGPU 系列功能也只覆盖支持的浏览器。做产品可视化、数据展示、轻量互动 3D它够用且省心做重度实时 3D老老实实上引擎或自己做优化。先花十分钟把立方体转起来剩下的问题去 examples/ 的几百个官方示例里找答案。【免费下载链接】three.jsJavaScript 3D Library.项目地址: https://gitcode.com/GitHub_Trending/th/three.js创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
three.js 3D 渲染零门槛上手：免构建，6 段代码转起你的第一个立方体
three.js 3D 渲染零门槛上手免构建6 段代码转起你的第一个立方体【免费下载链接】three.jsJavaScript 3D Library.项目地址: https://gitcode.com/GitHub_Trending/th/three.jsthree.js 把 WebGL 3D 渲染的矩阵、缓冲、着色器细节收进几十个高层对象你写 scene、camera、renderer一行 GLSL 不用碰。手写裸 WebGL一个带光照的材质就要几十行着色器上重型引擎打包体积以 MB 计还拖着一堆你用不上的系统。three.js 卡在两者中间产物小、加载快适合要在网页里做产品可视化、模型展示、轻量互动 3D 的开发者。为什么是 three.js裸 WebGL 和引擎都不划算方案代价裸 WebGL一个漫反射光照约几十行 GLSL矩阵、缓冲全自己管调试靠猜重型引擎打包体积 MB 级带着一整套你用不上的系统three.js几何体、材质、光照、相机都是类组合起来就是场景想要自定义效果时再下沉到 ShaderMaterial 或 TSL 节点系统不必一开始就写 GLSL进退有据。免构建跑起第一个旋转立方体仓库的 build/ 产物没进版本库但 src/ 是纯 JavaScript 的 ES Module浏览器原生就能跑所以不用 npm install、不用构建工具。步骤 1浅克隆只拉最新提交git clone --depth1 https://gitcode.com/GitHub_Trending/th/three.js cd three.js步骤 2建一个 quickstart/ 目录放自己的文件index.html 里用 importmap 声明模块映射script typeimportmap { imports: { three: ../src/Three.js, !-- 直接指向源码跳过构建 -- three/addons/: ../examples/jsm/ !-- OrbitControls 等扩展库 -- } } /script script typemodule src./main.js/scriptimportmap 必须写在 module 脚本之前才生效顺序错了后面全白搭。步骤 3写 main.jsimport * as THREE from three; const camera new THREE.PerspectiveCamera(60, innerWidth / innerHeight, 0.1, 100); camera.position.z 3; // 拉远到 3 个单位1 单位见方的立方体正好入镜 const cube new THREE.Mesh(new THREE.BoxGeometry(1, 1, 1), new THREE.MeshNormalMaterial()); const scene new THREE.Scene(); scene.add(cube); const renderer new THREE.WebGLRenderer({ antialias: true }); renderer.setSize(innerWidth, innerHeight); renderer.setAnimationLoop((t) { cube.rotation.set(t / 2000, t / 1000, 0); // 双轴不同速旋转立体感立刻出来 renderer.render(scene, camera); }); document.body.appendChild(renderer.domElement);MeshNormalMaterial 按法线给颜色不用布任何灯光第一帧就有明暗这是选它当第一个材质的原因。步骤 4在仓库根目录起静态服务器python3 -m http.server 8080浏览器打开 http://localhost:8080/quickstart/。你应看到黑底上一个六面颜色各异的立方体匀速自转切走标签页再回来它停在原位setAnimationLoop 是 requestAnimationFrame 的封装后台自动暂停。看到它转起来渲染管线就全通了。场景进阶交互、真实模型、泛光后处理相机能拖。加三行 OrbitControls用户就能拖拽旋转、滚轮缩放做模型预览一步到位import { OrbitControls } from three/addons/controls/OrbitControls.js; const controls new OrbitControls(camera, renderer.domElement); controls.enableDamping true; // 惯性阻尼松手有收势 renderer.setAnimationLoop((t) { controls.update(); // 开了阻尼必须每帧手动更新漏了就不灵 renderer.render(scene, camera); });搬进真实模型。GLTFLoader 是 glTF 加载的标准入口仓库的 examples/models/ 目录里躺着现成的 glTF、OBJ、FBX 测试模型拿 DamagedHelmet 练手零成本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, 0.5, 3); // 头盔约 1 单位高按重心取景 });加一层电影感。泛光、景深、SSR 的 Pass 都集中在 examples/jsm/postprocessing/ 里挂到 EffectComposer 上即可UnrealBloomPass 就是官方示例 webgl_postprocessing_unreal_bloom.html 里那一圈霓虹光晕。再往上还有 WebGPU computeexamples/ 目录下的 webgpu_compute_particles 系列把粒子、流体、积雪做成了完整参考上万粒子在 GPU 上模拟不用自己搭管线。最容易卡住的三个报错现象双击 index.html 直接打开页面空白控制台一片 CORS/fetch 报错。原因file:// 协议下浏览器拦掉模块和跨域请求。解法任何静态服务器都能跑别用 file 协议。现象控制台报 Failed to resolve module specifier。原因importmap 脚本排在了 module 脚本后面或漏掉 three/addons/ 这行映射。解法importmap 放head最前面两个键一个都别少。现象场景越跑越卡GPU 显存只涨不跌。原因频繁创建销毁的 mesh对应的 geometry 和 material 没释放。解法移出场景时顺手补上mesh.geometry.dispose(); mesh.material.dispose();。调试技巧装上仓库自带的 DevTools 扩展场景结构别靠 console.log 猜。devtools/ 目录是一个 Chrome 扩展在 chrome://extensions 开启开发者模式点加载已解压的扩展程序选中这个目录之后 DevTools 里会多出一个 Three.js 标签页场景树、每个对象用的几何体和材质类型、渲染器内存占用全部摊开。它适合什么不适合什么three.js 没有物理系统、没有游戏循环、没有资源管线drawcall 数量、合批、instancing 全得你自己管大规模场景的性能优化不在它的职责内WebGPU 系列功能也只覆盖支持的浏览器。做产品可视化、数据展示、轻量互动 3D它够用且省心做重度实时 3D老老实实上引擎或自己做优化。先花十分钟把立方体转起来剩下的问题去 examples/ 的几百个官方示例里找答案。【免费下载链接】three.jsJavaScript 3D Library.项目地址: https://gitcode.com/GitHub_Trending/th/three.js创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
