总序
相机:决定哪些东西将要在屏幕上渲染
光源:决定对材质会如何显示和生成阴影的使用
物体: 相机中被渲染的对象
Scene场景的几个方法
- Scene.add(object);//往场景中添加物体
- Scene.remove(object);//场景中去除物体
- Scene.children;//Scene的子对象列表;数组吧,包括相机和光源
- Scene.getChildByName()//通过物体的name属性访问该物体
在var cude=…时候可以设定cude.name为“方块1”
- 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),这样是保证动画的持续运行,在代码中调用这个函数来启动动画。
阴影
制造产生阴影的几个步骤,让球体和方块将阴影投影到地上,哪些物体投射阴影,哪些物体接受阴影
- render.shadowMapEnabled=true;//告诉render我们需要阴影(允许阴影隐射)
- plane.receiveShadow=true;//地面接受阴影
- cude.castShadow=true;//cast投射,就是方块投射阴影
- spotLight.castShadow=true;不是所有的光源都可以投射阴影 ,这里使用聚点光源可以产生阴影
时间: 2024-11-05 02:25:32