常用的相机有:
-
PerspectiveCamera 透视相机
perspective意为透视、远景,应用于较现实的场景,会遵循近大远小
PerspectiveCamera( fov : Number, aspect : Number, near : Number, far : Number )
参数:
fov — 垂直视野角度
aspect — 长宽比(一般为渲染器、画布长宽比)
near — 近距离
far — 远距离
-
OrthographicCamera正交相机
Orthographic意味正交、直角,应用于比较抽象的场景,不会因为投影改变物体大小比例
OrthographicCamera( left : Number, right : Number, top : Number, bottom : Number, near : Number, far : Number )
参数:四个方位和远近距离
一般定义一个控制三维场景范围的系数 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);
效果:
OrthographicCamera
var fru = 2;
var asp = c_width / c_height;
var camera = new THREE.OrthographicCamera(-fru*asp, fru*asp, fru, -fru, 1, 1000)
效果:
常用相机属性方法:
- 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);