10分钟Three.js基础教程：用threejs-skills吃透Scene、相机与Renderer

【免费下载链接】threejs-skills项目地址https://gitcode.com/gh_mirrors/th/threejs-skills点击查看免费下载学Three.js 基础总是卡在第一关本文带你用开源项目threejs-skills这份Three.js 技能包在 10 分钟内吃透 3D 开发必备的三大核心Scene场景、相机Camera与 Renderer渲染器从零搭出第一个会转的 3D 立方体。为什么选 threejs-skills 学 Three.js 基础many 新手学 Three.js 的痛点是官方文档很全但不知道先学什么、怎么写才规范。threejs-skills 正是为此而生——它把 Three.js 的核心模块整理成 10 份精炼的SKILL.md 技能文档每份都包含✅ 最小可运行示例Quick Start✅ 准确的 API 说明与构造签名✅ 真实项目中的常见模式✅ 性能优化建议其中与场景、相机、渲染器直接相关的就是 skills/threejs-fundamentals/SKILL.md本文内容主要依据它整理。一键获取 threejs-skills 技能包整个仓库只有几份 Markdown 文件clone 下来就能读零依赖git clone https://gitcode.com/gh_mirrors/th/threejs-skills如果你想让 AI 编程助手如 Claude Code自动加载这些技能只需把skills/目录复制到~/.claude/skills/即可详见 README.md 的 Installation 一节。三大核心角色Scene、相机与 Renderer理解 Three.js先记住一个类比核心类类比职责THREE.Scene舞台装下所有 3D 对象、灯光、雾效THREE.PerspectiveCamera观众的眼睛决定从哪个角度、多远、看多大范围THREE.WebGLRenderer摄像机投影幕把 Scene 用相机视角画成屏幕上的像素三者缺一不可渲染器拿着相机去场景里取景最后输出画面。Scene 场景3D世界的舞台Scene是所有 3D 对象的容器创建它只要一行。除了放物体它还管两件小事背景可以设纯色scene.background new THREE.Color(0x000000)也可以换成天空盒纹理雾效scene.fog new THREE.Fog(0xffffff, 1, 100)能模拟远近遮挡让大场景更有纵深感这些细节都能在 skills/threejs-fundamentals/SKILL.md 的 Core Classes → Scene 小节找到完整写法。相机 Camera决定怎么看最常用的是透视相机PerspectiveCamera它模拟人眼近大远小的效果有 4 个关键参数const camera new THREE.PerspectiveCamera( 75, // fov视野角度度越大越广角 innerWidth / innerHeight, // aspect画布宽高比 0.1, // near近裁剪面太近的东西会被裁掉 1000, // far远裁剪面太远的内容不渲染 ); 新手常踩的坑near和far差距过大比如 0.001 到 100000会导致深度精度下降、画面闪烁保持一个合理的比例即可。如果做等距游戏、2.5D 场景则换成正交相机OrthographicCamera——它没有透视变形物体大小不随距离变化。多相机还有ArrayCamera分屏、CubeCamera实时反射环境贴图skills/threejs-fundamentals/SKILL.md 的 Cameras 部分都有现成示例。WebGLRenderer把3D渲染成像素渲染器负责最终出图新手需要记住四件事创建new THREE.WebGLRenderer({ antialias: true })开启抗锯齿画面更平滑贴到页面document.body.appendChild(renderer.domElement)匹配屏幕setSize()设置尺寸setPixelRatio(Math.min(devicePixelRatio, 2))避免高分屏发虚出图每帧调用renderer.render(scene, camera)进阶配置色调映射toneMapping、阴影shadowMap、输出色彩空间outputColorSpace见同一文档的 WebGLRenderer 小节。10分钟上手从零到第一个旋转立方体把三大核心串起来一个完整可运行的场景骨架长这样完整版本见 skills/threejs-fundamentals/SKILL.md 开头的 Quick Startimport * as THREE from three; // 1. 舞台 眼睛 渲染器 const scene new THREE.Scene(); const camera new THREE.PerspectiveCamera(75, innerWidth / innerHeight, 0.1, 1000); const renderer new THREE.WebGLRenderer({ antialias: true }); renderer.setSize(innerWidth, innerHeight); document.body.appendChild(renderer.domElement); // 2. 摆上一个绿色立方体 const cube new THREE.Mesh( new THREE.BoxGeometry(1, 1, 1), new THREE.MeshStandardMaterial({ color: 0x00ff00 }) ); scene.add(cube); // 3. 补一盏环境光 一盏平行光否则物体是全黑的 scene.add(new THREE.AmbientLight(0xffffff, 0.5)); const dirLight new THREE.DirectionalLight(0xffffff, 1); dirLight.position.set(5, 5, 5); scene.add(dirLight); camera.position.z 5; // 相机往后拉让立方体进入视野 // 4. 动画循环 窗口缩放自适应 function animate() { requestAnimationFrame(animate); cube.rotation.x 0.01; cube.rotation.y 0.01; renderer.render(scene, camera); } animate(); window.addEventListener(resize, () { camera.aspect innerWidth / innerHeight; camera.updateProjectionMatrix(); // 改了 aspect 必须调用 renderer.setSize(innerWidth, innerHeight); });⚠️ 两个高频坑画面全黑→ 忘了加灯光。MeshStandardMaterial等标准材质必须靠光照才有颜色快速排查可临时换MeshBasicMaterial。窗口一拉就变形→ 改camera.aspect后漏掉了camera.updateProjectionMatrix()。坐标系与对象层级少走弯路的两个知识右手坐标系X 向右、Y 向上、Z 朝向你Three.js 使用右手坐标系X 向右、Y 向上、Z 朝向观察者屏幕外。拿不准方向时加一个坐标轴辅助线一目了然scene.add(new THREE.AxesHelper(5)); // 红X 绿Y 蓝ZObject3D万物皆可父子Mesh、Light、Camera都继承自Object3D统一拥有position、rotation、scale三个变换属性。利用父子层级可以把一组对象打包成整体const group new THREE.Group(); group.add(头, 身体, 脚); group.rotation.y Math.PI / 4; // 旋转整体而不是逐个转 scene.add(group);这套舞台→层级→变换的思路在 skills/threejs-fundamentals/SKILL.md 的 Object3D 与 Group 小节有完整 API 说明。常见新手问题清单症状大概率原因解决思路黑屏/什么都看不到相机没看向物体、或没加光用camera.lookAt(0,0,0)先加AmbientLight物体变形拉伸窗口缩放后没更新相机updateProjectionMatrix()不能省高分屏画面发虚没设置像素比setPixelRatio(Math.min(devicePixelRatio, 2))物体旋转忽快忽慢用帧数而非时间做增量用THREE.Clock的getDelta()切换场景后内存涨几何体/材质没释放调用geometry.dispose()、material.dispose()清理资源的正确姿势Proper Cleanup在 fundamentals 文档的 Common Patterns 一节建议养成加进场景就要会拆的习惯。下一步threejs-skills 全家桶基础打通后这个仓库还有 9 份技能文档等你解锁模块内容路径几何体内置形状、BufferGeometry、实例化渲染skills/threejs-geometry/SKILL.md材质PBR 材质、Phong/Basic、ShaderMaterialskills/threejs-materials/SKILL.md灯光六种光源对比、阴影、环境光skills/threejs-lighting/SKILL.md纹理UV 映射、环境贴图、渲染目标skills/threejs-textures/SKILL.md动画关键帧、骨骼动画、混合skills/threejs-animation/SKILL.md加载器GLTF/GLB、异步加载与缓存skills/threejs-loaders/SKILL.md着色器GLSL 基础、自定义特效skills/threejs-shaders/SKILL.md后期处理EffectComposer、Bloom、景深skills/threejs-postprocessing/SKILL.md交互射线检测、OrbitControls、点选skills/threejs-interaction/SKILL.md小结Scene 搭舞台、Camera 定视角、Renderer 出画面——三件套跑通Three.js 的基础框架就立住了。配合 threejs-skills 里已审计r160的规范示例你的第一个 3D 项目可以从能跑直接走向跑得稳。赞分享【免费下载链接】threejs-skills项目地址https://gitcode.com/gh_mirrors/th/threejs-skills点击查看免费下载相关推荐如何快速掌握BloomRPC10分钟精通Proto文件加载全流程如何快速掌握BloomRPC10分钟精通Proto文件加载全流程 BloomRPC是一款功能强大的gRPC客户端工具能够帮助开发者轻松加载、解析和测试Pro开发工具解决Whisper Mic常见问题麦克风无法识别、转录延迟的终极方案解决Whisper Mic常见问题麦克风无法识别、转录延迟的终极方案 你是否在使用Whisper Mic进行语音转文字时遇到了麦克风无法识别或转录延迟的问题LLaMA-Factory源码解析Tokenizer与模型加载流程LLaMA Factory源码解析Tokenizer与模型加载流程 在LLaMA Factory框架中Tokenizer与模型加载是整个微调流程的基础环节。人工智能大模型微调LoRA强化学习RLHF预训练模型评测上一篇botbuilder-js与Azure无缝集成Blob Storage与Cosmos DB数据持久化方案下一篇使用 AWS SDK for Rust 与 Amazon Textract 构建文档问答分析analyze-document 实战指南创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考