模型添加

ems-ui-cloud/src/views/largeScreen/three/renderModel.js

@@ -51,7 +51,7 @@ class renderModel {
     this.raycaster = new THREE.Raycaster();
     this.mouse = new THREE.Vector2();
     this.autoRotate = true;
-    this.labels = []
+    this.labels = [];
   }
   controlRotate(bool) {
     this.autoRotate = bool;
@@ -244,6 +244,9 @@ class renderModel {
     //渲染的尺寸大小
     const { clientHeight, clientWidth } = this.container;
     this.renderer.setSize(clientWidth, clientHeight);
+    this.renderer.outputEncoding = THREE.sRGBEncoding;
+    this.renderer.toneMapping = THREE.ACESFilmicToneMapping;
+    this.renderer.toneMappingExposure = 1;
     this.container.appendChild(this.renderer.domElement);
 
     // 创建一个CSS3渲染器CSS3DRenderer
@@ -261,11 +264,11 @@ class renderModel {
 
   // 创建光源
   createLight() {
-    this.scene.add(new THREE.AmbientLight(0xffffff, 10));
+    this.scene.add(new THREE.AmbientLight(0xffffff, 2));
     // 2. 添加一个或多个定向光/点光源 - 提供方向性照明，产生明暗和阴影
-    const directionalLight = new THREE.DirectionalLight(0xffffff, 1); // 白光，强度1
-    directionalLight.position.set(5, 10, 7.5); // 调整这个位置，确保光线能照到您的模型
-    // directionalLight.castShadow = true; // (可选) 开启阴影
+    const directionalLight = new THREE.DirectionalLight(0xffffff, 1.5); // 白光，强度1
+    directionalLight.position.set(5, 10, 5); // 调整这个位置，确保光线能照到您的模型
+    directionalLight.castShadow = true; // (可选) 开启阴影
     this.scene.add(directionalLight);
   }
 
@@ -438,22 +441,22 @@ class renderModel {
     if (type == 'model') {
       this.model1.visible = false;
       this.model2.visible = false;
-      this.model.visible = true
+      this.model.visible = true;
       this.labels.forEach(item => {
-        item.visible=true
-      })
+        item.visible = true;
+      });
     } else if (type == 'model1') {
       this.model.visible = false;
       this.labels.forEach(item => {
-        item.visible=false
-      })
+        item.visible = false;
+      });
       this.model2.visible = false;
       this.model1.visible = true;
     } else if (type == 'model2') {
-       this.model.visible = false;
+      this.model.visible = false;
       this.labels.forEach(item => {
-        item.visible=false
-      })
+        item.visible = false;
+      });
       this.model1.visible = false;
       this.model2.visible = true;
     }
@@ -463,31 +466,70 @@ class renderModel {
     loader.setDRACOLoader(dracoLoader);
     loader.load('/models/model1.glb', object => {
       this.calcMeshCenter(object.scene);
+      const perfectMaterial = new THREE.MeshStandardMaterial({
+        color: 0xcccccc, //
+        side: THREE.DoubleSide // 防止面片反向不可见
+      });
+
+      object.scene.traverse(child => {
+        if (child.isMesh) {
+          if (child.name == '平面') {
+            child.material = new THREE.MeshStandardMaterial({
+              color: 0x66728a,
+              side: THREE.DoubleSide
+            });
+          } else {
+            child.material = perfectMaterial; // 强制替换所有材质
+          }
+
+          child.material.needsUpdate = true;
+        }
+      });
       this.model1 = object.scene;
       // 设置相机位置
       this.camera.position.set(-20, -652, 500);
       this.controls.target.set(-20, -20, 0);
       this.model1.scale.set(10, 10, 10);
       this.model1.rotation.x = Math.PI / 2;
+      this.model1.rotation.y = Math.PI / 6;
       // 设置相机坐标系
       this.camera.lookAt(0, 0, 0);
       // 将模型添加到场景中去
-      this.model1.visible=false
+      this.model1.visible = false;
       this.scene.add(this.model1);
     });
     loader.load('/models/model2.glb', object => {
       this.calcMeshCenter(object.scene);
+        const perfectMaterial = new THREE.MeshStandardMaterial({
+        color: 0xcccccc, //
+        side: THREE.DoubleSide // 防止面片反向不可见
+      });
+
+      object.scene.traverse(child => {
+        if (child.isMesh) {
+          if (child.name == '平面' || child.name == '平面001') {
+            child.material = new THREE.MeshStandardMaterial({
+              color: 0x66728a,
+              side: THREE.DoubleSide
+            });
+          } else {
+            child.material = perfectMaterial; // 强制替换所有材质
+          }
+
+          child.material.needsUpdate = true;
+        }
+      });
       this.model2 = object.scene;
       // 设置相机位置
       this.camera.position.set(-20, -652, 500);
       this.controls.target.set(-20, -20, 0);
       this.model2.scale.set(15, 15, 15);
       this.model2.rotation.x = Math.PI / 2;
-      this.model2.rotation.y =  -Math.PI / 2;
+      this.model2.rotation.y = -Math.PI / 3;
       // 设置相机坐标系
       this.camera.lookAt(0, 0, 0);
       // 将模型添加到场景中去
-      this.model2.visible=false
+      this.model2.visible = false;
       this.scene.add(this.model2);
     });
   }