位置: 编程技术 - 正文

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)

  • 收入及增值税会计准则
  • 发票章是否需要到税务局备案
  • 关于资源税的问题
  • 印花税的征税范围具体有哪些
  • 网上申报办税
  • 企业股东分红怎么交税
  • 筹建期间发生的开办费计入什么科目
  • 新个税法申报的税种
  • 有限公司能变更为个体工商户
  • 临时增加增值税发票
  • 报销必须是公司吗
  • 预提利息收入纳税调整
  • 小规模纳税人核算方式选什么
  • 同一控制下企业合并报表编制
  • 记账凭证按其适用的交易和事项分类可以分为
  • 补充医疗保险应享尽享方案
  • 有限合伙企业注册资金要求
  • 会计学中管理费用属于什么
  • 开专票都需要什么资料
  • 兼营免税减税项目
  • 留抵退还增值税
  • 设计部工资计入哪个科目
  • 建安行业简易计税可以抵扣吗
  • 员工赔偿款需要交个税么
  • 工程施工购买的材料费会计分录
  • 个税退手续费要多久到账
  • 怎样解除机房
  • 净现值是否可行
  • 年度企业所得税申报表在哪里打印
  • 增值税专用发票上注明的价款含税吗
  • 公司收到预付款怎么用处去
  • php零基础入门教程
  • 孚日山脉猞猁
  • phpsubstr_replace
  • 月初红字冲回估价入账存货借贷
  • 西部大开发税收优惠政策是什么时候开始的?
  • 资产减值损失影响当期利润吗
  • 企业租赁房屋怎么开票
  • cp命令使用
  • Laravel 5.3 学习笔记之 配置
  • js原型函数
  • 勾选发票提交后如何
  • 退质保金计入什么科目
  • 购销合同印花税最新政策2023
  • 为什么增值税申报表保存不了
  • 中标违约保证金怎么算
  • 支付工程款的会计科目怎么写
  • 小微企业城建税及附加减免优惠
  • sql server触发器实例
  • sql server2014使用
  • 财务费用 科目
  • 建筑安装合同印花税率怎么算
  • 车船税怎么抵扣进项
  • 固定资产清理的借贷方向
  • 违约合同怎么解决
  • csv数据量太大怎么拆分
  • mysql中having什么意思
  • mysql查询id最大的记录
  • mysql压缩包安装教程5.7.32
  • navicat连接mysql时出现1045错误的解决方法
  • windows无法启动wlanautoconfig
  • 如何避免在游戏中切输入法
  • upgrade.exe - upgrade进程是什么意思
  • ubuntu系统安装教程
  • PureVoice.exe - PureVoice是什么进程 有什么用
  • cmd是什么意思 视频
  • 系统恢复 win10
  • linux yum安装apache
  • centos什么命令都说找不到
  • Windows 8.1 RT Update 3更新将于9月发布
  • JavaScript对象的创建
  • javascript声明变量的语句
  • uil的简单常用操作
  • 智能图片制作
  • wordpress开发文档
  • javascript框架的作用
  • 电子发票软件怎么打开
  • 购买服务合同模版
  • 西安国家税务局官网首页
  • 什么是审计的重要特征,也是审计的精髓
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设