Three.js开发神器-结合3DTiles插件加载倾斜摄影模型

最新推荐文章于 2024-05-24 09:47:11 发布
最新推荐文章于 2024-05-24 09:47:11 发布
阅读量5.1k 收藏 17
点赞数 3
分类专栏： Three.js开发神器 文章标签： 3d unity 游戏引擎 Powered by 金山文档
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/fengzi1103771698/article/details/129226258
版权

  1. 首先我们通过链接和图片来看看效果

演示Demo链接地址：https://n3gis.github.io/exportToThree(3.0).html?scene=Demo_4

  1. 使用到的软件（软件大家到Unity商城上搜索，Unity商城地址：https://assetstore.unity.com）

  1. Unity3D

  1. 3DTiles（Unity3D插件，用于加载OSGB格式的倾斜摄影数据）

  1. Export To Three.js（Unity3D插件，将Unity3D的三维场景导出到Three.js中来渲染）

  1. 首先我们使用3DTiles插件将OSGB数据转换成3DTiles格式，在Unity3D软件菜单中，选择Window/3DTiles/ConvertTo3DTiles

在弹出的窗口中，选择OSGB文件目录及转换后保持的文件目录，注意文件目录不要有中文路径

点击Convet按钮后，等待模型的转换完成，模型转换完成后，使用Single Tileset Load脚本在Unity编辑器中加载倾斜摄影模型，如下图所示

  1. 接下来我们使用Export To Three.js（3.0）来导出倾斜摄影模型，在Unity3d菜单中，选择File/Export/Export To Three.js

在弹出的窗口中，我们选择如下配置，其它配置项使用默认值来导出倾斜摄影模型

选择需要导出的相机及倾斜摄影模型，点击Export即可，导出后，可以在Setting中查看导出的文件目录，使用Export To Three.js（3.0）插件默认的js案例工程即可加载倾斜摄影数据；

如下是使用Three.js加载的倾斜摄影效果

ok，本节就讲到这里了，如果文章有看不懂的，可以观看如下视频教程

https://youtu.be/mTd1B5soc20

虚拟现实（微尘）
关注
  • 3
    点赞
  • 踩
  • 17
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
ThreeJS-加载3dtiles数据
一路走一路学，总会不落后
02-02 2860
使用方法参考 https://loaders.gl/examples/3d-tiles。目前加载3dtiles数据的方式有三种，均是借助第三方插件的方式。
Three.js-webgl物联网粮仓3D可视化
03-12
项目案例使用threejs+vue+js实现粮仓三维可视化管理，加载粮仓3d场景，实现粮仓信息查询，标注，粮仓剖切，天气模拟功能，免安装即可运行，代码结构清晰，根据需求下载
探索三维空间：使用Three-loader-3dtiles实现3D数据可视化
最新发布
gitblog_00098的博客
05-24 441
探索三维空间：使用Three-loader-3dtiles实现3D数据可视化 项目地址:https://gitcode.com/nytimes/three-loader-3dtiles 在数字时代，3D数据的呈现和交互已经成为讲述复杂故事的重要方式。Three-loader-3dtiles 是一个专为Three.js设计的高效加载器，它允许您无缝地处理OGC 3D Tiles标准的数据，使您能够创...
3DTilesRendererJS:使用three.js的Java 3D Tiles渲染器
03-08
3D瓷砖渲染器 Three.js渲染器实现。 渲染器支持大多数3D Tiles规范功能，但有一些例外。 有关尚未实现哪些功能的信息，请参见期。 如果图块集或几何图形无法正确加载或渲染，请提出问题！ 添加和测试功能需要示例数据。 例子 ！ ！ ！ ！ ！ 使用 安装 npm install 3d-tiles-renderer --save 基本TilesRenderer 设置基本应用程序的3D拼贴集。 import { TilesRenderer } from '3d-tiles-renderer' ; // ... initialize three scene ... const tilesRenderer = new TilesRenderer ( './path/to/tileset.json' ) ; tilesRenderer . setCamera ( came
【 攻城略地 】vue3 + vite + ts加载3dTiles
qq_34417216的博客
02-24 2373
本文适用于从未接触过3d开发的新手，寻找解决方案的部分比较详细，文章最下方有相关包的配置文件，可跳过该部分直接使用。 安装vite vite为前端构建工具，我们使用vite来搭建项目基础结构。 文档： 开始 {#getting-started} | Vite中文网 安装： # 使用 NPM $ npm init vite@latest # 使用 Yarn $ yarn create vite # 使用 PNPM $ pnpm create vite 使用vit...
threejs加载3dtiles（倾斜摄影）数据
热门推荐
weixin_39481659的博客
11-11 1万+
1、安装3dTilesRenderer 插件 使用npm 安装 npm install 3d-tiles-renderer --save 或者去官网下载都行 GitHub - NASA-AMMOS/3DTilesRendererJS: Renderer for 3D Tiles in Javascript using three.js 2、使用 首先引入，在填入3dtiles数据的地址，可以是文件路径也可以是网站路径 const tilesRenderer = new TilesRend..
Threejs加载倾斜摄影OSGB数据
左本Web3D
07-12 2516
Threejs加载倾斜摄影OSGB数据，无人机航拍倾斜摄影osgb模型数据转3DTiles格式。Threejs加载3DTiles格式数据。
threeJS加载3Dtitles数据
qihuanlong的博客
07-26 3017
加载.gltf文件从网上查找资料，比较容易。但是项目使用的不是该类型的数据，是制作的 3Dtitles，折腾了几天，找到的资料比较少，比对着其他方法加载出了数据。
Threejs模型切片转3DTiles加载
左本Web3D
07-12 3556
Threejs大模型加载，obj模型、fbx模型、ifc模型切片加载。Threejs加载3DTiles格式文件
three.js-dev-examples-models.zip
08-26
这些加载器通常与Ajax请求结合，将模型数据从服务器获取并解析为Three.js可识别的对象。 三、场景构建 1. 场景构建：创建一个Three.js应用，首先需要初始化一个Scene对象，然后添加相机、光源和模型到场景中。 2....
three.js+photo-sphere-viewer.js 全景图场景切换
02-07
其次，`photo-sphere-viewer.js`是一个专门用于全景图展示的JavaScript库，它基于three.js构建，简化了全景图的加载和操作。此库提供了丰富的配置选项和事件处理，例如加载不同分辨率的全景图、添加控制按钮、调整...
three.js 可视化大屏 3D场馆模型Demo
02-26
在这个项目中，Vue3被用来管理组件状态和页面交互，与three.js结合，实现3D模型的交互和控制。 `Vite`是Vue.js作者尤雨溪开发的新型构建工具，它使用了模块热替换（HMR）和ES模块原生导入，大大加快了开发时的构建...
3dmax导出glb格式_倾斜摄影三维模型几种常见的格式，你能说出哪些？
weixin_39643244的博客
11-02 3656
本文首发于公众号Wish3D，原文链接：倾斜摄影三维模型几种常见的格式，你能说出哪些？无人机航拍的影像经过建模软件处理产出之时，有很多成果的数据需要我们去选择输出，对于新手而言，如何选择数据格式呢？他们之间有什么区别？分别是应用在哪些个领域？今天，小编就分别以OSGB，OBJ，FBX，STL等格式作说明介绍，另外人工模型以3DS为例，让大家知道这些格式都是什么来头，都有哪些优缺点，都是应用在哪些行...
webGL开发：3D建模篇-倾斜摄影，大场景快速建模
贝格前端工场的博客
02-26 1114
大家好，我是贝格前端工场，专注于前端开发和UI设计，有需求可以私信。本文分享webGL开的基础工作之一：3D建模，用到了倾斜摄影技术，这是大场景建模的利器，尤其是针对某一地区和园区的建模，快速高效。
BIM文件转FBX和3DTiles，并且应用Threejs和Cesium做展示
weixin_43081649的博客
01-16 3339
BIM文件FBX和3DTiles转换流程
小菜鸡的Three.js学习笔记（二）-加载各种格式三维模型
weixin_40097032的博客
05-28 2967
three.js其实就是一个别人做好的js脚本，可以去官网下载https://threejs.org/下载完是这样的： 其实加载模型特别特别简单，example里面有好多例子 这些load全是例子，有obj也有gltf格式的，但是别直接点开，你会发现是黑的，没有模型，因为是不能访问你本机的资源，你得发布到服务器上访问，简单来说就是你的下载一个开发平台，我这利用的是vs2010，利用as...
Three.js开发神器-开篇
fengzi1103771698的专栏
02-11 1867
Three.js开发神器介绍，提高WebGL产品
three.js+photo-sphere-viewer.js做个图片全景预览
05-24
好的，下面是基本的步骤： 1. 首先你需要准备一张全景图片。可以在网上搜索一些免费的全景图片，或者使用自己拍摄的。 2. 接下来，你需要引入 three.js 和 photo-sphere-viewer.js 两个库文件。可以从官网下载，也可以使用 CDN 引入。 3. 创建一个 HTML 容器，用于放置全景图片。 ``` <div id="container"></div> ``` 4. 在 JavaScript 中创建一个 PhotoSphereViewer 实例，并将其绑定到容器中。 ``` var viewer = new PhotoSphereViewer({ container: 'container', panorama: 'path/to/panorama.jpg' }); ``` 其中，`container` 是容器的 ID，`panorama` 是全景图片的路径。 5. 可以通过配置一些选项来自定义全景视图，例如： ``` var viewer = new PhotoSphereViewer({ container: 'container', panorama: 'path/to/panorama.jpg', time_anim: false, // 禁用动画 navbar: false, // 隐藏导航栏 default_fov: 70, // 设置默认视角 mousewheel: false // 禁用鼠标滚轮缩放 }); ``` 6. 最后，你可以添加一些交互事件，例如： ``` viewer.on('click', function(event) { console.log('Clicked on x=' + event.longitude + ', y=' + event.latitude); }); ``` 这里，我们添加了一个 click 事件监听器，在用户点击全景图片时输出经纬度坐标。 以上就是使用 three.js 和 photo-sphere-viewer.js 创建图片全景预览的基本步骤。你可以根据自己的需求进行进一步的定制和优化。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值