新增处理后建筑3dtiles数据，具有LOD效果。

gulpfile.js

@@ -0,0 +1,47 @@
+const {src,dest,series,parallel,watch}=require('gulp');
+const gulpclean=require("gulp-clean");
+const gltfPipeline=require("gltf-pipeline");
+const fsExtra=require('fs-extra');
+const config={
+    model:'./public/data/model',
+    Architecture:'chateau_de_montfa_81_gltf'
+}
+/**
+ * 清空dist
+ */
+function clean(){
+    return src(config.model+"/"+config.Architecture+"/draco",{
+        read:false,
+        allowEmpty:true
+    })
+    .pipe(gulpclean());
+    //cb();//异步任务执行完成回调函数，当函数不返回内容时必须使用；
+}
+/**
+ * 简化gltf网格
+ */
+function dracoCompress(cb){
+    const array=["origin","medium","low"];
+    const level=[7,7,7];
+    for(let i=0;i<array.length;i++){
+        const name=array[i];
+        const gltf=fsExtra.readJSONSync(config.model+"/"+config.Architecture+"/"+name+"/scene-"+name+".gltf");
+        gltfPipeline.processGltf(gltf,{
+            resourceDirectory:config.model+"/"+config.Architecture+"/"+name,
+            separate:true,
+            dracoOptions: {
+                compressionLevel: 7
+            }
+        }).then(function(results){
+            fsExtra.writeJSONSync(config.model+"/"+config.Architecture+"/"+name+"/scene-"+name+".gltf",results.gltf);
+            //save separateResources
+            const resources=results.separateResources;
+            for(const resource in resources){
+                const buffer=resources[resource];
+                fsExtra.writeFileSync(config.model+"/"+config.Architecture+"/"+name+"/"+resource,buffer);
+            }
+        });
+    }
+    cb();
+}
+exports.draco=dracoCompress;

package.json

@@ -13,6 +13,10 @@
     "copy-webpack-plugin": "^5.0.5",
     "core-js": "^3.6.5",
     "element-ui": "^2.13.2",
+    "fs-extra": "^9.0.1",
+    "gltf-pipeline": "^2.1.10",
+    "gulp": "^4.0.2",
+    "gulp-clean": "^0.4.0",
     "vue": "^2.6.11",
     "vue-router": "^3.2.0",
     "vuex": "^3.4.0",

public/data/model/chateau_de_montfa_81_gltf/low/scene-low.gltf

@@ -0,0 +1 @@
+{"asset":{"version":"2.0","generator":"babylon.js glTF exporter for 3dsmax 2018 v20200527.2"},"scene":0,"scenes":[{"nodes":[0]}],"nodes":[{"mesh":0,"rotation":[-0.7235671,0,0,0.690254033],"name":"default25%","translation":[0,0,0],"scale":[1,1,1]}],"meshes":[{"primitives":[{"attributes":{"POSITION":1,"NORMAL":2,"TEXCOORD_0":3},"indices":0,"material":0,"mode":4,"extensions":{"KHR_draco_mesh_compression":{"bufferView":0,"attributes":{"POSITION":0,"NORMAL":1,"TEXCOORD_0":2}}}}],"name":"default25%"}],"accessors":[{"componentType":5125,"count":223242,"type":"SCALAR","name":"accessorIndices"},{"componentType":5126,"count":115201,"max":[25.539179909135317,23.97938663019052,19.030418560664387],"min":[-28.94354390913532,-26.78074990913532,1.18858953086468],"type":"VEC3","name":"accessorPositions"},{"componentType":5126,"count":115201,"type":"VEC3","name":"accessorNormals"},{"componentType":5126,"count":115201,"type":"VEC2","name":"accessorUVs"}],"bufferViews":[{"buffer":0,"byteOffset":0,"byteLength":289308}],"buffers":[{"name":"buffer","byteLength":289308,"uri":"buffer.bin"}],"materials":[{"pbrMetallicRoughness":{"baseColorTexture":{"index":0,"texCoord":0},"metallicFactor":0,"roughnessFactor":0.7022211,"baseColorFactor":[1,1,1,1]},"name":"montfa_2020","emissiveFactor":[0,0,0],"alphaMode":"OPAQUE","doubleSided":false}],"textures":[{"sampler":0,"source":0,"name":"montfa_2020.jpg"}],"images":[{"name":"montfa_2020","uri":"montfa_2020.jpg"}],"samplers":[{"magFilter":9729,"minFilter":9987,"wrapS":10497,"wrapT":10497}],"extensionsRequired":["KHR_draco_mesh_compression"],"extensionsUsed":["KHR_draco_mesh_compression"]}

public/data/model/chateau_de_montfa_81_gltf/medium/scene-medium.gltf

@@ -0,0 +1 @@
+{"asset":{"version":"2.0","generator":"babylon.js glTF exporter for 3dsmax 2018 v20200527.2"},"scene":0,"scenes":[{"nodes":[0]}],"nodes":[{"mesh":0,"rotation":[-0.7235671,0,0,0.690254033],"name":"default50%","translation":[0,0,0],"scale":[1,1,1]}],"meshes":[{"primitives":[{"attributes":{"POSITION":1,"NORMAL":2,"TEXCOORD_0":3},"indices":0,"material":0,"mode":4,"extensions":{"KHR_draco_mesh_compression":{"bufferView":0,"attributes":{"POSITION":0,"NORMAL":1,"TEXCOORD_0":2}}}}],"name":"default50%"}],"accessors":[{"componentType":5125,"count":447318,"type":"SCALAR","name":"accessorIndices"},{"componentType":5126,"count":170013,"max":[25.539179935222275,23.978868104103565,19.041736674147533],"min":[-28.943597335222275,-26.781318235222276,1.1733002047777235],"type":"VEC3","name":"accessorPositions"},{"componentType":5126,"count":170013,"type":"VEC3","name":"accessorNormals"},{"componentType":5126,"count":170013,"type":"VEC2","name":"accessorUVs"}],"bufferViews":[{"buffer":0,"byteOffset":0,"byteLength":464584}],"buffers":[{"name":"buffer","byteLength":464584,"uri":"buffer.bin"}],"materials":[{"pbrMetallicRoughness":{"baseColorTexture":{"index":0,"texCoord":0},"metallicFactor":0,"roughnessFactor":0.7022211,"baseColorFactor":[1,1,1,1]},"name":"montfa_2020","emissiveFactor":[0,0,0],"alphaMode":"OPAQUE","doubleSided":false}],"textures":[{"sampler":0,"source":0,"name":"montfa_2020.jpg"}],"images":[{"name":"montfa_2020","uri":"montfa_2020.jpg"}],"samplers":[{"magFilter":9729,"minFilter":9987,"wrapS":10497,"wrapT":10497}],"extensionsRequired":["KHR_draco_mesh_compression"],"extensionsUsed":["KHR_draco_mesh_compression"]}

public/data/model/chateau_de_montfa_81_gltf/origin/scene-origin.gltf

@@ -0,0 +1 @@
+{"asset":{"version":"2.0","generator":"babylon.js glTF exporter for 3dsmax 2018 v20200527.2"},"scene":0,"scenes":[{"nodes":[0]}],"nodes":[{"mesh":0,"rotation":[-0.7235671,0,0,0.690254033],"name":"default","translation":[0,0,0],"scale":[1,1,1]}],"meshes":[{"primitives":[{"attributes":{"POSITION":1,"NORMAL":2,"TEXCOORD_0":3},"indices":0,"material":0,"mode":4,"extensions":{"KHR_draco_mesh_compression":{"bufferView":0,"attributes":{"POSITION":0,"NORMAL":1,"TEXCOORD_0":2}}}}],"name":"default"}],"accessors":[{"componentType":5125,"count":885138,"type":"SCALAR","name":"accessorIndices"},{"componentType":5126,"count":178864,"max":[25.5391800433317,23.979024776893006,19.06404447223742],"min":[-28.943818743331704,-26.781367943331706,1.142355266668295],"type":"VEC3","name":"accessorPositions"},{"componentType":5126,"count":178864,"type":"VEC3","name":"accessorNormals"},{"componentType":5126,"count":178864,"type":"VEC2","name":"accessorUVs"}],"bufferViews":[{"buffer":0,"byteOffset":0,"byteLength":542473}],"buffers":[{"name":"buffer","byteLength":542476,"uri":"buffer.bin"}],"materials":[{"pbrMetallicRoughness":{"baseColorTexture":{"index":0,"texCoord":0},"metallicFactor":0,"roughnessFactor":0.7022211,"baseColorFactor":[1,1,1,1]},"name":"montfa_2020","emissiveFactor":[0,0,0],"alphaMode":"OPAQUE","doubleSided":false}],"textures":[{"sampler":0,"source":0,"name":"montfa_2020.jpg"}],"images":[{"name":"montfa_2020","uri":"montfa_2020.jpg"}],"samplers":[{"magFilter":9729,"minFilter":9987,"wrapS":10497,"wrapT":10497}],"extensionsRequired":["KHR_draco_mesh_compression"],"extensionsUsed":["KHR_draco_mesh_compression"]}

public/data/tilesets/ground/tileset.json → public/data/tilesets/architecture/tileset.json

@@ -27,21 +27,21 @@
         0,
         0,
         0,
-        66.361,
+        30.6,
         0,
         0,
         0,
-        81.5,
+        28.9,
         0,
         0,
         0,
-        2.33
+        8.73
       ]
     },
-    "geometricError": 1,
+    "geometricError": 0.2,
     "refine": "REPLACE",
     "content": {
-      "uri": "ground-low.b3dm"
+      "uri": "scene-low.b3dm"
     },
     "children": [
       {
@@ -50,20 +50,20 @@
             0,
             0,
             0,
-            66.361,
+            30.6,
             0,
             0,
             0,
-            81.5,
+            28.9,
             0,
             0,
             0,
-            2.33
+            8.73
           ]
         },
-        "geometricError": 300,
+        "geometricError": 0.1,
         "content": {
-          "uri": "ground-medium.b3dm"
+          "uri": "scene-medium.b3dm"
         },
         "children": [
           {
@@ -72,20 +72,20 @@
                 0,
                 0,
                 0,
-                66.361,
+                30.6,
                 0,
                 0,
                 0,
-                81.5,
+                28.9,
                 0,
                 0,
                 0,
-                2.33
+                8.73
               ]
             },
-            "geometricError": 100,
+            "geometricError": 0,
             "content": {
-              "uri": "ground.b3dm"
+              "uri": "scene-origin.b3dm"
             }
           }
         ]

src/components/Add3dTiles/index.ts

@@ -1,4 +1,4 @@
-import { Viewer, Cesium3DTileset, Cartesian3, Transforms, HeadingPitchRoll, Ellipsoid, viewerCesium3DTilesInspectorMixin } from "cesium";
+import { Viewer, Cesium3DTileset, viewerCesium3DTilesInspectorMixin } from "cesium";
 
 /**
  * 添加3dtiles
@@ -22,16 +22,7 @@ class Add3dTiles{
      * @param url .json地址
      */
     add(url:string){
-        const origin = Cartesian3.fromDegrees(-95.0, 40.0, 0.0);
-        const fixedFrameTransform = Transforms.localFrameToFixedFrameGenerator("north", "west");
-        const hpRoll = new HeadingPitchRoll(0, 0, 0);
-        const modelMatrix = Transforms.headingPitchRollToFixedFrame(
-            origin,
-            hpRoll,
-            Ellipsoid.WGS84,
-            fixedFrameTransform
-        );
-        console.log(modelMatrix);
+        this.clear();
         const tileset=this.viewer.scene.primitives.add(new Cesium3DTileset({
             backFaceCulling:false,//禁用背面剔除
             url:url
@@ -41,7 +32,22 @@ class Add3dTiles{
         tileset.readyPromise.then(function(){
             viewer.zoomTo(tileset);
         })
-        this.viewer.extend(viewerCesium3DTilesInspectorMixin);
+        if(!(this.viewer as any).cesium3DTilesInspector){
+            this.viewer.extend(viewerCesium3DTilesInspectorMixin);
+        }
+    }
+    /**
+     * 移出场景中的tilesets
+     */
+    clear(){
+        const len=this.viewer.scene.primitives.length;//scene中图元数量
+        const collection=this.viewer.scene.primitives;
+        for(let i=0;i<len;i++){//删除全部tilesets
+            const primitive=collection.get(i);
+            if(primitive instanceof Cesium3DTileset){
+                collection.remove(primitive);
+            }
+        }
     }
     /**
      * 从场景中移出

src/components/AddGlTF/index.ts

@@ -1,4 +1,4 @@
-import { Viewer, Cesium3DTileset, Model } from "cesium";
+import { Viewer, Model, Cartesian3, Transforms, HeadingPitchRoll, Ellipsoid, Matrix4, BoundingSphere, HeadingPitchRange } from "cesium";
 
 /**
  * 添加gltf,glb
@@ -22,10 +22,39 @@ class AddGlTF{
      * @param url .json地址
      */
     add(url:string){
-        const tileset=this.viewer.scene.primitives.add(Model.fromGltf({
-            url:url
-        }));
-        this.gltf=tileset;
+        this.clear();
+        const origin = Cartesian3.fromDegrees(-95.0, 40.0, 0.0);//定义模型世界坐标系中位置
+        const fixedFrameTransform = Transforms.localFrameToFixedFrameGenerator("north", "west");
+        const hpRoll = new HeadingPitchRoll(0, 0, 0);
+        const modelMatrix = Transforms.headingPitchRollToFixedFrame(
+            origin,
+            hpRoll,
+            Ellipsoid.WGS84,
+            fixedFrameTransform
+        );
+        const gltf=this.viewer.scene.primitives.add(Model.fromGltf({
+            url:url,
+            modelMatrix:modelMatrix
+        })) as Model;
+        this.gltf=gltf;
+        gltf.readyPromise.then(()=>{
+            const center=Matrix4.multiplyByPoint(modelMatrix,gltf.boundingSphere.center,new Cartesian3());
+            const sphere=new BoundingSphere(center,gltf.boundingSphere.radius);
+            this.viewer.camera.flyToBoundingSphere(sphere,{offset:new HeadingPitchRange(0,0,0)});
+        })
+    }
+    /**
+     * 移出场景中的gltf模型
+     */
+    clear(){
+        const len=this.viewer.scene.primitives.length;//scene中图元数量
+        const collection=this.viewer.scene.primitives;
+        for(let i=0;i<len;i++){//删除全部gltf model
+            const primitive=collection.get(i);
+            if(primitive instanceof Model){
+                collection.remove(primitive);
+            }
+        }
     }
     /**
      * 从场景中移出

src/components/SideMenu/index.vue

@@ -11,14 +11,12 @@
       <el-submenu index="2-1">
         <template slot="title">glTF</template>
         <el-menu-item index="2-1-1" @click="addglTF('CesiumMan')">CesiumMan</el-menu-item>
-        <el-menu-item index="2-1-2" @click="addglTF('Car')">Car</el-menu-item>
-        <el-menu-item index="2-1-3" @click="addglTF('Plane')">Plane</el-menu-item>
+        <el-menu-item index="2-1-2" @click="addglTF('Architecture')">建筑</el-menu-item>
       </el-submenu>
       <el-submenu index="2-2">
         <template slot="title">3dTiles</template>
-        <el-menu-item index="2-2-1" @click="add3dtiles('dragon')">龙</el-menu-item>
-        <el-menu-item index="2-2-2" @click="add3dtiles('ground')">地面</el-menu-item>
-        <el-menu-item index="2-2-3" @click="add3dtiles('lod')">Lod</el-menu-item>
+        <el-menu-item index="2-2-1" @click="add3dtiles('Dragon')">龙</el-menu-item>
+        <el-menu-item index="2-2-3" @click="add3dtiles('Architecture')">建筑</el-menu-item>
       </el-submenu>
     </el-submenu>
   </el-menu>
@@ -39,41 +37,42 @@ export default Vue.extend({
   },
   mounted(){
     this.viewer=this.$store.state.viewer;
-    console.log(this.$store.state.viewer);
   },
   methods: {
-    zoomIn() {
+    zoomIn() {//放大
       const sceneView = new SceneView(this.viewer);
       sceneView.zoomIn();
     },
-    zoomOut() {
+    zoomOut() {//缩小
       const sceneView = new SceneView(this.viewer);
       sceneView.zoomOut();
     },
-    home() {
+    home() {//全球视野
       const sceneView = new SceneView(this.viewer);
       sceneView.home();
     },
-    add3dtiles(name: string) {
-      console.log(this.viewer);
+    add3dtiles(name: string) {//加载3d-tiles
       const tilesetLoader = new Add3dTiles(this.viewer);
       let url = "";
       switch (name) {
-        case "dragon":
+        case "Dragon":
           url = "./data/tilesets/TilesetWithDiscreteLOD/tileset.json";
           break;
-        case "ground":
-          url = "./data/tilesets/ground/tileset.json";
+        case "Architecture":
+           url = "./data/tilesets/architecture/tileset.json";
           break;
       }
       tilesetLoader.add(url);
     },
-    addglTF(name: string) {
+    addglTF(name: string) {//加载gltf模型
       const gltfLoader = new AddGlTF(this.viewer);
       let url = "";
       switch (name) {
         case "CesiumMan":
-          url = "./data/tf/gltf/ground.gltf";
+          url = "./data/model/CesiumMan/Cesium_Man.gltf";
+          break;
+          case "Architecture":
+          url="./data/model/chateau_de_montfa_81_gltf/origin/scene-origin.gltf";
           break;
       }
       gltfLoader.add(url);

src/views/Viewer.vue

@@ -3,7 +3,7 @@
 </template>
 <script lang="ts">
 import Vue from "vue";
-import {Ion,Viewer, createWorldTerrain} from 'cesium';
+import {Ion,Viewer, createWorldTerrain, JulianDate} from 'cesium';
 import 'cesium/Source/Widgets/widgets.css';
 export default Vue.extend({
   data() {
@@ -21,9 +21,16 @@ export default Vue.extend({
       const viewer = new Viewer("viewer");
       viewer.scene.screenSpaceCameraController.enableCollisionDetection=false;
       viewer.scene.globe.depthTestAgainstTerrain=true;
+      viewer.scene.globe.enableLighting=false;
       this.viewer=viewer as any;
       this.$store.commit('ACTIVE_VIEWER',viewer);
-      
+      this.systemTime(viewer);
+    },
+    systemTime(viewer:Viewer){//设置系统时间为中午12点
+      const time=new Date(Date.now());
+      time.setUTCHours(12);
+      const juli=JulianDate.fromDate(time);
+      viewer.clock.currentTime=juli;
     }
   }
 });