常用的相機有:
-
PerspectiveCamera 透視相機
perspective意為透視、遠景,應用于較現(xiàn)實的場景,會遵循近大遠小
PerspectiveCamera( fov : Number, aspect : Number, near : Number, far : Number )
參數(shù):
fov — 垂直視野角度
aspect — 長寬比(一般為渲染器、畫布長寬比)
near — 近距離
far — 遠距離
-
OrthographicCamera正交相機
Orthographic意味正交、直角,應用于比較抽象的場景,不會因為投影改變物體大小比例
OrthographicCamera( left : Number, right : Number, top : Number, bottom : Number, near : Number, far : Number )
參數(shù):四個方位和遠近距離
一般定義一個控制三維場景范圍的系數(shù) s、渲染器的長寬比 k
left: -fru * asp
right: fru * asp
top: fru
bottom: -fru
PerspectiveCamera
var camera = new THREE.PerspectiveCamera(75, c_width/c_height, 1, 1000);
效果:

PerspectiveCamera透視相機.png
OrthographicCamera
var fru = 2;
var asp = c_width / c_height;
var camera = new THREE.OrthographicCamera(-fru*asp, fru*asp, fru, -fru, 1, 1000)
效果:

OrthograhicCamera正交相機.png
常用相機屬性方法:
- camera.lookAt(x,y,z) 相機看向哪個坐標
可以設置為場景對象的坐標
camera.lookAt(scene.position);
- camera.position.set(x,y,z);相機位置設置
分寫 camera.position.x = number...
camera.position.z = 4
//效果同上
//camera.position.set(0,0,4);
- camera.up() 相機以哪個方向為上方,默認為y
//這里以z軸為上
camera.up.z = 1;
源代碼
var oCanvas = document.getElementById('canvas-wrap');
var c_width = 500;
var c_height = 500;
var scene = new THREE.Scene();
//透視相機
var camera = new THREE.PerspectiveCamera(75, c_width/c_height, 1, 1000);
//正交相機
// var fru = 2;
// var asp = c_width / c_height;
// var camera = new THREE.OrthographicCamera(-fru*asp, fru*asp, fru, -fru, 1, 1000)
//設置相機位置
camera.position.z = 4;
//效果同上
//camera.position.set(0,0,4);
//設置相機位置看向方向
camera.lookAt(scene.position);
// console.log(scene.position); //scene坐標為(0,0,0)
//設置相機所看方向,z軸為上
camera.up.set(0,0,1);
var renderer = new THREE.WebGLRenderer({canvas: oCanvas});
renderer.setSize(c_width, c_height);
var geometry = new THREE.BoxGeometry(1, 1, 1);
var material = new THREE.MeshNormalMaterial({});
var cube = new THREE.Mesh(geometry, material);
var axesHelper = new THREE.AxesHelper(5);
scene.add(axesHelper);
cube.position.x = axesHelper.position.x = -1;
cube.position.y = axesHelper.position.y = -1;
scene.add(cube);
renderer.render(scene, camera);