From 94830006bcf05a19b267401b2b7be6bfb72fcd85 Mon Sep 17 00:00:00 2001 From: cao_yi_min <957095781@qq.com> Date: Mon, 27 Apr 2026 14:48:48 +0800 Subject: [PATCH] =?UTF-8?q?three=E7=89=88=E6=9C=AC=E6=9B=B4=E6=96=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package-lock.json | 8 ++-- package.json | 4 +- src/components/ThreeViewerDebug.vue | 72 ++++++++++++++++++----------- 3 files changed, 51 insertions(+), 33 deletions(-) diff --git a/package-lock.json b/package-lock.json index c98b377..69ac46b 100644 --- a/package-lock.json +++ b/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", diff --git a/package.json b/package.json index ec59298..3858d7c 100644 --- a/package.json +++ b/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", diff --git a/src/components/ThreeViewerDebug.vue b/src/components/ThreeViewerDebug.vue index b170581..8ad44a5 100644 --- a/src/components/ThreeViewerDebug.vue +++ b/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 // 让平行光产生阴影 - - // 配置阴影属性 - 提高质量减少锯齿 - 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); + const hemiLight = new THREE.HemisphereLight( 0xffffff, 0x8d8d8d, 3 ); + hemiLight.position.set( 0, 20, 0 ); + this.scene.add( hemiLight ); - // 环境光 - 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 + 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 ); + + + // //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()