camera-多相机


官方的例子在 /examples/camera ,配置本机环境,请参考OSGJS官方例子使用说明-本机部署

知识点

相机创建

// create a camera that will render to texture  创建主相机
var rttSize = [ 512, 512 ];
var rttCamera = new osg.Camera();
rttCamera.setName( 'rttCamera' );
osg.Matrix.makeOrtho( 0, rttSize[ 0 ], 0, rttSize[ 1 ], -5, 5, rttCamera.getProjectionMatrix() );
//透视投影 makeOrtho: function ( left, right, bottom, top, zNear, zFar, result )

rttCamera.setRenderOrder( osg.Camera.PRE_RENDER, 0 );
rttCamera.setReferenceFrame( osg.Transform.ABSOLUTE_RF );
rttCamera.setViewport( new osg.Viewport( 0, 0, rttSize[ 0 ], rttSize[ 1 ] ) );  //视口越大,显示的内容越少
...相机中添加物体

//创建从相机,从名字可以看出是平视显示器(Head Up Display)
var hudCamera = new osg.Camera();
osg.Matrix.makeOrtho( 0, canvas.width, 0, canvas.height, -5, 5, hudCamera.getProjectionMatrix() );
osg.Matrix.makeTranslate( 25, 25, 0, hudCamera.getViewMatrix() );
hudCamera.setRenderOrder( osg.Camera.NESTED_RENDER, 0 );//嵌套渲染
hudCamera.setReferenceFrame( osg.Transform.ABSOLUTE_RF );
...相机中添加物体

setRenderOrder有三个枚举值 Camera.PRE_RENDER = 0; Camera.NESTED_RENDER = 1; Camera.POST_RENDER = 2;

setReferenceFrame有两个枚举 osg.Transform.RELATIVE_RF = TransformEnums.RELATIVE_RF; osg.Transform.ABSOLUTE_RF = TransformEnums.ABSOLUTE_RF;

视图中操作的物体

// we add this quad to manipulate it with the mouse
root.addChild( texturedQuadUsingTargetTexture );

视图中操作的物体是添加到 root 中的,(注释掉这一句,场景中不显示物体)

计算相机位置

设置为 osg.Camera.NESTED_RENDER 相机的中心点为左下角点,这里物体宽高都是50,图片正中心为原点 (0,0),所以需要平移的量为(25,25,0) ,可以把值改大一点进行效果测试