【Three.js】01-2 相机camera

常用的相机有:

  • 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);

效果:


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);
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 今天的主题是three.js中用于观察三维空间的摄像机。 1.认识camera 图形学中的摄像机定义了三维空间到二...
    sakatayui酱阅读 5,915评论 0 1
  • 本文主要是讲解 Three.js 的相关概念,帮助大家对 Three.js 以及相关知识形成比较完整的理解。今年来...
    Simon王小白阅读 8,495评论 2 9
  • 组成Three.js场景的基本组件 《创建场景》 场景中的基本组件:相机、光源和几何体 THREE.Scene()...
    养薛定谔的猫阅读 1,573评论 1 8
  • 对于我这个闲不住又闲得住的人,傲娇的体质难以言表。 通俗点说就是太以自我为中心,恨不得地球绕着自己转。 经常会主观...
    RU小路路阅读 122评论 0 0
  • 1、一进入社交网络就直接引爆。一款受到欢迎的应用或服务、运营活动、信息,在进入社交网络的一刹那就开始了自己的引爆历...
    刘婷宇阅读 181评论 0 0