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

72
src/components/ThreeViewerDebug.vue
View File

@@ -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()