位置: 编程技术 - 正文

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)

  • 居间费用如何纳税
  • 增值税附加税包括哪些税种及税率
  • 银行销户余额取现怎么做分录
  • 广告公司如何开发快消客户
  • 财务会计制度名称一般是
  • 企业基本医疗保险和综合医疗保险
  • 代扣代缴个税返点怎么申请
  • 他人购买股权个人所得缴纳个人所得税率是多少?
  • 怎么处理善意取得的大头小尾发票?
  • 幼儿园收取生活费通知
  • 经营现金流动比率公式
  • 增值税税率和征收率有什么区别
  • 发票验证系统费用多少钱?
  • 小规模纳税人物流服务税率
  • 报增值税怎么取消校验
  • 购入需要安装的固定资产会计科目
  • 运输发票车种车号要求 自有车
  • linux 数字
  • 合并报表抵消分录实例
  • 累进税率的特点是课税对象的数额越大,税率越
  • 财政应返还额度年末有余额吗?
  • php中split
  • php unset()
  • 在建工程进项税额转出
  • 外销收入申报表怎么填
  • 即期结售汇期限包括
  • PHP:iconv_mime_decode()的用法_iconv函数
  • 以前年度损益调整属于哪类科目
  • 房产税的应纳税额计算方法
  • 加工费计入
  • Yii2中简单的场景使用介绍
  • 制造业预提短期利润
  • php sleep函数
  • 3d沙盒游戏推荐
  • 补开上年发票的税务处理要怎么做?
  • 科目余额表怎么填
  • 处置固定资产净收益属于利得吗
  • sql的应用
  • 内账中采购另付的税点算成本还是费用
  • 新会计准则折旧年限
  • 补缴以前年度的印花税会计分录
  • 所得税 补税
  • 企业返聘退休人员需要交社保吗
  • 无形资产多摊销怎么处理
  • 生日卡和过节卡一样吗
  • 销售商品发生的销售退回计入什么科目
  • 借款利息收入开发票
  • 营改增后可以抵扣的进项
  • 零申报是不是什么都不用填
  • 外贸公司收取国家税费吗
  • 本期盈余为负数怎么调整
  • 包工包料如何核算成本
  • 组织机构代码证和统一社会信用代码的关系
  • 公司招待费用会计分录
  • 记帐凭证的填制方法
  • 合同资产减值准备对应科目
  • 进口医疗器械产品
  • 深入分析换一种说法
  • 苹果电脑定制键盘
  • window照片无法预览
  • windows10预览版是什么
  • 制作winxp启动u盘和安装盘
  • centos下安装gcc
  • Ubuntu Server 13.10 安装配置图解教程
  • win10系统怎么关闭病毒防护
  • 安卓框架app
  • cocos2dx-js
  • Metaio SDK 6.0.2自带Example自己实现(三)
  • 用git打更新包的代码
  • kvm 安装
  • perl编程
  • 骨骼动画程序设计
  • linux启动过程流程图
  • bat批处理执行cmd命令
  • js的settimeout方法
  • android开发模式
  • javascript制作小程序
  • 浙江纳税百强2020
  • 廉政谈话什么是廉政?
  • 传统媒介和新媒介
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设