стереокубы (12 * 1) отображаются в виде черного экрана с использованием threejs + webVr - PullRequest
Новая
       22

стереокубы (12 * 1) отображаются в виде черного экрана с использованием threejs + webVr

0 голосов
/ 07 июня 2018

Я пытаюсь визуализировать полосу изображения 12x1 стереокуба с помощью Three.js и хочу просмотреть ее в VR.Но вместо этого черный экран отображается каждый раз без каких-либо ошибок в консоли.в основном я извлекаю 12 изображений из одного файла изображения стереокуба, используя функцию get TexturesFromAtlasFile, формируя 2 сетки и передавая их на сцену.Я использую геометрию куба.Я новичок в WebVr и ThreeJs, пожалуйста, помогите.Используемый фрагмент кода приведен ниже: - 

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/93/three.js"></script>
<script src="https://threejs.org/examples/js/controls/VRControls.js"></script>
<script src="https://threejs.org/examples/js/effects/VREffect.js"></script>
<script>
  //Setup three.js WebGL renderer
  var renderer = new THREE.WebGLRenderer({
    antialias: true
  });
  renderer.setPixelRatio(window.devicePixelRatio);
  renderer.setSize(window.innerWidth, window.innerHeight);
  // Append the canvas element created by the renderer to document body element.
  document.body.appendChild(renderer.domElement);
  // Create a three.js scene.
  var scene = new THREE.Scene();
  // Create a three.js camera.
  var camera = new THREE.PerspectiveCamera(90, window.innerWidth / window.innerHeight, 1, 1000);
  //camera.layers.enable( 1 );
  // Apply VR headset positional data to camera.
  var controls = new THREE.VRControls(camera);
  // Apply VR stereo rendering to renderer.
  var effect = new THREE.VREffect(renderer);
  effect.setSize(window.innerWidth, window.innerHeight);
  //create a sphere - we'll use the inner surface to project our Mars image on to it
  var geometry = new THREE.CubeGeometry(100, 100, 100);
  var textures = this.getTexturesFromAtlasFile("img/san_miguel_vr_Samsung.png", 12);
  var materialArray = [];
  for (var i = 0; i < 6; i++) {
    materialArray.push(new THREE.MeshBasicMaterial({
      map: textures[i]
    }));
  }
  // create the mesh based on geometry and material
  //var mesh  = new THREE.Mesh(geometry, materialArray);
  var skybox = new THREE.Mesh(geometry, materialArray);
  //skybox.layers.set( 1 );
  scene.add(skybox);
  var materialsR = [];
  for (var i = 6; i < 12; i++) {
    materialsR.push(new THREE.MeshBasicMaterial({
      map: textures[i]
    }));
  }
  var skyBoxR = new THREE.Mesh(geometry, materialsR);
  //skyBoxR.layers.set( 2 );
  scene.add(skyBoxR);
  // Create a VR manager helper to enter and exit VR mode.
  var manager = new WebVRManager(renderer, effect, {
    hideButton: false
  });

  function animate(timestamp) {
    // Update VR headset position and apply to camera.
    controls.update();
    // Render the scene through the manager.
    manager.render(scene, camera, timestamp);
    requestAnimationFrame(animate);
  }
  // Kick off animation loop
  animate();

  function getTexturesFromAtlasFile(atlasImgUrl, tilesNum) {
    var textures = [];
    for (var i = 0; i < tilesNum; i++) {
      textures[i] = new THREE.Texture();
    }
    var imageObj = new Image();
    imageObj.onload = function() {
      var canvas, context;
      var tileWidth = imageObj.height;
      for (var i = 0; i < textures.length; i++) {
        canvas = document.createElement('canvas');
        context = canvas.getContext('2d');
        canvas.height = tileWidth;
        canvas.width = tileWidth;
        context.drawImage(imageObj, tileWidth * i, 0, tileWidth, tileWidth, 0, 0, tileWidth, tileWidth);
        textures[i].image = canvas
        textures[i].needsUpdate = true;
      }
    };
    imageObj.src = atlasImgUrl;
    return textures;
  }
</script>
...