用途:该技能在用户提出创建 3D 场景、添加网格、实现 OrbitControls、加载 GLTF 模型、添加 bloom 等需求时使用,提供原生 Three.js 的完整参考。注意:本参考针对原生 Three.js;使用 React Three Fiber 的用户应改用 r3f-best-practices 技能,但理解此处概念对 R3F 仍有帮助。
主要能力:按任务组织参考文件索引,涵盖核心基础(场景设置、渲染器配置、Object3D 层级、坐标系、几何体、相机、数学)、视觉外观(PBR 与着色器材质、纹理、光照、自定义 GLSL 着色器)、运动与交互(关键帧与骨骼动画、射线检测、控制器)、资源加载(GLTF、FBX、HDR、Draco 压缩)、后处理效果(Bloom、DOF、SSAO、EffectComposer)、进阶主题(性能优化、TSL 节点材质、物理与 WebXR、WebGPU、架构模式)。
使用方式:快速上手示例展示创建场景、透视相机、WebGLRenderer、BoxGeometry 与 MeshStandardMaterial、环境光与平行光、动画循环。导入方式包括核心 import * as THREE from 'three'; 以及附加模块如 import { OrbitControls } from 'three/addons/controls/OrbitControls.js';、GLTFLoader、RGBELoader、EffectComposer、DRACOLoader、KTX2Loader。常见模式包含窗口 resize 处理、资源清理 dispose、带 Clock 的动画循环。
适用场景:Web 端 3D 可视化、交互式场景、模型展示、特效渲染等。
限制:本参考面向 Three.js r150+,涉及 WebGPU、节点材质/TSL 与现代 ES 模块导入;版本特定 API 需查阅 Three.js 迁移指南。资料未提供安装命令、收费或平台信息。