three.js(12)-透视投影相机
2021-11-23 本文已影响0人
姜治宇
透视投影相机PerspectiveCamera
透视投影相机比较常用，也肥肠容易理解。比如电影院的投影仪，当我们把手靠近时，就会在幕布上投下巨大的影子，而远离时则影子变小。
camera.png
PerspectiveCamera( fov, aspect, near, far )
param.png
参数基本上都是固定的，我们实际关心的是相机的摆放位置和朝向。
相机位置（position）
相机的位置如果不设定，默认是在原点(0,0,0)的位置。而物体如果不指定位置，默认也是创建在原点的。这样的话，相机就在物体的肚子里面了，这样是看不到物体的。
相机角度（lookAt）
相机放好了，然后就得保证镜头的朝向。如果你把镜头朝向物体的反方向，这样是拍摄不到物体的。
我们一般设定相机是朝向原点位置，这样可以保证看到物体。
pos.png
下面是一个相机由近及远的效果。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="http://www.yanhuangxueyuan.com/versions/threejsR92/build/three.js"></script>
<title>Document</title>
</head>
<body>
<div id="webgl"></div>
</body>
</html>
<script>
var scene = new THREE.Scene();
console.log(scene);
//几何体
var geometry = new THREE.BoxGeometry(100, 100, 100); //创建一个立方体几何对象Geometry
//材质
var material = new THREE.MeshBasicMaterial({
color: 0x00ffff
});
//合成对象
var mesh = new THREE.Mesh(geometry, material); //网格模型对象Mesh
scene.add(mesh); //网格模型添加到场景中
//创建相机对象
var camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 100, 600);
/**
* 创建渲染器函数
*/
var renderer = new THREE.WebGLRenderer();//画布
renderer.setSize(1000, 500);//设置渲染区域尺寸
renderer.setClearColor(0xb9d3ff, 1); //设置背景颜色
//将渲染好的canvas追加到dom
var cont = document.getElementById('webgl');
cont.appendChild(renderer.domElement);
render();
function render() {
let count = 0;
let time = setInterval(() => {
console.log(count);
if (count < 200) {
camera.position.set(count, count, count); //慢慢移动镜头
} else {
clearInterval(time);
}
camera.lookAt(new THREE.Vector3(0,0,0)); //设置相机朝向(指向原点位置)
renderer.render(scene, camera);//渲染必须有场景和相机两个对象
count+=10;
}, 1000);
}
</script>
camera.gif
通过图示看到，一开始是看不到物体的，因为相机在物体肚子里面，然后慢慢移动镜头跳出物体才看到物体。
