three版本更新

package-lock.json

@@ -9,7 +9,7 @@
       "version": "1.0.0",
       "dependencies": {
         "element-ui": "^2.15.13",
-        "three": "^0.124.0",
+        "three": "^0.184.0",
         "vue": "^2.6.14",
         "vue-router": "^3.5.3"
       },
@@ -6996,9 +6996,9 @@
       }
     },
     "node_modules/three": {
-      "version": "0.124.0",
-      "resolved": "https://registry.npmmirror.com/three/-/three-0.124.0.tgz",
-      "integrity": "sha512-ROXp1Ly7YyF+jC910DQyAWj++Qlw2lQv0qwYLNQwdDbjk4bsOXAfGO92wYTMPNei1GMJUmCxSxc3MjGBTS09Rg=="
+      "version": "0.184.0",
+      "resolved": "https://registry.npmmirror.com/three/-/three-0.184.0.tgz",
+      "integrity": "sha512-wtTRjG92pM5eUg/KuUnHsqSAlPM296brTOcLgMRqEeylYTh/CdtvKUvCyyCQTzFuStieWxvZb8mVTMvdPyUpxg=="
     },
     "node_modules/throttle-debounce": {
       "version": "1.1.0",

package.json

@@ -8,9 +8,9 @@
   },
   "dependencies": {
     "element-ui": "^2.15.13",
+    "three": "^0.184.0",
     "vue": "^2.6.14",
-    "vue-router": "^3.5.3",
-    "three": "^0.124.0"
+    "vue-router": "^3.5.3"
   },
   "devDependencies": {
     "@vue/cli-service": "^5.0.8",

src/components/ThreeViewerDebug.vue

@@ -187,7 +187,7 @@ export default {
       // 3. 创建渲染器
       this.renderer = new THREE.WebGLRenderer({
         antialias: true,
-        alpha: true,
+        // alpha: true,
       });
       this.renderer.shadowMap.enabled = true
 
@@ -205,37 +205,55 @@ export default {
       this.renderer.shadowMap.enabled = true
 
       this.renderer.setSize(width, height);
-      // this.renderer.setClearColor(0xcccccc);
       this.renderer.outputEncoding = THREE.sRGBEncoding; // 设置颜色编码
       this.sceneDomElement.appendChild(this.renderer.domElement);
 
-      //4. 添加光源
-      const ambientLight = new THREE.AmbientLight(0xffffff, 0.6); // 创建环境光
-      this.scene.add(ambientLight); // 将环境光添加到场景中
+      this.scene.background = new THREE.Color( 0xcccccc );
+      this.scene.fog = new THREE.Fog( 0xa0a0a0, 10, 50 );
 
-      const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8); // 平行光
-      directionalLight.position.set(5, 10, 7);
-      directionalLight.castShadow = true // 让平行光产生阴影
+      const hemiLight = new THREE.HemisphereLight( 0xffffff, 0x8d8d8d, 3 );
+      hemiLight.position.set( 0, 20, 0 );
+      this.scene.add( hemiLight );
 
-      // 配置阴影属性 - 提高质量减少锯齿
-      directionalLight.shadow.mapSize.width = 4096
-      directionalLight.shadow.mapSize.height = 4096
-      directionalLight.shadow.camera.near = 0.5
-      directionalLight.shadow.camera.far = 50
-      directionalLight.shadow.camera.left = -10
-      directionalLight.shadow.camera.right = 10
-      directionalLight.shadow.camera.top = 10
-      directionalLight.shadow.camera.bottom = -10
-      directionalLight.shadow.bias = -0.0001 // 减少阴影失真
-      directionalLight.shadow.normalBias = 0.02 // 减少阴影痤疮
+      const dirLight = new THREE.DirectionalLight( 0xffffff, 3 );
+      dirLight.position.set( 3, 10, 10 );
+      dirLight.castShadow = true;
+      dirLight.shadow.camera.top = 2;
+      dirLight.shadow.camera.bottom = - 2;
+      dirLight.shadow.camera.left = - 2;
+      dirLight.shadow.camera.right = 2;
+      dirLight.shadow.camera.near = 0.1;
+      dirLight.shadow.camera.far = 40;
+      this.scene.add( dirLight );
 
-      this.scene.add(directionalLight);
 
-      // 环境光
-      this.pmremGenerator = new THREE.PMREMGenerator(this.renderer)
-      this.pmremGenerator.compileEquirectangularShader()
-      const env = this.pmremGenerator.fromScene(new RoomEnvironment(this.renderer), 0.04).texture
-      this.scene.environment = env
+      // //4. 添加光源
+      // const ambientLight = new THREE.AmbientLight(0xffffff, 0.6); // 创建环境光
+      // this.scene.add(ambientLight); // 将环境光添加到场景中
+
+      // const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8); // 平行光
+      // directionalLight.position.set(5, 10, 7);
+      // directionalLight.castShadow = true // 让平行光产生阴影
+      
+      // // 配置阴影属性 - 提高质量减少锯齿
+      // directionalLight.shadow.mapSize.width = 4096
+      // directionalLight.shadow.mapSize.height = 4096
+      // directionalLight.shadow.camera.near = 0.5
+      // directionalLight.shadow.camera.far = 50
+      // directionalLight.shadow.camera.left = -10
+      // directionalLight.shadow.camera.right = 10
+      // directionalLight.shadow.camera.top = 10
+      // directionalLight.shadow.camera.bottom = -10
+      // directionalLight.shadow.bias = -0.0001 // 减少阴影失真
+      // directionalLight.shadow.normalBias = 0.02 // 减少阴影痤疮
+      
+      // this.scene.add(directionalLight);
+
+      // // 环境光
+      // this.pmremGenerator = new THREE.PMREMGenerator(this.renderer)
+      // this.pmremGenerator.compileEquirectangularShader()
+      // const env = this.pmremGenerator.fromScene(new RoomEnvironment(this.renderer), 0.04).texture
+      // this.scene.environment = env
 
       // 添加地面
       this.createGround()