web前端

three.js 相机camera属性解析

2018-02-09  本文已影响0人  Sylvie_9459

在使用three.js初始化相机的时候经常看到如下代码:

function initCamera() {

    camera = new THREE.PerspectiveCamera(45, width / height, 1, 10000); 

    camera.position.x = 0;//相机的位置

    camera.position.y = 0;

    camera.position.z = 600;

    camera.up.x = 0;//相机以哪个方向为上方

    camera.up.y = 1;

    camera.up.z = 0;

    camera.lookAt(0,0,0);//相机看向的坐标

}

第一句很容易理解,即声明了一个透视投影相机,那么下面的代码都是什么意思呢,我们来看一下:

1.camera.position.(x,y,z):用来确定相机的位置,来个栗子

camera.position.(0,1000,0);

2.camera.up.(x/y/z):用来确定相机以哪个方向为上方,再来个栗子

camera.up.x=0;       camera.up.y=1;         camera.up.z=0;  (y轴为上方) camera.up.x=0;      camera.up.y=0;      camera.up.z=1;  (z轴为上方)

通俗的理解就是相机正着拍,侧着拍,旋转拍

3.camera.lookAt(0,0,0):用来确定相机看向的坐标,上栗子

相机位置在camera.position(500,500,1000)      看向原点camera.lookAt(0,0,0) 不设置lookAt时,相机默认由正z轴看向xy平面, 所以只能看到y轴500位置的线条了
上一篇 下一篇

猜你喜欢

热点阅读