threeJS加载3Dtitles数据_three加载3dtiles

        加载.gltf文件从网上查找资料，比较容易。

import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';

        但是项目使用的不是该类型的数据，是制作的 3Dtitles，折腾了几天，找到的资料比较少，比对着其他方法加载出了数据。

1.加载3Dtitles引用

        与加载。gltf不同，加载3Dtitles需要引用对应的插件 “3d-tiles-renderer”。安装时，出现了各种错误，是跟vue版本兼容性问题，尝试了安装不同版本的，错误就没有了。

import { B3DMLoader, TilesRenderer } from "3d-tiles-renderer";

2. 加载模型

        模型的json文件，要调试确认是否加载成功。我是把json文件下载到本地加载执行的。

   //加载模型
      this.tilesRenderer = new TilesRenderer(datapath + "tileset.json");
      this.tilesRenderer.setCamera(this.camera);
      this.tilesRenderer.setResolutionFromRenderer(this.camera, this.renderer);
      this.scene.add(this.tilesRenderer.group);

3.遍历解析模型

        模型文件加载成功，对应的是由多个3dm数据组成，当然也可以单独加载一个。我是采取循环遍历的方式，将所有的3dm数据添加到一个group中，组合成一个完整的模型数据。

        模型第一次加载出来，看着比较粗糙，有的侧面显示有问题，就添加了属性处理。逐个渲染添加到对象中，就可以看到模型加载出来了。

        如果模型较大，有可能导致电脑死机，建议加载一小块区域进行尝试。

 // 加载json，解析json 取出children中的路径进行拼装加载
      fetch(datapath + "tileset.json")
        .then((response) => {
          return response.json();
        })
        .then((resdata) => {
          const tilesetArr = resdata.root.children;
          for (const tilese of tilesetArr) {
            new B3DMLoader().load(datapath + tilese.content.uri).then((res) => {
              res.scene.rotation.set(Math.PI / 2, 0, 0);
              res.scene.scale.set(0.01, 0.01, 0.01);
              res.scene.position.set(0, 0, 0);
 
              res.scene.traverse((model) => {
                this.group.add(res.scene);
                if (model.isMesh) {
                  model.material.side = THREE.BackSide; //背面可见
                  model.material.side = THREE.DoubleSide;//两侧的面可见
                }
              });
            });
          }
        })
        .catch((error) => {
          // 在这里处理获取JSON数据失败的情况
          console.error(error);
        });