效果：https://threejs.org/examples/#webgl_camera

代码：https://github.com/mrdoob/three.js/blob/master/examples/webgl_camera.html

先说函数间的关系

首先调用init()和animate()，因为有requestAnimationFrame( animate )，animate会被循环调用；onKeyDown ()和onWindowResize()由系统调用

再逐一讲解函数

1. init()

- 创建三个相机：camera 渲染画面右侧的图像，cameraPerspective 和cameraOrtho 则渲染左侧的，用户可以按o或p切换这两个相机。还创建了THREE.CameraHelper，用于显示相机的视锥体，是一个辅助工具。

- 创建一个组，把两个相机塞进去：cameraRig = new THREE.Group();把东西装在组(Group)里并对组进行变换操作，可以统一变换组内的物体。在本例中，cameraRig 作为组，在render()中进行lookat操作：cameraRig.lookAt( mesh.position )，这样组里的相机(和一个mesh)都会lookat。

- 创建三个球，依次是白绿蓝

- 创建星空。首先使用geometry.addAttribute( 'position', new THREE.Float32BufferAttribute( vertices, 3 ) )，其中attribute是特性，意思是buffer中填充vertices，他们是点，3代表三维坐标。之后将这个geometry buffer传给THREE.Points，称为粒子

2. render()

- 让球旋转

- 调整相机让他看着球：cameraRig.lookAt( mesh.position );这里虽然星空也在cameraRig组里，但他并没有跟着动，我觉得是因为scene.add( cameraRig )时组里还没有星空

- 渲染不同相机：先renderer.setViewport( 0, 0, SCREEN_WIDTH/2, SCREEN_HEIGHT )调整渲染视口到屏幕左侧，然后再.render( scene, activeCamera )渲染当前激活相机；然后调整到屏幕右侧，使用常在camera渲染整体画面