位置: 编程技术 - 正文

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)

  • 盈余公积转增资本会影响所有者权益吗
  • 出口企业税负率计算公式
  • 应收往来会计是做什么工作的
  • 当月的费用次月入账可以么
  • 租赁房屋房产税
  • 企业取得政府财政资金,收入时间如何确认?
  • 利润的计算方法数学
  • 增值税留抵还需要交税吗
  • 国有企业出租房屋管理规定
  • 借款合同 增值税
  • 小规模季度超过30万是全额纳税吗
  • 招待费多少
  • 自收自支事业单位
  • 出口货物过了退税怎么办
  • 经营租赁交什么税种
  • 季报中现金流量表报的是当季的还是本年累计数
  • 没有收入能结转损益吗
  • 6%技术服务费是普票还是专票
  • 收到代收款怎么做分录
  • 购入固定资产预算会计怎么做账务处理
  • 电脑CPU性能天梯
  • 境外人员定义
  • PHP:realpath_cache_size()的用法_Filesystem函数
  • 物业公司成本费用
  • php json格式化
  • eclipse php wamp配置教程
  • iis部署javaweb
  • opencv的函数
  • vue 动态组件
  • php从服务器下载文件
  • spring boot怎么学
  • 电话订票起售时间
  • 业务招待费包括哪些内容和费用
  • 所得税申报怎么弥补以前年度亏损
  • 办公用品和低值易耗品节省成本吗
  • 小规模自开专票办理流程
  • js 数组remove
  • 2022年最新苹果平板电脑
  • 股权激励税务处理方案
  • 房地产公司测绘费怎么做会计分录
  • 餐饮无票收入怎么做账
  • 受疫情影响较大的上市公司有哪些
  • 建安行业外地预审要多久
  • 房地产企业取得政府补助
  • 在建工程发生的运费计入什么科目
  • 建筑业有收入没有成本
  • 法人银行贷款
  • 怎样计算税款
  • 无形资产的相关税费
  • 非盈利社会团体可以开发票吗
  • 红字发票的开具需要把开始的发票取回作废吗?
  • 科目汇总表账务处理程序登记总账的依据是
  • 对公账户给私人账户转账,几天到账
  • 多余备用金记账会计分录
  • 这么查看
  • mysql could not be resolved: Name or service not known
  • mysql 5.7.11 winx64安装配置教程
  • sqlyog语句
  • mysql理论知识
  • window怎么样
  • win10怎么用ghost
  • win8自带的视频播放器打不开
  • 如何在windows沙盒中导入文件
  • xp系统桌面图标大小怎么调整
  • 关于linux操作系统的描述中
  • linux命令存放在哪里
  • 华为nova7耳机怎么戴
  • win8开始页面
  • win8系统启动不了如何修复
  • ext.formpanel
  • android开发环境的搭建实验总结
  • perl-v
  • nginx优雅退出
  • 批处理执行bat文件
  • u3d unity3d
  • 在html中写入javascript
  • 国家税务处处长
  • 一般纳税人开劳务费税率是多少2023
  • 江苏省2023年1号文
  • 长沙税务查询电话
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设