From d0c8f6ae599d4b00662733fdb60124df341954af Mon Sep 17 00:00:00 2001
From: shihui <yiqianyao.yqy@alibaba-inc.com>
Date: Mon, 25 Oct 2021 20:23:45 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E8=B0=83=E6=95=B4=20threejs=20demo?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 examples/engine/three/demo/amap_ant.js    | 13 +++++++++++--
 examples/engine/three/demo/amap_car.js    | 10 +++++++++-
 examples/engine/three/demo/space_click.js | 20 +++++++++++++++++---
 3 files changed, 37 insertions(+), 6 deletions(-)

diff --git a/examples/engine/three/demo/amap_ant.js b/examples/engine/three/demo/amap_ant.js
index f667238f85..a278f76aed 100644
--- a/examples/engine/three/demo/amap_ant.js
+++ b/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;
+  }
+}
+
diff --git a/examples/engine/three/demo/amap_car.js b/examples/engine/three/demo/amap_car.js
index dc11c87790..680922af56 100644
--- a/examples/engine/three/demo/amap_car.js
+++ b/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;
+  }
+}
diff --git a/examples/engine/three/demo/space_click.js b/examples/engine/three/demo/space_click.js
index 6e169aad15..195b656ccc 100644
--- a/examples/engine/three/demo/space_click.js
+++ b/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;
+  }
+}
+