threejs -实时场景缩影

一个场景，两个相机。
在左上角显示一个视图，相当于整个场景的缩影，渲染一次场景，再渲染一次设置视图就行。废话不多说，直接上代码分析。

1.新建两个透视相机；

				//主相机
				camera=new THREE.PerspectiveCamera(60,window.innerWidth/window.innerHeight,1,1000);
				camera.position.set(0,100,200);
				camera.lookAt(scene.position);
				//副相机
				camera2=new THREE.PerspectiveCamera(60,1,1,1000);
				camera2.position.copy(camera.position);

2.窗口缩放重新渲染，避免页面缩放导致渲染变形

			var insetWidth,insetHeight;			
			function onWindowResize(){
				camera.aspect=window.innerWidth/window.innerHeight;
				camera.updateProjectionMatrix();
				
				insetWidth=insetHeight=window.innerHeight/4;//窗口的4分之1
				camera2.aspect=insetWidth/insetHeight;//副相机视锥体长宽比
				camera2.updateProjectionMatrix();//更新副相机的投影矩阵
				
				renderer.setSize(window.innerWidth,window.innerHeight);
			}
			
			window.onresize=onWindowResize();

3.注意渲染裁剪，最好保证裁剪窗口的大小和视口区域大小一样

			function render(){					
				renderer.setViewport(0,0,window.innerWidth,window.innerHeight);
				renderer.setClearColor(0x000000,0);//设置颜色和透明度，让两个区域显示对比
				renderer.render(scene,camera);
				
				renderer.clearDepth();//清除深度缓存。
				//启用或禁用剪裁检测. 若启用，则只有在所定义的裁剪区域内的像素才会受之后的渲染器影响
				renderer.setScissorTest(true);
				//将剪裁区域设为(x, y)到(x + width, y + height)
				renderer.setScissor(10,window.innerHeight-insetHeight-10,insetWidth,insetHeight);
				//将视口大小设置为(x, y)到 (x + width, y + height).
				renderer.setViewport( 10, window.innerHeight - insetHeight - 10, insetWidth, insetHeight );
				
				//跟随主相机的旋转角度和位置
				camera2.position.copy(camera.position);//复制主相机的位置
				camera2.quaternion.copy(camera.quaternion);//复制主相机的四元数
				renderer.setClearColor(0x222222,1);
				renderer.render(scene,camera2);
				
				renderer.setScissorTest(false);//关闭裁剪，避免裁剪主场景
			}

4.以上步骤基本实现了小视图效果，如果有需要可以把副相机换成正交投影相机。

---

做小地图

做小地图更简单，写一个固定位置的div，再建一个渲染器，一个相机，一个场景，把主场景相机的状态赋给副场景的相机，然后在div里面渲染即可。实在太简单就不写案例了。