Question

我正在使用Oculus插件和Cesium，我没有问题从“查看器可视化”传递到“oculus可视化”，重点是我无法回到“查看器可视化”。如何重置场景，并消除后期处理和oculus插件引入的截头锥体？提前谢谢。

这是我的代码：

<!DOCTYPE html>
<html lang="en">
<head>
<title>try</title>
<script src="lib/Cesium/Cesium.js"></script> 
<script src="src/canvas-copy.js"></script>
<script src="src/cesium-oculus.js"></script>
<script src="lib/vr.js/vr.js"></script>
<script src="lib/jquery-1.11.1.js"></script>
<style>
@import url(lib/Cesium/Widgets/widgets.css);

body,html {
    height: 100%;
}

body {
    padding: 0;
    border: 0;
    margin: 0;
    overflow: hidden;
}

#cesiumContainer {
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      width: 100%;
      margin: 0;
      overflow: hidden;
      padding: 0;
      font-family: sans-serif;
}

#stereo div {
    pointer-events: none;
    height: 100%;
    width: 50%;
    border: 0px solid red;
    margin-left: 0px;
    float: left;
}

.eyeLeft {
    display: 'block';
    float: left;
    width: 100%;
    height: 100%;
    border: 0px solid red;
}
.eyeRight {
    display: 'none';
    float: left;
    width: 50%;
    height: 100%;
    border: 0px solid red;
}

.fullSize {
    display: block;
    position: relative;
    top: 0;
    left: 0;
    border: none;
    width: 100%;
    height: 100%;
}

.myButton{
    position: absolute;
    left: 10px;        
    border: 1px solid #edffff;
}         
#oculus{
    top: 8%;
}        
#viewer{
    top: 12%;
}        

</style>
</head>
<body>


  <div style="width: 100%; height: 100%">
    <div id="cesiumContainerLeft" class="eyeLeft"></div>
    <div id="cesiumContainerRight" class="eyeRight"></div>
  </div>

  <button id="oculus" type="button" class="cesium-button myButton" title="oculus">oculus</button>
  <button id="viewer" type="button" class="cesium-button myButton" title="viewer">viewer</button>

  <!-- library -->
  <script src="src/cesium-oculus.js"></script>
  <script src="src/canvas-copy.js"></script>

  <!-- app -->
  <script>

//-------------------------------INITIAL SETTINGS--------------------
//create the viewer in the left div 
var viewer = new Cesium.Viewer('cesiumContainerLeft');
viewer.scene.debugShowFramesPerSecond = true;
var canvasL = viewer.canvas;
canvasL.className = "fullSize";

//create the right canvas in the right div
var canvasR = document.createElement('canvas');
canvasR.className = "fullSize";
document.getElementById('cesiumContainerRight').appendChild(canvasR);

$('#oculus').bind('click', { param1: viewer}, oculusRules);
$('#viewer').bind('click', { param1: viewer}, backToViewer);

//--------------------OCULUS VIEW-------------------------------
function oculusRules(event){        
    $('.eyeRight').css({display: 'block'});
    $('.eyeLeft').css({width: '50%'});        
    var viewer = event.data.param1;

    var canvasCopy = new CanvasCopy(canvasR, false);

    var cesiumOculus = new CesiumOculus(run);

    function run() {
      var scene = viewer.scene;
      scene.camera.frustum.fovy = Cesium.Math.toRadians(90.0);
      var camera = scene.camera;
      var eyeSeparation = 2.0;

      var tick = function() {
        // Render right eye
        cesiumOculus.setSceneParams(scene, 'right');        
        scene.initializeFrame();
        scene.render();

        canvasCopy.copy(canvasL);

        // Render left eye
        var originalCamera = scene.camera.clone();
        CesiumOculus.slaveCameraUpdate(originalCamera, scene.camera, -eyeSeparation);
        cesiumOculus.setSceneParams(scene, 'left');                        
        scene.render();

        // Restore state
        CesiumOculus.slaveCameraUpdate(originalCamera, scene.camera, 0.0);

        Cesium.requestAnimationFrame(tick);

      };          

      tick();

      var onResizeScene = function(canvas, scene) {
            var supersample = 1.0;
        var width = canvas.clientWidth * supersample;
        var height = canvas.clientHeight * supersample;

        if (canvas.width === width && canvas.height === height) {
          return;
        }
        canvas.width = width;
        canvas.height = height;
        scene.camera.frustum.aspectRatio = width / height;
      };
      var onResize = function() {
        onResizeScene(canvasL, scene);
        onResizeScene(canvasR, scene);
      };
      window.setTimeout(onResize, 60);
      window.addEventListener('resize', onResize, false);
    }
}

function backToViewer(event){
    $('.eyeRight').css({display: 'none'});
    $('.eyeLeft').css({width: '100%'});        
    var viewer = event.data.param1;

}      
  </script>

</body>
</html>

Answer 1

我们很快就会添加切换到示例代码来演示这一点。在此期间，您可以在这里查看PR ...

https://github.com/NICTA/cesium-oculus-plugin/pull/5

使用Oculus插件后重置普通的Viewer可视化

1 个答案: