# 三.js 为 Web 构建 3D 场景和交互式体验。 ## 状态：首发模式会随着使用而演变。 ## 何时使用 * 产品浏览器/3D 展示 * 互动背景 * 3D数据可视化 * 创意实验 * 游戏般的体验 ## 设置 ### 香草 pnpm 添加三个 pnpm add -D @types/三 ### 反应（反应三纤维） pnpm 添加三个 @react-三/纤维 @react-三/drei pnpm add -D @types/三 ## 基本模式 ### 原版 Three.js 从 '三' 导入 * 作为三 const 场景 = new THREE.Scene() const 相机 = 新 THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000) const renderer = new THREE.WebGLRenderer({ antialias: true }) renderer.setSize(window.innerWidth, window.innerHeight) document.body.appendChild(renderer.domElement) // 添加一个立方体 const 几何 = new THREE.BoxGeometry() const 材质 = new THREE.MeshStandardMaterial({ 颜色: 0x00ff00 }) const 立方体 = new THREE.Mesh(几何体, 材质) 场景.添加（立方体） // 添加灯光 const light = new THREE.DirectionalLight(0xffffff, 1) light.position.set(5, 5, 5) 场景.添加（灯光）相机.位置.z = 5 // 动画循环函数动画（）{ 请求动画帧（动画）立方体.旋转.x += 0.01 立方体.旋转.y += 0.01 渲染器.渲染（场景，相机） } 动画（） ### 反应三纤维从“@react-三/纤维”导入{画布} 从 '@react-two/drei' 导入 { OrbitControls, Environment } 函数框() { 返回（ <网格> ） } 导出默认函数 Scene() { 返回（ <画布相机={{位置:[3,3,3]}}> <环境光强度={0.5} /> <框/> <轨道控制/> <环境预设=“工作室”/> ） } ## 常见食谱 ### 加载 GLTF 模型从 '@react-two/drei' 导入 { useGLTF } 函数模型() { const { 场景 } = useGLTF('/model.glb') 返回 } ### 响应式画布 <画布样式={{宽度：'100%'，高度：'100vh'}} 相机={{位置:[0,0,5],视场:50}} dpr={[1, 2]} > ### 后处理 pnpm 添加@react-三/后处理从 '@react-two/postprocessing' 导入 { EffectComposer, Bloom } <效果作曲家> ### 使用 useFrame 进行动画从 '@react- Three/Fiber' 导入 { useFrame } 从 'react' 导入 { useRef } 函数 SpinningBox() { 常量引用 = useRef() useFrame((状态，增量) => { ref.current.rotation.y += delta }) 返回（ <网格参考={ref}> <盒子几何/> ） } ## AI资产管道（Nano Banana） 1. 使用 Nano Banana 在 Google AI Studio 中生成图像 2. 通过 Tripo、Mesy 或类似工具转换为 3D 3.导出为GLTF/GLB 4.加载Three.js ## 参考 * Three.js 文档： * 反应三纤维： * Drei 助手： * Three.js 示例： ## 待办事项 * 第一个建立模式的真实项目 * 决定香草与反应三纤维的偏好 * 添加着色器图案 * 添加物理（剑杆）模式

三个js

包含技能