SuperAPI AI 工具集

threejs-scene-setup

设计与创作

查看项目

更新于 10-15 21:49

技能介绍

用途:引导搭建 three.js 应用基础,涵盖模块加载、场景/相机/渲染器三件套、渲染循环、响应式缩放与相机控制;适用于初始化场景、修复黑屏画布、实现画布自适应、建立动画循环或添加 OrbitControls。当 package.json 依赖 three 且代码使用 import * as THREE from 'three' 时适用。不适用于加载 .gltf/.glb 模型或骨骼动画(见 threejs-gltf-loading)、材质灯光阴影环境贴图(见 threejs-materials-lighting)、二维渲染(见 pixijs-rendering)。

主要能力与用法:自 r147 起需用 import map 映射裸标识符 'three' 与 'three/addons/',插件位于 three/addons/...;使用打包器时跳过 import map,直接 npm i three。创建 Scene、PerspectiveCamera(fov, aspect, near, far) 并后移相机、WebGLRenderer 设置尺寸与像素比。用 renderer.setAnimationLoop(fn) 驱动循环,它是现代且兼容 WebXR/WebGPU 的替代方案;用 Timer 计算 delta(Clock 自 r183 弃用)。resize 时更新 camera.aspect、调用 updateProjectionMatrix() 与 renderer.setSize(...)。OrbitControls 用于开发时旋转/平移/缩放。修改现有项目前先读取已安装的 three 版本,因为示例与插件会随版本变化。

限制与注意:未映射 'three' 会报模块解析失败;黑屏常见原因是相机位于原点或使用受光材质却无灯光;动画不动可能是循环内未 render;缩放拉伸是未更新 aspect;高 DPI 需设 setPixelRatio 并限制约 2;启用 damping 时须每帧 controls.update()。