shanke/vue-model-review
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

three版本更新

Browse Source
This commit is contained in:
cao_yi_min
2026-04-27 14:48:48 +08:00
parent f3de05d7dc
commit 94830006bc
3 changed files with 51 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
package-lock.json generated
View File

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

4
package.json
View File

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

68
src/components/ThreeViewerDebug.vue
View File

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