天空盒

src/composes/three/environment.ts

@@ -1,6 +1,38 @@
 import * as THREE from 'three'
+import { RGBELoader } from 'three/examples/jsm/loaders/RGBELoader.js'
 
 export function useEnvironment() {
+  /**
+   * 加载HDR环境贴图作为天空盒
+   * @param scene 场景对象
+   * @param hdrPath HDR文件路径
+   * @param _renderer 渲染器（可选，用于设置环境贴图）
+   */
+  async function loadHDRSkybox(
+    scene: THREE.Scene,
+    hdrPath: string,
+    _renderer?: THREE.WebGLRenderer,
+  ) {
+    const rgbeLoader = new RGBELoader()
+
+    try {
+      const texture = await rgbeLoader.loadAsync(hdrPath)
+      texture.mapping = THREE.EquirectangularReflectionMapping
+
+      // 设置为场景背景
+      scene.background = texture
+
+      // 设置为环境贴图（影响材质反射）
+      scene.environment = texture
+
+      return texture
+    }
+    catch (error) {
+      console.error('HDR天空盒加载失败:', error)
+      throw error
+    }
+  }
+
   /**
    * 创建天空盒
    */
@@ -75,7 +107,7 @@ export function useEnvironment() {
       side: THREE.DoubleSide,
       uniforms: {
         time: { value: 0 },
-        color1: { value: new THREE.Color(0x00FFFF) },
+        color1: { value: new THREE.Color(0xFFFFFF) },
         color2: { value: new THREE.Color(0x0080FF) },
       },
       vertexShader: `
@@ -136,6 +168,7 @@ export function useEnvironment() {
 
   return {
     createSkybox,
+    loadHDRSkybox,
     createOceanGradientBackground,
     createThickGround,
     createFlowingGroundEffect,

src/router/index.ts

@@ -69,6 +69,11 @@ const router = createRouter({
       name: 'three-12',
       component: () => import('../views/three/12/index.vue'),
     },
+    {
+      path: '/three/13',
+      name: 'three-13',
+      component: () => import('../views/three/13/index.vue'),
+    },
     {
       path: '/3d-point',
       name: '3d-point',

src/views/home.vue

@@ -12,6 +12,7 @@ const demos = [
   { name: '模型与Web的交互', path: '/three/10' },
   { name: '后期处理效果', path: '/three/11' },
   { name: '公共函数抽象', path: '/three/12' },
+  { name: '天空盒', path: '/three/13' },
 ]
 </script>