SuperAPI AI 工具集

three-js

通用与其它

查看项目

更新于 10-16 00:30

技能介绍

用途:该技能在用户提出创建 3D 场景、添加网格、实现 OrbitControls、加载 GLTF 模型、添加 bloom 等需求时使用,提供原生 Three.js 的完整参考。React Three Fiber 用户应改用 r3f-best-practices 技能,但理解此处概念有助于 R3F 开发。

主要能力:按任务索引参考文件,涵盖核心基础(场景设置、渲染器配置、Object3D 层级、坐标系、几何体、相机、数学)、视觉外观(材质、纹理、光照、自定义 GLSL 着色器)、运动与交互(关键帧与骨骼动画、射线拾取、OrbitControls 等控制器)、资源加载(GLTF、FBX、纹理、HDR、Draco 压缩)、后处理效果(Bloom、DOF、SSAO、EffectComposer)、进阶主题(性能优化、TSL 节点材质、物理与 WebXR、WebGPU、架构模式)。

使用方式:以 ES 模块导入,核心用 import * as THREE from 'three',附加组件从 three/addons/ 导入,如 OrbitControls、GLTFLoader、RGBELoader、EffectComposer、DRACOLoader、KTX2Loader。提供快速上手示例(场景、透视相机、WebGLRenderer、立方体、环境光与方向光、动画循环)、窗口缩放处理、资源清理/释放、基于 Clock 的动画循环等常见模式。

适用场景:原生 Three.js 的 3D 网页开发,包括场景搭建、模型加载、交互控制、视觉特效与性能调优。

限制:该参考面向 Three.js r150+,涉及 WebGPU、节点材质/TSL 与现代 ES 模块导入;版本相关 API 需查阅 Three.js 迁移指南。资料未提供安装命令、收费或价格信息。