zjs_project 1 rok temu
rodzic
commit
347fe06eb9

+ 4 - 2
src/mixins/floorMethod.js

@@ -13,7 +13,7 @@ export default {
 			// gltfSpaceUrl: "https://dm.static.elab-plus.com/3d/model/20230607/diban/diban.gltf", //模型地址
 			// gltfSpaceUrl: "https://dm.static.elab-plus.com/miniProgram/model/BP_L_carpet01-1.gltf", //模型地址
 			// gltfSpace1Url: "https://dm.static.elab-plus.com/miniProgram/model/BP_G_tiles01_1.gltf", //模型地址
-			gltfSpace1Url: "https://dm.static.elab-plus.com/miniProgram/model/BP_G_tiles01_3.gltf", //模型地址
+			gltfSpace1Url: "https://dm.static.elab-plus.com/miniProgram/model/BP_G_tiles01.glb", //模型地址
 			instancedSpaceMeshList:[],//地板实例对象 当地板复杂是就会存在多个
 			spaceTypes : ["卧室","客厅","餐厅","厨房","玄关","卫生间","衣帽间","收纳","阳台","飘窗","链接空间","自定义","楼梯","花园"],
 		}
@@ -100,8 +100,10 @@ export default {
 							let positionY = obj.centerY / 100;
 							// 天花板
 							const planeGeometry = new THREE.PlaneGeometry(obj.spaceWidth / 100,obj.spaceHeight / 100);
-							const planeMaterial = new THREE.MeshLambertMaterial({
+							const planeMaterial = new THREE.MeshStandardMaterial({
 							    color:0xffffff,
+								metalness: 0.4, // 设置金属度为1.0
+								roughness: 1 // 设置粗糙度为0.5
 							});
 							const planeMesh = new THREE.Mesh(planeGeometry, planeMaterial)
 							planeMesh.rotation.x =  Math.PI / 2 ;  // 旋转 180 度

+ 6 - 6
src/mixins/loadModel.js

@@ -694,12 +694,12 @@ export default {
 				let pointLightHelper = new THREE.PointLightHelper( pointLight, sphereSize );
 				this.scene.add( pointLightHelper);
 				
-				pointLight.castShadow = true; // default false
-				// 默认情况下光投影相机区域是一个长宽高为10x10x500的长方体区域,光源投射方向为通过坐标原点
-				pointLight.shadow.camera.left = -200; // default
-				pointLight.shadow.camera.right  = 200; // default
-				pointLight.shadow.camera.top  = 200; // default
-				pointLight.shadow.camera.bottom  = -200; // default
+				// pointLight.castShadow = true; // default false
+				// // 默认情况下光投影相机区域是一个长宽高为10x10x500的长方体区域,光源投射方向为通过坐标原点
+				// pointLight.shadow.camera.left = -200; // default
+				// pointLight.shadow.camera.right  = 200; // default
+				// pointLight.shadow.camera.top  = 200; // default
+				// pointLight.shadow.camera.bottom  = -200; // default
 				this.scene.add(pointLight);
 				
 				light.loaded = true;

+ 27 - 10
src/pages/webgl_rxdz/webgl_rxdz.vue

@@ -224,21 +224,43 @@
 				// scene.add(gridHelper);
 
                 // 环境光会均匀的照亮场景中的所有物体
-                const ambientLight = new THREE.AmbientLight(0xFFEFE0, 2);
+                const ambientLight = new THREE.AmbientLight(0xFFEFE0, 3);
                 scene.add(ambientLight);
                 //平行光
-                const light = new THREE.DirectionalLight(0xFFF8E5, 2.2);
-                light.position.set(-14.8, 9.188, -7.448); //default; light shining from top
+                const light = new THREE.DirectionalLight(0xFFF8E5, 3);
+                light.position.set(-3, 9, 3); //default; light shining from top
+				light.castShadow = true; // default false
+				// 默认情况下光投影相机区域是一个长宽高为10x10x500的长方体区域,光源投射方向为通过坐标原点
+				light.shadow.camera.left = -100; // default
+				light.shadow.camera.right  = 100; // default
+				light.shadow.camera.top  = 100; // default
+				light.shadow.camera.bottom  = -100; // default
+				
+				light.shadow.mapSize.width = 8192; // default
+				light.shadow.mapSize.height = 8192; // default
+				// light.shadow.camera.near = 0.1; // default
+				// light.shadow.camera.far = 500; // default
+				
+				// light.shadow.bias = -0.01;
+				// light.shadow.radius = 1;
+				// light.shadow.darkness = 1; // 设置阴影强度为0.5
                 scene.add(light);
+				
+				const helper = new THREE.CameraHelper( light.shadow.camera );
+				scene.add(helper);
                 // 从一个点向各个方向发射的光源。一个常见的例子是模拟一个灯泡发出的光。
                 // const pointLight = new THREE.PointLight( 0xffffff, 0.3 );
                 // camera.add( pointLight );
 
 				
 				//antialias 这个值得设置为false,不然IOS上截图会失效
-                renderer = that.renderer = new THREE.WebGLRenderer( { canvas:canvas3d, alpha: true, antialias:false,
+                renderer = that.renderer = new THREE.WebGLRenderer({ 
+					canvas:canvas3d, 
+					alpha: true, 
+					antialias:false,
 					// 如果想保存three.js canvas画布上的信息,注意设置preserveDrawingBuffer
-					preserveDrawingBuffer: true, } );
+					preserveDrawingBuffer: true,
+				});
 				renderer.shadowMap.enabled = true;//产生阴影
 				renderer.shadowMap.type = THREE.PCFSoftShadowMap; // 阴影属性
 				renderer.outputEncoding = THREE.sRGBEncoding;
@@ -266,11 +288,6 @@
 					// 检查相机位置是否超出边界框
 					if (camera.position.y < 0) {
 						camera.position.y = 0;
-						// let clampedPosition = new THREE.Vector3( );
-						// boundary.clampPoint(camera.position,clampedPosition);
-						// if(clampedPosition){
-						// 	camera.position.copy(clampedPosition);
-						// }
 					}
 				});
 				// that.controls = controls;

+ 15 - 21
src/pages/webgl_rxdz_roam/webgl_rxdz_roam.vue

@@ -163,33 +163,27 @@
 
 				// 创建相机位置
 				camera = new THREE.PerspectiveCamera(95, window.screen.width / that.canvasHeight, 0.1, 10000 );
-				camera.up.set(0, 1, -0);//俯视状态,将相机的up向量设置为z轴负方向 {x:0,y:1,z:0}
+				// camera.up.set(0, 1, 0);//俯视状态,将相机的up向量设置为z轴负方向 {x:0,y:1,z:0}
 				// camera.position.set(that.cameraStarPosition.x, that.cameraStarPosition.y, that.cameraStarPosition.z);
 				scene.add(camera);
                 that.camera = camera;
-                // 时间
-                // clock = new THREE.Clock();
-				// 辅助方格
-				// const gridHelper = new THREE.GridHelper(50, 10, 0xcccccc, 0xcccccc);
-				// gridHelper.position.y = 0;
-				// gridHelper.position.x = 0;
-				// scene.add(gridHelper);
 
                 // 环境光会均匀的照亮场景中的所有物体
-				const ambientLight = new THREE.AmbientLight(0xFEFBF6, 1.62);
-				scene.add( ambientLight );
-				
+				const ambientLight = new THREE.AmbientLight(0xFFEFE0, 3.5);
+				scene.add(ambientLight);
 				//平行光
-				const light = new THREE.DirectionalLight(0xFFFFFF, 1.98);
-				// const helper = new THREE.CameraHelper( light.shadow.camera );
-				// scene.add( helper );
-				light.position.set(-14.8, 30, 18); //default; light shining from top
-				// light.castShadow = true; // default false
-				// // 默认情况下光投影相机区域是一个长宽高为10x10x500的长方体区域,光源投射方向为通过坐标原点
-				// light.shadow.camera.left = -200; // default
-				// light.shadow.camera.right  = 200; // default
-				// light.shadow.camera.top  = 200; // default
-				// light.shadow.camera.bottom  = -200; // default
+				const light = new THREE.DirectionalLight(0xFFF8E5, 2.5);
+				light.position.set(5, 7, 3); //default; light shining from top
+				light.castShadow = true; // default false
+				// 默认情况下光投影相机区域是一个长宽高为10x10x500的长方体区域,光源投射方向为通过坐标原点
+				light.shadow.camera.left = -100; // 这个区域内产生阴影
+				light.shadow.camera.right  = 100; // 这个区域内产生阴影
+				light.shadow.camera.top  = 100; // 这个区域内产生阴影
+				light.shadow.camera.bottom  = -100; // 这个区域内产生阴影
+				
+				light.shadow.mapSize.width = 8192; 	// 影响阴影的清晰度
+				light.shadow.mapSize.height = 8192; // 影响阴影的清晰度
+
 				scene.add(light);
 				
 				//antialias 这个值得设置为false,不然IOS上截图会失效

+ 1 - 1
src/static/layoutModelData.js

@@ -1,6 +1,6 @@
 var layoutModel = [
 	{url: 'https://dm.static.elab-plus.com/miniProgram/model/BP_B_Mbed.glb', name: '1.5m床',modelName: 'BP_B_Mbed01', type:1},
-	{url: 'https://dm.static.elab-plus.com/miniProgram/model/BP_B_smallcabin.glb', name: '床头柜',modelName: 'BP_B_smallcabinet01', type:1},
+	{url: 'https://dm.static.elab-plus.com/miniProgram/model/BP_B_smallcabinet.glb', name: '床头柜',modelName: 'BP_B_smallcabinet01', type:1},
 	// {url: 'https://dm.static.elab-plus.com/miniProgram/model/BP_AutoWall_195M_C.gltf', name: '1.95m',modelName: 'BP_AutoWall_195M_C', type:1},
 	{url: 'https://dm.static.elab-plus.com/miniProgram/model/BP_B_bigbed.glb', name: '1.8m床',modelName: 'BP_B_bigbed01', type:1},
 	{url: 'https://dm.static.elab-plus.com/miniProgram/model/BP_B_smallbed.glb', name: '1.2m床',modelName: 'BP_B_smallbed01', type:1},