3d模型加载

src/views/gdMap/assets.js

@@ -45,7 +45,6 @@ export class Assets {
         name: "china",
         path: base_url + "assets/json/中华人民共和国.json",
       },
-
       {
         type: "File",
         name: "mapJson",
@@ -60,6 +59,12 @@ export class Assets {
         // path: base_url + "assets/json/zger.json",
         path: base_url + "assets/json/jiedao.json",
       },
+      {
+        type: "File",
+        name: "mapTerrain",
+        path: base_url + "assets/json/Scene_cq15_200.gltf",
+        // path: base_url + "assets/json/Scene.gltf",
+      },
 
       { type: "Texture", name: "huiguang", path: huiguang },
       { type: "Texture", name: "rotationBorder1", path: rotationBorder1 },

src/views/gdMap/map.js

@@ -52,6 +52,10 @@ import infoData from "./map/infoData"
 import gsap from "gsap"
 import emitter from "@/utils/emitter"
 import { InteractionManager } from "three.interactive"
+
+// 引入模型加载模块
+import { Resource } from "@/mini3d/utils/Resource"
+
 function sortByValue(data) {
   data.sort((a, b) => b.value - a.value)
   return data
@@ -100,6 +104,7 @@ export class World extends Mini3d {
     // 创建环境光
     this.initEnvironment()
     this.init()
+    console.log("执行了 这些代码")
   }
   init() {
     // 标签组
@@ -117,6 +122,10 @@ export class World extends Mini3d {
     // 鼠标移上移除的材质
     this.defaultMaterial = null // 默认材质
     this.defaultLightMaterial = null // 高亮材质
+    
+    // 创建地形模型初始化
+    this.terrainResource = new Resource()
+
     // 创建底部高亮
     this.createBottomBg()
     // 模糊边线
@@ -144,6 +153,8 @@ export class World extends Mini3d {
     this.createInfoPoint()
     // 创建轮廓
     this.createStorke()
+    // 创造3d地形
+    this.createTerrain()
     // this.time.on("tick", () => {
     //   console.log(this.camera.instance.position);
     // });
@@ -1266,6 +1277,25 @@ export class World extends Mini3d {
       texture.offset.x += 0.005
     })
   }
+  // 创建地形模型
+  createTerrain() {
+    console.log("this.terrainResource",this.terrainResource);
+    // let terrainData = this.assets.instance.getResource("mapTerrain");
+    // console.log("terrainData", terrainData);
+    this.terrainResource.loaders.GLTF.load("../../../public/assets/json/Scene_cq15_200.gltf",
+      (gltf) => {
+        let terrain = gltf.scene;
+        this.scene.add(terrain);
+      },
+      (xhr) => {
+        console.log((xhr.loaded / xhr.total * 100) + '% 已加载');
+      },
+      (error) => {
+          console.error('加载模型出错:', error);
+      }
+    )
+    // this.scene.add(barGroup)
+  }
 
   geoProjection(args) {
     return geoMercator().center(this.geoProjectionCenter).scale(this.geoProjectionScale).translate([0, 0])(args)