5、Three.js加载3DTiles模型和实现双屏渲染

1、Three.js加载3DTiles模型

threejs加载3DTiles模型gitee地址：https://gitee.com/kisshua/D3TilesRendererJS/tree/master

github地址：https://github.com/NASA-AMMOS/3DTilesRendererJS

本节案例源码地址：

链接：https://pan.baidu.com/s/1uZ78E-epTrrb_HBYgN-X5g 

提取码：l05s

首先下载上面地址中的代码——》接着使用vscode打开，然后运行example/bundle/index.html

文件，可以看到加载出的3D Tiles模型——》我们可以直接将example/data里面的数据删除，然后全部换成我们自己的数据——》接着再次运行就可以成功加载出我们自己的模型了——》

浏览器效果——》

注意问题：只有那个index.html里面可以正常访问。（其它的有的加载不显示内容）

接着使用sublime打开index.html和example.e31bb0bc.js文件——》然后全选example.e31bb0bc.js文件里面的内容，在点击查看里面的自动换行（方便看源码）——》

接着把js里面内容拉到第68行，可以看到加载的那个data/tileset.json模型文件——》然后直接把data文件里面的内容删除，把我们自己的自己的tileset.json等文件复制到里面——》

注意问题：就是修改倒数第三行里面的内容（一共70行内容），还要修改相机在场景中与物体最小，最大家畜距离以及相机位置等）

在68行里面需要修改视口相机的比例，相机的位置使模型出现在浏览器中合适的位置。（源码很多调整和threejs是一样的，这里不在讲解）

2、Three.js实现双屏渲染

注意：官方案例写法参考第三个。

（1）双屏渲染加载stl模型

地址：https://www.wjceo.com/examples/threejs2/107/

（2）Three.js双屏渲染fbx模型

代码和模型下载地址：

此时在浏览器可以看到效果了——》

（3）Three.js双屏渲染（对上面代码进行修改，使用官方最新three.js版本）

运行以前下载的three.js项目——》接着找到双屏渲染案例——》

模型下载地址：https://ringstar.top/threejs/examples/model/model01/maisuiyu.fbx

在axample文件夹里面创建admindouble.html文件——》接着编写代码——》

浏览器效果——》（需要自己添加灯光）