feat: 调整 threejs demo

examples/engine/three/demo/amap_ant.js

@@ -29,7 +29,7 @@ scene.on('loaded', () => {
       const center = scene.getCenter();
 
       const cubeGeometry = new THREE.BoxBufferGeometry(10000, 10000, 10000);
-      const cubeMaterial = new THREE.MeshNormalMaterial();
+      const cubeMaterial = new THREE.MeshNormalMaterial({side: THREE.DoubleSide});
       const cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
       layer.setObjectLngLat(cube, [ center.lng + 0.05, center.lat ], 0);
       threeScene.add(cube);
@@ -42,7 +42,7 @@ scene.on('loaded', () => {
           // 根据 GeoJSON 数据放置模型
           layer.getSource().data.dataArray.forEach(({ coordinates }) => {
             const gltfScene = gltf.scene;
-
+            setDouble(gltfScene)
             layer.adjustMeshToMap(gltfScene);
             // gltfScene.scale.set(1000, 1000, 1000)
             layer.setMeshScale(gltfScene, 1000, 1000, 1000);
@@ -100,3 +100,12 @@ scene.on('loaded', () => {
     .animate(true);
   scene.addLayer(threeJSLayer);
 });
+
+function setDouble(object) {
+  if(object.children && object.children.length && object.children.length > 0) {
+    object.children.map(child => setDouble(child))
+  } else if(object.material){
+    object.material.side = THREE.DoubleSide;
+  }
+}
+

examples/engine/three/demo/amap_car.js

@@ -162,6 +162,7 @@ scene.on('loaded', () => {
         gltf => {
           // 根据 GeoJSON 数据放置模型
           const gltfScene = gltf.scene.clone();
+          setDouble(gltfScene)
           layer.getSource().data.dataArray.forEach(() => {
             layer.adjustMeshToMap(gltfScene);
             gltfScene.scale.set(500000, 500000, 500000);
@@ -187,7 +188,6 @@ scene.on('loaded', () => {
             threeScene.add(gltfScene);
           });
 
-
           travelLoop();
           function travelLoop() {
             travel(gltfScene, points, 5000, () => {
@@ -216,3 +216,11 @@ scene.on('loaded', () => {
     .animate(true);
   scene.addLayer(threeJSLayer);
 });
+
+function setDouble(object) {
+  if(object.children && object.children.length && object.children.length > 0) {
+    object.children.map(child => setDouble(child))
+  } else if(object.material){
+    object.material.side = THREE.DoubleSide;
+  }
+}

examples/engine/three/demo/space_click.js

@@ -140,7 +140,8 @@ scene.on('loaded', () => {
           // opacity: 0.6,
           map: new THREE.TextureLoader().load(
             'https://gw.alipayobjects.com/mdn/rms_23a451/afts/img/A*gA0NRbuOF5cAAAAAAAAAAAAAARQnAQ'
-          )
+          ),
+          side: THREE.DoubleSide
         });
         const plane = new THREE.Mesh(geometry, material);
         layer.setObjectLngLat(plane, [ 120.1008, 30.2573 ], 0);
@@ -156,6 +157,8 @@ scene.on('loaded', () => {
         'https://gw.alipayobjects.com/os/bmw-prod/3ca0a546-92d8-4ba0-a89c-017c218d5bea.gltf',
         gltf => {
           const antModel = gltf.scene;
+          setDouble(antModel)
+          // antModel.children[0].material.side = THREE.DoubleSide
           layer.adjustMeshToMap(antModel);
           layer.setMeshScale(antModel, 20, 20, 20);
           layer.setObjectLngLat(
@@ -203,7 +206,8 @@ scene.on('loaded', () => {
           }
         },
         vertexShader: v,
-        fragmentShader: f
+        fragmentShader: f,
+        side: THREE.DoubleSide
       });
 
       const fbxLoaded = new FBXLoader();
@@ -265,7 +269,8 @@ scene.on('loaded', () => {
           const fontMat = new THREE.MeshPhongMaterial({
             color: 0xcccccc,
             shininess: 60,
-            specular: 0xcccccc
+            specular: 0xcccccc,
+            side: THREE.DoubleSide
           });
 
           const testHeight = 900;
@@ -421,3 +426,12 @@ scene.on('loaded', () => {
   }
   return '';
 });
+
+function setDouble(object) {
+  if(object.children && object.children.length && object.children.length > 0) {
+    object.children.map(child => setDouble(child))
+  } else if(object.material){
+    object.material.side = THREE.DoubleSide;
+  }
+}
+