Threejs场景中的基本组件

总序

相机：决定哪些东西将要在屏幕上渲染
光源：决定对材质会如何显示和生成阴影的使用
物体: 相机中被渲染的对象

Scene场景的几个方法

1. Scene.add(object);//往场景中添加物体
2. Scene.remove(object);//场景中去除物体
3. Scene.children;//Scene的子对象列表；数组吧,包括相机和光源
4. Scene.getChildByName()//通过物体的name属性访问该物体
   在var cude=…时候可以设定cude.name为“方块1”
5. Scene.traverse(function);//函数参数对每个子对象都调用一次函数

Scene.traverse(function(e){
    //将一个函数作为参数传进来，对Scene的每个子对象都调用一次
    if(e instanceof THREE.Mesh && e!=plane){
        ...如果e是网格对象且不是地面,则做旋转处理等
    }
}) //可以用for循环children达到同样的效果

注： 场景渲染的时候THREE.Camera会被自动添加进来，如果喜欢也可以手动添加
scene.add(camera);

场景的两个属性 fog(雾化)和overrideMaterial(材质覆盖)

Fog

scene.fog=new THREE.Fog(0xffffff,0.015,100)

参数：白色雾化效果，近处属性值，远处属性值，雾化开始和结束的地方，以及加深的程度

Another Way Fog:

scene.fog= new THREE.FogExp2(0xffffff,0.015)//后一个参数为浓度

材质覆盖

用来设置所有物体的材质>意思是所有添加到场景中的物体都使用一样的材质

scene.overrideMaterial= new THREE.MeshLambertMaterial({color:0xffffff});//所有的都是白色的

网格对象的函数和属性

• position:决定该对象相对其父对象的位置,一般父对象为THREE.Scene
• rotation:rotation.x|y|z 绕着某一个轴旋转一定的角度
• scale:比例，可以沿着xyz轴缩放对象
• translateX|Y|Z(amount)//将对象平移amount位置

Material材质

MeshLambertMaterial 和MeshPhongMaterial 这两种材质会对光源产生反应

• MeshLambertMaterial :可以用来创建颜色暗淡不光亮的物体
• MeshPhongMaterial :可以用来创建光亮的物体 如金属

Camera相机

正投影相机和透视相机

• 透视投影 距离相机越远的物体被渲染得越小

• 正投影 同一物体渲染的大小一样，对象和相机的距离不会影响渲染结果,可以达到模拟城市的效果

  ===>更多使用透视相机，更贴近真实世界
  相机的点聚焦 一般指向camera.lookAt(new THREE.Vector3(x,y,z)) // 0 0 0

window.requestAnimationFrame

window.requestAnimationFrame(callback)使用一个回调函数作为参数，主要用途是按帧对网页进行重绘.不过有一点需要注意，requestAnimationFrame是在主线程上完成。这意味着，如果主线程非常繁忙，requestAnimationFrame的动画效果会大打折扣。并不是所有的浏览器都支持requestAnimationFrameAPI 最好的方法是模拟这个方法如下

 window.requestAnimFrame = (function(){
      return  window.requestAnimationFrame       || 
              window.webkitRequestAnimationFrame || 
              window.mozRequestAnimationFrame    || 
              window.oRequestAnimationFrame      || 
              window.msRequestAnimationFrame     || 
              function( callback ){
                window.setTimeout(callback, 1000 / 60);
              };
    })();

 function renderScene(){
        requestAnimationFrame(renderScene);
        renderer.render(scene,camera);
    }

在renderScene中又调用了一次requestAnimationFrame(renderScene)，这样是保证动画的持续运行,在代码中调用这个函数来启动动画。

阴影

制造产生阴影的几个步骤,让球体和方块将阴影投影到地上，哪些物体投射阴影，哪些物体接受阴影

1. render.shadowMapEnabled=true;//告诉render我们需要阴影(允许阴影隐射)
2. plane.receiveShadow=true;//地面接受阴影
3. cude.castShadow=true;//cast投射，就是方块投射阴影
4. spotLight.castShadow=true;不是所有的光源都可以投射阴影 ,这里使用聚点光源可以产生阴影