threeJS加载3Dtitles数据-Toy模板网

这篇具有很好参考价值的文章主要介绍了threeJS加载3Dtitles数据。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

加载.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);
        });

文章来源地址https://www.toymoban.com/news/detail-719254.html

到了这里，关于threeJS加载3Dtitles数据的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！