用途:帮助创建小型、高性能的 Three.js 网页应用与 3D 场景,采用现代 ES 模块写法(JS/TS)。核心思路是场景图(scene graph)心智模型:加入 scene 的对象才会渲染,用 Group 处理层级变换。
主要能力:场景、相机、渲染器初始化;内置几何体(Box、Sphere、Cylinder、Torus、Plane、Cone、Icosahedron 等);材质选择(MeshBasic、MeshStandard、MeshPhysical、MeshNormal、MeshPhong)及常用属性;光照(Ambient、Directional、Point、Spot)与阴影;动画循环(renderer.setAnimationLoop);鼠标交互;窗口缩放处理;OrbitControls 相机控制;粒子场、网格背景等常见场景模式。
使用方式:真实仓库推荐 npm + 打包器,执行 npm i three,从 three 与 three/addons/... 导入;单文件演示可用 CDN。OrbitControls 导入路径为 three/addons/controls/OrbitControls.js 或对应 CDN 的 examples/jsm 路径。动画使用 renderer.setAnimationLoop((time) => { ... }),并设置 renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))。
适用场景:作品集展示、游戏/交互、数据可视化、背景效果、产品查看器等,并建议按场景变化几何体、材质、配色与动画风格。
限制与注意:无光照时除 Basic/Normal 材质外画面为黑;避免在动画循环中新建几何体、避免过高分段数、避免未设置像素比上限;现代 Three.js(r150+)使用 ES 模块,CommonJS 与全局 THREE 变量属旧写法。GLTF 模型、着色器、后处理及游戏模式等进阶内容见其 references 文档。具体收费、平台与效果资料暂未提供。