Three.js camera中的position,lookAt,up三个属性的理解
概述
主要针对相机中的position,lookAt,up三个属性来谈谈自己的理解。
position: 相机位置,默认为(0,0,0)
lookAt:相机焦点方向,默认为Z轴负半轴方向, 大白话就是相机看向哪一个点
up:相机朝向,默认(0,1,0),可以理解为那一根坐标轴向上
步骤
- 引入透视相机,角度设置为45°, 引入辅助坐标轴
let camera = new THREE.PerspectiveCamera( 45, width / height, 1, 1000 )
scene.add(new THREE.AxesHelper(1000))
- 因为相机的默认位置在(0, 0, 0),所以必须调整相机的位置才可以看到
相机位置在(0, 0, 0)时是什么都看不到的,图解:
可以看到此时我们相机所拍到的地方没有任何内容,所以此时场景为空的。
接着我们创建一个box
var geometry = new THREE.BoxGeometry( 10, 10, 10 );
var material = new THREE.MeshBasicMaterial( {color: 0x00ff00} );
var cube = new THREE.Mesh( geometry, material );
scene.add( cube );
此时我们再次进行刷新界面,可以看到界面还是空的,这是为什么呢,按常规理解来说我们的相机位置在(0, 0, 0), box的位置也是在(0, 0, 0),大小为(10, 10, 10),我们相机的位置应该是处在box盒子的中间的,是可以看到box的,此时又有一个新概念,材质的渲染默认是渲染背面,我们看到的box盒子的是前面,是不会被渲染的,此时可以设置材质的side属性为THREE.DoubleSide, THREE.BackSide都可以看到。
- 移动相机的位置,使用camera.position.set()
camera.position.set(0, 0, 30)
可以看到当相机移动到了(0, 0, 30)后,我们终于可以在相机的视野中看到整个box了,真开心~~~
- 设置up属性,up属性必须设置在lookAt之前
up属性我们可以理解为那一根坐标轴朝上,我觉得这样是最好理解的
默认的up属性为:
camera.up.x = 0;
camera.up.y = 1;
camera.up.z = 0;
此时我们可以看到y轴设置为1, 那我们的y轴肯定是向上的。
此时我们设置x为1,那X轴的朝向就向上
camera.up.x = 1;
camera.up.y = 0;
camera.up.z = 0;
此时我们在设置Z轴为1,我们预想的Z轴肯定也朝上了,这就和预期的结果有差距了
camera.up.x = 0;
camera.up.y = 0;
camera.up.z = 1;
此时Z轴垂直我们的屏幕所以我们看不到,那这是怎么回事呢???
按照我的理解是此时我们相机的焦点是看到负Z轴的,然后相机的朝向是在正Z轴的,图解
可以看到up方向和lookAt方向是平行且相反的,这种现象是不应该存在的,此时我得出一个结论,up方向和lookAt方向不能平行,不然会出现一些无法理解的情况产生。
- lookAt 相机的焦点
此时我们将up的y轴甚至为朝上的
camera.up.x = 0;
camera.up.y = 1;
camera.up.z = 0;
设置相机焦点
camera.lookAt(new THREE.Vector3(0, 10, 0));
此时我们将相机看到y轴的10,效果