2.md

该页内容为参考了图灵社区图书之后的一些笔记

照相机

什么是照相机

照相机在图形学中是一个抽象,他定义了三维空间到二维屏幕的投影方式

此外,照相机分为正交投影照相机与透视投影照相机

正交投影vs透视投影

正交投影更倾向于画图,要求在3D世界里面,任何的平行线也是平行的

透视投影更倾向于人眼看到的世界,所有物体遵循近大远小

正交投影照相机

正交投影照相机(Orthographic Camera)设置起来较为直观,它的构造函数是:

THREE.orthographicCamera(left, right, top, bottom, near, far)

这六个参数分别代表正交投影照相机拍摄到的空间的六个面的位置,用文字描述比较困难我们需要一张图

也就是说参数分别为距离相机中心点的相对位置(传入参数按比例计算),也就是说如果我们要设置相机在此出,传参分别为1,1,1,1,near,far

其中near和far均是正值,且为了保证场景中的物体不因为太近或太远而被忽略一般会把near设置的比较近far设置的比较远

另外在看了图之后我有一个猜想,阿里之前做过一个来自外星的邀请卡,是不是就是建了一个很长的矩形空间,然后通过移动camera来完成的呢

实战 2.html

设置照相机:

var camera = new THREE.OrthographicCamera(-1, 1, 1.608, -1.608, 1, 10)
camera.position.set(0, 0, 5)
scene.add(camera)

接下来我们创建一个变成为1的正方体,同时我们使用wireframe材质替代之前的实心材质,以便能看清正方体的位置

var cube = new THREE.Mesh(
	new THREE.CubeGeometry(1, 1, 1),
	new THREE.MeshBasicMaterial({
		color: 0xff4956,
		wireframe: true //换一种材质,代替实心的
	})
)
scene.add(cube)

长宽比例

教程上面创建正交投影照相机的参数和我的有一点不一样,因为大家的画布是有区别的

我们要保证 right-left / top - bottom == width / height

照相机位置

我们可以使用camera.position.set(0, 0, 0)方式了设置照相机位置,此时照相机就会开始移动了,移动范围是你给照相机设置的区域的大小(传入的那6个参数)

换个角度看世界

目前照相机是沿Z轴方向的拍摄的,position.set()只能改变拍摄的平面,如果我们想用斜45°角的视角去看待世界,我们可以使用camera.lookAt()方法,该方法接收一个THREE.Vector3实例

camera.lookAt(new THREE.Vector3(0, 0, 0))

透视投影照相机

透视投影摄像机(Perspective Camera)的构造函数是:

THREE.PerspectiveCamera(fov, aspect, near, far)

具体参数还是要靠图才能说明清楚

其中fov是视景体竖直方向上的张角(是角度制)

aspect等于width/height,是canvas的比例

near和fear是远近关系,且均为正值

实战

实例说明 3.html

将透视投影照相机如此设计

var camera = new THREE.PerspectiveCamera(45, 750 / 1206, 1, 10)
camera.position.set(0, 0, 5)
scene.add(camera)

竖直张角

改变fov的大小为60,此时你可以认为是视野更开阔了,那么相应的图形就变小了

位置

与正交投影照相机不同,改变透视投影照相机的位置也会改变物体的大小,近大远小的原理嘛

var z = 0
function change(){
	x += 0.01
	setTimeout(function(){
		if(x < 3){
			change()
		}
	}, 100)
	camera.position.set(0, 0, z)
	renderer.render(scene, camera)
}
change()
// 此时我们就能看到物体慢慢离我们远去的场景了,感觉离阿里的来自外太空的邀请函又进了一步