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);
物体留到下节说
