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里负外正。