位置: 编程技术 - 正文

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)

  • 财税新闻稿
  • 减免税款会计分录
  • 不含税销售额计算公式理解
  • 天然气税率13%变11%
  • 自来水适用的税率是多少
  • 月初领票后还能作废申报吗
  • 软件销售利润
  • 销售人员出差补助计入什么科目
  • 电子发票和纸质发票额度算在一起吗
  • 基本户收到零余额转款怎么做分录
  • 建筑业异地预交税款怎么入库
  • 房地产企业内部查账查什么
  • 公司拍摄费计入什么科目
  • 忘了报税算偷税漏税吗
  • 购买办公家具合同
  • 机打发票多久可以作废
  • 进货会计凭证
  • 未达起征点可以开增值税专票吗
  • 上个月开的发票这个月还能用吗
  • 汽车租凭发票税率
  • 政府给企业的钱叫什么
  • 坏账收回的会计处理方法
  • 监控 固定资产
  • 筹建期间内发生的开办费属于什么费用
  • 公司设计费属于什么费用
  • 华为mate50pro怎么读
  • win11打开软件出现????????
  • 差旅费津贴个人所得税题目
  • 公司的对公账户
  • 个人所得税的减数为2000元,实行日期为
  • 公司注销职工怎么办理
  • 债券溢价或折价是公司发行债券时产生的收益或损失
  • 宝塔面板安装zabbix
  • yii2项目实战之restful api授权验证详解
  • php ajax 教程
  • 在筹建期间发生的开办费
  • 网络安全网页设计作品构思
  • mksysb命令
  • 计提医疗保险费的会计分录
  • 处置长期股权投资产生的投资收益是什么
  • 国税退税要多久能到账
  • 长期股权投资的账面价值怎么计算
  • 公司的账面现金怎么算
  • 公司全部股权转让流程
  • 营业收入与利润总额的比值
  • 免税所得包括哪些
  • 建筑企业属于什么类型
  • 个人账户用于公司发工资
  • 居民和非居民企业的区别是什么
  • 流动资产属于经营资产还是得经营资产
  • 科技项目扶持资金
  • 补交以前年度增值税如何入账
  • 增值税发票当月能红冲吗
  • 购买的银行理财产品能提前赎回吗
  • 委托销售产品如何做账
  • 递延收益影响当期所得税吗为什么
  • 电子承兑到期怎么申请付款
  • 外贸企业有内销和外销是否分开做账
  • 总账会计的岗位目的
  • 公司固定资产有很多种类,怎样计提折旧
  • sqlserver
  • SQL Server 2016 CTP2.3 的关键特性总结
  • mysql 常用
  • mysql如何导出数据
  • windows8怎么用
  • daio.dll 病毒
  • win8开始菜单没有了
  • 硬盘逻辑锁源码
  • cmd echo不换行
  • bat批处理命令大全
  • 内存优化有哪些方法
  • Android属性动画缩放
  • 表单中的单选框
  • 出租车票真伪查询官网
  • 税控盘反写后才能开票吗
  • 县级税务
  • 契税含不含精装修
  • 长春市税务局领导
  • 青岛市地方税务局关于发票
  • 2021年福利彩票47期
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设