位置: 编程技术 - 正文

THREE.JS入门教程(6)创建自己的全景图实现步骤(threejs入门教程)

编辑:rootadmin
译序 Three.js是一个伟大的开源WebGL库,WebGL允许JavaScript操作GPU,在浏览器端实现真正意义的3D。但是目前这项技术还处在发展阶段,资料极为匮乏,爱好者学习基本要通过Demo源码和Three.js本身的源码来学习。 0.简介 全景图非常酷。使用Three.js做一个属于自己的全景图并不是那么困难。 要做一个全景图,你需要一个软件用来做一张全景图片(译者注:如果你没有那些特殊的设备)。我使用了iPhone上的Microsoft Photosynth软件来制作。 1.环境纹理 首先什么是环境纹理?在WebGL或者OpenGL中他们实际上是种特殊的立方体纹理。一个立方体纹理是对整个场景(虚拟的或现实的)的观察,场景的样子被“贴”在了立方体的内部表面。想象一下,你站在山顶,向前看,向左看,向右看,向上看,向下看,最后向后看。每一次你都看到了这个“立方体”的内部表面,你就站在这个立方体的中心。如果这个立方体足够大,就很难分辨出立方体的棱和角,而给你一种错觉:你处在一个很大的环境里面。如果你还没弄明白,那么维基百科上的cube maps条目会非常有帮助。 这很酷,但是这怎么用?我们可以像做反射和折射一样,而且事实上这两者的函数都已经内建在GLSL,WebGL的着色器语言上了。你只需要传递给着色器6张纹理图片,每张代表立方体的一个内表面,然后告诉WebGL这是个立方体纹理,然后就可以使用上面的效果了。 半轴:这个术语服务于立方体纹理。因为我们通常使用三个轴来描述三维空间:x轴、y轴、z轴,所以用于立方体纹理的图片也用轴的名称来标识了。一共六张图片,每个轴两张图片,正半轴一个,负半轴一个。 2.创建全景图片 创建全景图片的第一步就是走出户外,使用手机上的应用来照一张。我在伦敦的金融区转了一圈,然后在Gherkin照了一张。我获得了下面这张图片: 值得指出的是,这个应用将图片做成了贴到球体上的那种。这看上去不错,但是我们现在需要将它贴到一个立方体的内表面上,所以还要处理一下这张图。 3.转化到立方体上 这部分我简短介绍一下。我把刚才获得的那张照片载入到一个3D建模软件中,比如Maya或者Blender,然后将其粘贴到一个球体的内表面上。然后我创建了6个正射投影的相机,每一个都对应于一个半轴。最后我将这6个相机捕捉到的图像保存了下来。具体怎么完成比较复杂,也没必要在这里讲解,所以我写了一个Blender脚本文件,所有的一切都设置好了。 使用这个脚本文件你只需要: 1.将你自己的全景图重命名为 environment.jpg; 2.将全景图和Blender脚本文件放在同一个文件夹下; 3.载入脚本文件; 4.点击右侧的 Animation 按钮; 5.等一会儿,6张图像已经创建好了。 很Cool吧?现在你可以重新命名这些图像,使之与每一个半轴相匹配。比如这样: &#;.png → pos-z.png &#;.png → neg-x.png &#;.png → neg-z.png &#;.png → pos-x.png &#;.png → neg-y.png &#;.png → pos-y.png 4.加入场景 现在我们已经获得了环境纹理,然后将其载入到场景中。Three.js使这变得非常简单: 现在只需要将cubemap指定到一个材质中去就可以了! 5.小结 就这样了,实现一个全景图很酷,尤其是你可以将你自己的地方制作为WebGL全景图。和往常一样,我打包了这次教程的源码

推荐整理分享THREE.JS入门教程(6)创建自己的全景图实现步骤(threejs入门教程),希望有所帮助,仅作参考,欢迎阅读内容。

THREE.JS入门教程(6)创建自己的全景图实现步骤(threejs入门教程)

文章相关热门搜索词:three.js bim,three.js入门教程(合集),three.js stl,three.js入门教程(合集),three.js入门教程(合集),three.js中文教程,threejs入门教程,three.js 教程,内容如对您有帮助,希望把文章链接给更多的朋友!

js中parseFloat(参数1,参数2)定义和用法及注意事项 今天在看jquery的时候里面用到了parseFloat(第一个参数,),一直不懂第二个参数是什么意思,于是上网查了一下,怕以后忘记就记下来。定义和用法:par

JavaScript起点(严格模式深度了解) 严格模式(StrictMode)是ECMAScript5新增的功能。ECMAScript5虽然可以向后兼容ECMAScript3,但如果使用严格模式,哪些ECMAScript5不在建议使用的ECMAScript3语法功能将

document.all的一个比较完整的总结及案例 一.document.all是页面内所有元素的一个集合。例如:document.all(0)表示页面内第一个元素二.document.all可以判断浏览器是否是IEif(document.all){alert("isIE!");}三.

标签: threejs入门教程

本文链接地址:https://www.jiuchutong.com/biancheng/379145.html 转载请保留说明!

上一篇:js鼠标点击事件在各个浏览器中的写法及Event对象属性介绍(js鼠标点击事件监听)

下一篇:js中parseFloat(参数1,参数2)定义和用法及注意事项(js parseint parsefloat)

  • 法人是残疾人有什么优惠政策
  • 一年内到期的非流动负债是经营性负债吗
  • 劳务公司收到劳务费怎么做账
  • 国外进口原材料会计处理
  • 账户认证操作
  • 车船税每年都要交吗标准多少
  • 佣金的发票
  • 增值税专用发票抵扣税额是什么意思
  • 防雨棚设计规范
  • 资产负债表中流动性从高向低
  • 商品流通企业成本核算的内容包括
  • 合伙企业是否需要缴纳增值税
  • 建筑企业预缴印花税会计分录
  • 车间员工的质量管理制度
  • 一般纳税人地税怎么收费
  • 开具的销项发票是否都要入收入科目吗?
  • 行政事业单位如何加强财务管理
  • 集团内部企业之间借款利息增值税
  • 固定资产清理需要结转吗
  • 建账时的库存怎么做账
  • 苹果电脑mac系统怎么用
  • 个体户和有限公司哪个税收低
  • 专业版 win10
  • win10如何关闭windows安全中心图标
  • mac电脑色彩设置
  • quicklylook
  • 大模型训练成本
  • 收到违约金赔款计入什么科目
  • 捐赠与赞助
  • 销售合同怎么计提折旧
  • linux bsub
  • 固定资产全额折旧
  • 一般纳税人辅导期最新规定
  • 内斯塔特点
  • 如何使用wireshark抓取HTTP数据包?
  • 小规模纳税人每月申报什么税
  • vue中的provide/inject
  • 【角色扮演】
  • vue-router + element-plus实现面包屑导航栏和路由标签栏
  • 比肩美国
  • 预收账款的账务处理摘要
  • mongodb数据删除
  • 会计学中的折旧是什么意思
  • mysql跨库join
  • 企业出售自用房产增值税
  • 小规模纳税人开专票税率是1%还是3%
  • 委托加工以受托方核定的数量为计税依据
  • 商业会计怎么算主营业务成本
  • 银行存款利息应计入
  • 福利费的概念是指
  • 短期借款明细账采用什么格式
  • 备用金的支取流程图
  • 计提工资发工资可做成一笔账吗
  • 会计账簿的作用主要包括
  • sql导入和导出数据
  • MySQL中KEY、PRIMARY KEY、UNIQUE KEY、INDEX 的区别
  • 因windowssystem32
  • win10预览版绿屏重启解决
  • windowsserver2008r2密码重置
  • win7更改电脑设置在哪里
  • 华硕fx80g装系统
  • xp输入法图标不显示图片
  • icore是什么意思
  • win7笔记本电脑
  • 轨迹球怎么调出来
  • 使用jquery
  • jquery showdialog
  • python中生成随机小数的函数
  • android监听应用打开
  • js获取弹窗的元素
  • jquery warp
  • python 描述符类
  • scroll-view组件用于实现
  • 税务行政部门有哪些
  • 小规模纳税人房土两税优惠政策
  • 云票助手使用步数怎么改
  • 云南税务总局官网
  • 自建房交契税需要什么
  • 消费税和增值税的异同点
  • 各种税务申报时间
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设