THREE实战2_正交投影相机与透视相机
【摘要】 正交投影相机特点:看见物体的远近高低比例都是相同就像maya中的三视图。看一下鄙人以前做的一个简单模型伞。侧视图俯视图正交投影构造函数OrthographicCameraOrthographicCamera( left, right, top, bottom, near, far );参数含义left左平面距离相机中心的垂直距离right右平面距离相机中心的垂直距离top顶平面距离相机中心...
正交投影相机
特点:看见物体的远近高低比例都是相同
就像maya中的三视图。
看一下鄙人以前做的一个简单模型伞。
侧视图
俯视图
正交投影构造函数OrthographicCamera
OrthographicCamera( left, right, top, bottom, near, far );
参数 | 含义 |
---|---|
left | 左平面距离相机中心的垂直距离 |
right | 右平面距离相机中心的垂直距离 |
top | 顶平面距离相机中心的垂直距离 |
bottom | 低平面距离相机中心的垂直位置 |
near | 近平面距离相机中心的垂直位置 |
far | 远平面距离相机中心的垂直距离 |
maya的顶视图相机,相机中心就是它的焦点位置。
透视相机
- 透视图
透视相机就像我们的人眼
透视投影相机的构造函数PerspectiveCamera
PerspectiveCamera(fov,aspect,near,far);
参数 | 含义 |
---|---|
fov | 视角 |
aspect | 纵横比 |
near | 近平面 |
far | 原平面 |
maya的透视相机
THREE实战
前期的工作重构代码:
<script>
//场景的物体
var cube=null,mesh=null,scene=null;
function initObject() {
var geometry = new THREE.CubeGeometry(300,300,300,);//正方体
//白色反射所有光线,利于检测灯光
var material = new THREE.MeshLambertMaterial( { color:0xFFFFFF} );//白色
mesh = new THREE.Mesh( geometry,material);
mesh.position = new THREE.Vector3(0,0,0);
scene.add(mesh);
}
//灯光
function initLight() {
light_direction=new THREE.DirectionalLight(0x0000FF,1);//方向光蓝色
light_direction.position.set(10,20,6);
}
//函数入口
function threeStart() {
initThree();
initCamera();
initScene();
initLight();
initObject();
animation();
}
// 循环渲染
function animation()
{
renderer.render(scene, camera);
requestAnimationFrame(animation);//递归调用
}
</script>
<body onload="threeStart();">
<div id="canvas-frame"></div>
</body>
case1:正交投影相机的使用
相机中心视为原点,left与bottom为负值
//正交投影相机
function initCamera() {
var camera;
camera=new THREE.OrthographicCamera(-width/2,width/2,height/2,-height/2,1,1000);
camera.position.x = 0;
camera.position.y = 0;
camera.position.z = 700;
camera.up.x = 0;//相机朝向位置
camera.up.y = 1;
camera.up.z = 0;
camera.lookAt(new THREE.Vector3(0,0,0));
}
调整左侧距离left=-width时
case2:透视相机的使用
//透视相机45视角,屏幕纵横比,1-1000的距离区间
function initCamera() {
var camera;
camera = new THREE.PerspectiveCamera(45, width/height, 1, 1000);
camera.position.x = 0;
camera.position.y = 0;
camera.up.x = 0;//相机朝向位置
camera.up.y = 1;
camera.up.z = 0;
camera.lookAt(new THREE.Vector3(0,0,0));
}
调整视角120度,视角0-180度之间看到的物体会越来越小
【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱:
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论(0)