fix(docs): 修复文档 3d 模型演示不渲染问题

yue1123 · Dec 26, 2022 · 391b924 · 391b924
1 parent 6c9ee33
commit 391b924
Showing 1 changed file with 66 additions and 66 deletions.
diff --git a/docs/examples/expand/mapv/3dModel.vue b/docs/examples/expand/mapv/3dModel.vue
@@ -17,76 +17,76 @@
 </template>
 
 <script setup>
-  // import { withBase } from 'vitepress'
-  // import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js'
-  // import { Engine, GeoJSONDataSource, EmptySky, Polygon, ExtendMeshStandardMaterial } from 'mapv-three'
-  // import {
-  //   PlaneGeometry,
-  //   Mesh,
-  //   MeshStandardMaterial,
-  //   MeshBasicMaterial,
-  //   Color,
-  //   BoxGeometry,
-  //   TextureLoader,
-  //   RepeatWrapping
-  // } from 'three'
+  import { withBase } from 'vitepress'
+  import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js'
+  import { Engine, GeoJSONDataSource, EmptySky, Polygon, ExtendMeshStandardMaterial } from 'mapv-three'
+  import {
+    PlaneGeometry,
+    Mesh,
+    MeshStandardMaterial,
+    MeshBasicMaterial,
+    Color,
+    BoxGeometry,
+    TextureLoader,
+    RepeatWrapping
+  } from 'three'
   const center = { lat: 40.05298, lng: 116.25241 }
   function handleInitd({ map }) {
-    // const engine = new Engine(map, {})
-    // // engine.map.setCenter(center)
-    // engine.rendering.useMrt = true
-    // engine.rendering.shadow.enabled = true
-    // engine.rendering.animationLoopFrameTime = 40
-    // engine.rendering.colorAdjust.saturation = 0.25
-    // engine.rendering.colorAdjust.contrast = 0.15
-    // engine.rendering.colorAdjust.brightness = 0
+    const engine = new Engine(map, {})
+    // engine.map.setCenter(center)
+    engine.rendering.useMrt = true
+    engine.rendering.shadow.enabled = true
+    engine.rendering.animationLoopFrameTime = 40
+    engine.rendering.colorAdjust.saturation = 0.25
+    engine.rendering.colorAdjust.contrast = 0.15
+    engine.rendering.colorAdjust.brightness = 0
 
-    // const sky = engine.add(new EmptySky())
-    // sky.time = 3600 * 16.5
+    const sky = engine.add(new EmptySky())
+    sky.time = 3600 * 16.5
 
-    // const position = engine.map.projectPointArr(center)
+    const position = engine.map.projectPointArr(center)
 
-    // // 模型
-    // const models = [
-    //   {
-    //     position: [12941311, 4845891, 6],
-    //     path: withBase('/models/building5.glb'),
-    //     rotate: true,
-    //     info: '房子'
-    //   },
-    //   {
-    //     position: [12941265, 4845905, 6],
-    //     path: withBase('/models/palm_tree.glb'),
-    //     rotate: false,
-    //     info: '树木'
-    //   },
-    //   {
-    //     position: [12941369, 4845869, 2],
-    //     path: withBase('/models/truck1.glb'),
-    //     rotate: true,
-    //     info: '货车'
-    //   }
-    // ]
-    // const loader = new GLTFLoader()
-    // for (let i = 0; i < models.length; i++) {
-    //   loader.load(models[i].path, (gltf) => {
-    //     const model = gltf.scene.children[0]
-    //     model.userData.info = models[i].info
-    //     for (let i = 0; i < model.children.length; i++) {
-    //       model.children[i].castShadow = true
-    //     }
-    //     model.position.set(models[i].position[0], models[i].position[1], models[i].position[2])
-    //     if (models[i].rotate) {
-    //       model.rotation.x = Math.PI / 2
-    //       model.rotation.y = (1.08 * Math.PI) / 2
-    //     }
-    //     engine.add(model)
-    //     // 模型添加点击事件
-    //     engine.event.markEventProxy(model)
-    //     engine.event.bind(model, 'click', (e) => {
-    //       alert('点击了 ' + model.userData.info)
-    //     })
-    //   })
-    // }
+    // 模型
+    const models = [
+      {
+        position: [12941311, 4845891, 6],
+        path: withBase('/models/building5.glb'),
+        rotate: true,
+        info: '房子'
+      },
+      {
+        position: [12941265, 4845905, 6],
+        path: withBase('/models/palm_tree.glb'),
+        rotate: false,
+        info: '树木'
+      },
+      {
+        position: [12941369, 4845869, 2],
+        path: withBase('/models/truck1.glb'),
+        rotate: true,
+        info: '货车'
+      }
+    ]
+    const loader = new GLTFLoader()
+    for (let i = 0; i < models.length; i++) {
+      loader.load(models[i].path, (gltf) => {
+        const model = gltf.scene.children[0]
+        model.userData.info = models[i].info
+        for (let i = 0; i < model.children.length; i++) {
+          model.children[i].castShadow = true
+        }
+        model.position.set(models[i].position[0], models[i].position[1], models[i].position[2])
+        if (models[i].rotate) {
+          model.rotation.x = Math.PI / 2
+          model.rotation.y = (1.08 * Math.PI) / 2
+        }
+        engine.add(model)
+        // 模型添加点击事件
+        engine.event.markEventProxy(model)
+        engine.event.bind(model, 'click', (e) => {
+          alert('点击了 ' + model.userData.info)
+        })
+      })
+    }
   }
 </script>