Three.js之三维空间的观察-一一网

Three.js之三维空间的观察

透视投影相机

PerspectiveCamera( fov, aspect, near, far )

结合下面一个图，我们来看看，各个参数的意思。

视角fov：这个最难理解,我的理解是,眼睛睁开的角度,即,视角的大小,如果设置为0,相当你闭上眼睛了,所以什么也看不到,如果为180,那么可以认为你的视界很广阔,但是在180度的时候，往往物体很小，因为他在你的整个可视区域中的比例变小了。
近平面near：这个呢，表示你近处的裁面的距离。补充一下，也可以认为是眼睛距离近处的距离，假设为10米远，请不要设置为负值，Three.js就傻了,不知道怎么算了。
远平面far：这个呢，表示你远处的裁面。
纵横比aspect：实际窗口的纵横比，即宽度除以高度。这个值越大，说明你宽度越大，那么你可能看的是宽银幕电影了，如果这个值小于1，那么可能你看到的是如下的图中的LED屏幕了。

正投影相机

OrthographicCamera( left, right, top, bottom, near, far )

结合下面一个图，我们来看看，各个参数的意思。

1、 left参数

left：左平面距离相机中心点的垂直距离。从图中可以看出，左平面是屏幕里面的那个平面。

2、 right参数

right：右平面距离相机中心点的垂直距离。从图中可以看出，右平面是屏幕稍微外面一点的那个平面。

3、 top参数

top：顶平面距离相机中心点的垂直距离。上图中的顶平面，是长方体头朝天的平面。

4、 bottom参数

bottom：底平面距离相机中心点的垂直距离。底平面是头朝地的平面。

5、near参数

near：近平面距离相机中心点的垂直距离。近平面是左边竖着的那个平面。

6、far参数

far：远平面距离相机中心点的垂直距离。远平面是右边竖着的那个平面。

demo

透视相机

var scene = new THREE.Scene() 
// 可以尝试下，如果把1 设置成 5 就会发现模型看不到，这时候观察点就在材质内部了
var camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 1, 1000)
var renderer = new THREE.WebGLRenderer()
renderer.setSize(window.innerWidth, window.innerHeight)
renderer.setClearColor('#ffffff')

document.body.append(renderer.domElement)
  var geometry = new THREE.CubeGeometry(2,2,2)
  var material = new THREE.MeshBasicMaterial({
  color: 0xff0000
})
var cube = new THREE.Mesh(geometry, material)
scene.add(cube)
camera.position.z = 5 // 相机z轴位置
function render () {
  cube.rotation.z += 0.1
  requestAnimationFrame(render)
  renderer.render(scene, camera)
}
render()
复制代码