three.js 第二篇:场景 相机 渲染器 物体之间的关系

w我用画画来形容他们之间的关系

场景就是纸张

相机就是我们的眼睛

物体就是在我们脑海中构思的那个画面

渲染器就是绘画这个动作

场景(Scene):

　　初始化：var scene = new THREE.Scene();

　　添加物体：scene.add( 物体对象 );

　　删除物体：scene.remove( 物体对象 );

　　获取场景中所有子对象的列表：scene.children()

　　利用name属性，获取场景中某个特定的物体：scene.getChildByName()

　　简单雾化：scene.fog = new THREE.Fog(0xffffff,100,120);//颜色 雾化开始的时候距离相机的位置,完全雾化距离相机的位置

　　直属雾化：scene.fog = new THREE.FogExp2(0xffffff,0.02);//颜色,雾的浓度

相机(只介绍透视投影):

　　初始化：

　　　　var camera = THREE.PerspectiveCamera(fov, aspect, near, far);

　　　　　　//fov就是我们眼睛可以看多大范围的物体,苍蝇眼睛可以看到后面,对于苍蝇来说fov基本上就是360了，我们人类差不多是120

　　　　　　//aspect 照相机水平方向和竖直方向长度

　　　　　　//near far：我是近视,基本上50米开外我就什么也看不到了(就是看不到,不是看不清),我是远视,1米之内 我也看不到(不是看不清,是看不到 纯黑的那种),所以我的可视范围是1米到50米，把1和50设置为near far,就相当于这个功能

　　设置相机位置:

　　　　camera.position.z = 5;camera.position.x = 5;camera.position.y = 5;

　　　　　　//我们可以把摄像机摆放在任何位置 理论上

　　设置相机的拍摄方向:

　　　　camera.lookAt(new THREE.Vector3(0, 0, 0));

　　　　　　//我可以向左前方看,可以向右前方看,我们看的方向是一条直线,更确切的说是一个向量,所以lookAt的参数是一个向量

　　设置相机的顶部朝向:

　　　　camera.up.x = 0;
　　　　camera.up.y = 0;
　　　　camera.up.z = 1;

　　　　　　//我们平常用手机拍照的时候,如果你把手机倒过来排,也就是让手机的头部向下来拍照,我们就说你设置了手机相机的顶部朝向为向下,理论上我们可以设置任意一个方向为手机相机的顶部所指向的方向

渲染器:

　　three.js提供很多中渲染器：CanvasRenderer，DOMRenderer，SVGRenderer，WebGLRenderer，WebGLRenderTarget，WebGLRenderTargetCube，WebGLShaders

　　　　//CanvasRenderer以canva方式渲染,

　　　　//SVGRenderer以svg方式渲染,

　　　　//WebGLRenderer则是以webGL方式渲染,（三种方式的区别相当于,我们可以用canvas实现绘图,也可以用svg实现绘图,您说 canvas绘图与svg绘图之间的区别是什么？）

　　　　//WebGLRenderTarget是特有的表示渲染到其他物体上 而不是屏幕上

　　WebGLRenderTarget的具体用途:

　　　　renderer.render(bufferScene, camera, bufferTexture);//把bufferTexture以camera的视角渲染到bufferScene上，因为我们没有渲染到屏幕上，所以我们什么也看不到,那我们如何用他呢,

　　　　var boxMaterial = new THREE.MeshBasicMaterial({map:bufferTexture});//我们可以把bufferTexture当作一个纹理然后覆盖在A物体上,当A物体被放到屏幕上,我们自然可以看到bufferTexture(可以看我写的例子:https://pan.baidu.com/s/1o7LiEbo)

　　　　WebGLRenderTargetCube：？？？我目前也不清楚

　　　　WebGLShaders：？？？我目前也不清楚

　　WebGLRenderer初始化参数:　

　　　　antialias:true, //是否开启反锯齿 --true/false
　　　　precision:"highp", //着色精度选择 --highp/mediump/lowp
　　　　alpha:true, //是否可以设置背景色透明 --true/false
　　　　premultipliedAlpha:false, //http://blog.csdn.net/mydreamremindme/article/details/50817294
　　　　stencil:false, //http://blog.csdn.net/a923164250/article/details/40393905
　　　　preserveDrawingBuffer:true, //是否保存绘图缓冲 --若设为true，则可以提取canvas绘图的缓冲
　　　　maxLights:1 //maxLights:最大灯光数--num

　　设置渲染大小：renderer.setSize(width,height)

　　追加生成的canvas元素到容器元素中：document.body.appendChild( renderer.domElement );

　　设置canvas背景色(clearColor)和背景色透明度（clearAlpha）：renderer.setClearColor(clearColor,clearAlpha);

　　物体留到下节说