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

转载于:https://www.cnblogs.com/cly84920/p/4426441.html