注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

阿当的博客

世界是个游乐场

 
 
 

日志

 
 

threejs学习笔记(1)  

2013-09-26 19:05:00|  分类: js,html5,webgl,t |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

threejs学习笔记(1) - 阿当 - 阿当的博客


demo地址:http://www.adanghome.com/js_demo/31/

需要支持webgl的浏览器,比如pc上的chrome。


先吐个槽,threejs的学习资料真心少,官方的文档和教程几乎可以忽略不计。。。


好了,笔记开始。


1)threejs的基本思路是,有一个render,通常选用THREE.WebGLRenderer类,有一个camera,通常选用THREE.PerspectiveCamera类,然后有一个scene(我怀疑应该可以多有个scene,并可以在scene之间切换来着,只是现在看到的示例全都只实例化了一个scene),然后scene可以添加多个mesh。render类似于as的stage,mesh类似于sprite。mesh在实例化时,需要传入两个参数,一个是形状,一个是材质。形状保存着顶点信息,材质保存着如何反光等信息。另外,还有一个光源对象,点光源,平行光源什么的。最后还有一个mamera对象,设置视线、近截面远截面信息什么的。mesh、light和camera都可以被添加到scene上。在主循环里,不停渲染renderer.render(scene,camera);


2)camera有OrthographicCamera和PerspectiveCamera两种,后者使用更频繁。两者接受的参数不同,OrthographicCamera相关的资料少,还没试过。PerspectiveCamera接收四个参数,第一个是视角,从下往上,视角的角度是多少。角度越大,mesh显示得越小。第二个参数没看懂,资料上都说这里应该填舞台的长宽比。第三个是近截面,第四个是远截面。


3)mesh的形状参数可以完全自定义,也可以使用threejs的预设值,立方体、球体什么的(CubeGeometry,SphereGeometry).


4)材质有个参数wireframe,设为true,可以让形状只显示成“线框图”。


5)x左负右正,y下负上正,z里负外正。

  评论这张
 
阅读(3)| 评论(4)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017