sphere.js

// Generated by CoffeeScript 1.9.3
(function() {
  var endsWith, webgl;

  webgl = (function() {
    var canvas;
    try {
      canvas = document.createElement('canvas');
      return !!(window.WebGLRenderingContext && (canvas.getContext('webgl') || canvas.getContext('experimental-webgl')));
    } catch (_error) {
      return false;
    }
  })();

  endsWith = function(str, suffix) {
    return str.indexOf(suffix, str.length - suffix.length) !== -1;
  };

  Polymer({
    is: 'rs-sphere',
    properties: {
      loading: {
        type: Boolean,
        value: false,
        reflectToAttribute: true,
        notify: true,
        readOnly: true
      },
      src: {
        type: String,
        reflectToAttribute: true,
        observer: 'sourceChanged'
      },
      srcRight: {
        type: String,
        reflectToAttribute: true,
        observer: 'sourceRightChanged'
      },
      fov: {
        type: Number,
        observer: 'fovChanged',
        reflectToAttribute: true,
        notify: true,
        value: 75
      },
      rotate: {
        type: Boolean,
        observer: 'rotateChanged',
        reflectToAttribute: true,
        notify: true,
        value: false
      },
      stereo: {
        type: Boolean,
        observer: 'stereoChanged',
        reflectToAttribute: true,
        notify: true,
        value: false
      },
      gyroscope: {
        type: Boolean,
        observer: 'gyroscopeChanged',
        reflectToAttribute: true,
        notify: true,
        value: false
      },
      rotateX: {
        type: Number,
        observer: 'rotateXChanged',
        reflectToAttribute: true,
        notify: true,
        value: 0
      },
      rotateY: {
        type: Number,
        observer: 'rotateYChanged',
        reflectToAttribute: true,
        notify: true,
        value: 0
      },
      rotateZ: {
        type: Number,
        observer: 'rotateZChanged',
        reflectToAttribute: true,
        notify: true,
        value: 0
      }
    },
    behaviors: [Polymer.IronResizableBehavior],
    listeners: {
      'iron-resize': '_onIronResize'
    },
    created: function() {
      var camera, i, len, ref, view;
      this.scene = new THREE.Scene();
      this.sphere = new THREE.Mesh(new THREE.SphereGeometry(100, 32, 32));
      this.sphere.scale.x = -1;
      this.sphere.visible = false;
      this.sphereR = new THREE.Mesh(new THREE.SphereGeometry(100, 32, 32));
      this.sphereR.position.x = 200;
      this.sphereR.scale.x = -1;
      this.sphereR.visible = false;
      this.scene.add(this.sphere);
      this.scene.add(this.sphereR);
      this.scene.add(new THREE.AmbientLight(0x333333));
      this.views = [
        {
          left: 0,
          bottom: 0,
          width: 0.5,
          height: 1.0,
          eye: [0, 0, 1.5],
          up: [0, 1, 0],
          fov: 75
        }, {
          left: 0.5,
          bottom: 0,
          width: 0.5,
          height: 1.0,
          eye: [200, 0, 1.5],
          up: [0, 1, 0],
          fov: 75
        }
      ];
      ref = this.views;
      for (i = 0, len = ref.length; i < len; i++) {
        view = ref[i];
        camera = new THREE.PerspectiveCamera(view.fov, 0, 1, 1000);
        camera.position.x = view.eye[0];
        camera.position.y = view.eye[1];
        camera.position.z = view.eye[2];
        camera.up.x = view.up[0];
        camera.up.y = view.up[1];
        camera.up.z = view.up[2];
        view.camera = camera;
      }
      this.renderer = webgl ? new THREE.WebGLRenderer() : new THREE.CanvasRenderer();
      this.stereoEffect = new THREE.StereoEffect(this.renderer);
      return this._dirty = true;
    },
    attached: function() {
      var animate, webglEl;
      this.controls = new THREE.OrbitControls(this.views[0].camera, this.$.webgl);
      this.controls.noPan = true;
      this.controls.noZoom = true;
      this.controls.noRotate = this.gyroscope;
      this.controls.autoRotate = this.rotate && !this.gyroscope;
      this.controls.autoRotateSpeed = 0.5;
      this.controls.addEventListener('change', (function(_this) {
        return function() {
          _this.rotateX = _this.views[0].camera.rotation.x;
          _this.rotateY = _this.views[0].camera.rotation.y;
          _this.rotateZ = _this.views[0].camera.rotation.z;
          return _this._dirty = true;
        };
      })(this));
      this.render = (function(_this) {
        return function() {
          var bottom, camera, height, i, left, len, ref, results, view, width, windowHeight, windowWidth;
          if (typeof video !== "undefined" && video !== null) {
            if (video.readyState === video.HAVE_ENOUGH_DATA) {
              videoImageContext.drawImage(video, 0, 0);
              if (videoTexture) {
                videoTexture.needsUpdate = true;
              }
            }
          }
          if (_this.stereo) {
            if (_this.srcRight) {
              ref = _this.views;
              results = [];
              for (i = 0, len = ref.length; i < len; i++) {
                view = ref[i];
                camera = view.camera;
                camera.updateMatrixWorld();
                windowWidth = window.innerWidth;
                windowHeight = window.innerHeight;
                left = Math.floor(windowWidth * view.left);
                bottom = Math.floor(windowHeight * view.bottom);
                width = Math.floor(windowWidth * view.width);
                height = Math.floor(windowHeight * view.height);
                _this.renderer.setViewport(left, bottom, width, height);
                _this.renderer.setScissor(left, bottom, width, height);
                _this.renderer.setScissorTest(true);
                _this.renderer.setClearColor(view.background);
                camera.aspect = width / height;
                camera.updateProjectionMatrix();
                results.push(_this.renderer.render(_this.scene, camera));
              }
              return results;
            } else {
              camera = _this.views[0].camera;
              camera.updateMatrixWorld();
              return _this.stereoEffect.render(_this.scene, camera);
            }
          } else {
            camera = _this.views[0].camera;
            camera.updateMatrixWorld();
            windowWidth = window.innerWidth;
            windowHeight = window.innerHeight;
            _this.renderer.setViewport(0, 0, windowWidth, windowHeight);
            _this.renderer.setScissor(0, 0, windowWidth, windowHeight);
            _this.renderer.setScissorTest(true);
            camera.aspect = windowWidth / windowHeight;
            camera.updateProjectionMatrix();
            return _this.renderer.render(_this.scene, camera);
          }
        };
      })(this);
      animate = (function(_this) {
        return function() {
          if (!_this.gyroscope) {
            _this.controls.update();
          }
          if (_this._dirty) {
            _this._dirty = false;
            _this.render();
          }
          return requestAnimationFrame(animate);
        };
      })(this);
      webglEl = this.$.webgl;
      webglEl.appendChild(this.renderer.domElement);
      animate();
      webglEl.addEventListener('mousewheel', ((function(_this) {
        return function(e) {
          return _this.onMouseWheel(e);
        };
      })(this)), false);
      webglEl.addEventListener('DOMMouseScroll', ((function(_this) {
        return function(e) {
          return _this.onMouseWheel(e);
        };
      })(this)), false);
      return this.async(this.notifyResize, 1);
    },
    detached: function() {
      if (this._gyroWrapper != null) {
        return window.removeEventListener("deviceorientation", this._gyroWrapper, false);
      }
    },
    sourceChanged: function(src) {
      var loader, texture, video, videoImage, videoImageContext, videoTexture;
      this._setLoading(true);
      this.sphere.visible = false;
      texture = this.src;
      if (endsWith(texture, '.webm') || endsWith(texture, '.mp4')) {
        video = document.createElement('video');
        if (endsWith(texture, '.webm')) {
          video.type = 'video/webm';
        } else {
          video.type = 'video/mp4';
        }
        video.src = texture;
        video.loop = true;
        video.load();
        video.play();
        videoImage = document.createElement('canvas');
        videoImage.width = 720;
        videoImage.height = 360;
        videoImageContext = videoImage.getContext('2d');
        videoImageContext.fillStyle = '#000000';
        videoImageContext.fillRect(0, 0, videoImage.width, videoImage.height);
        videoTexture = new THREE.Texture(videoImage);
        videoTexture.minFilter = THREE.LinearFilter;
        videoTexture.magFilter = THREE.LinearFilter;
        this.sphere.material = new THREE.MeshBasicMaterial({
          map: videoTexture,
          overdraw: true
        });
        if (!this.srcRight || this.sphereR.visible) {
          this._setLoading(false);
        }
        this.sphere.visible = true;
        return this._dirty = true;
      } else {
        loader = new THREE.TextureLoader();
        loader.crossOrigin = '';
        return loader.load(src, (function(_this) {
          return function(texture) {
            texture.minFilter = THREE.LinearFilter;
            _this.sphere.material = new THREE.MeshBasicMaterial({
              map: texture
            });
            if (_this.render) {
              _this.render();
            }
            if (!_this.srcRight || _this.sphereR.visible) {
              _this._setLoading(false);
            }
            _this.sphere.visible = true;
            return _this._dirty = true;
          };
        })(this));
      }
    },
    sourceRightChanged: function(src) {
      var loader, texture, video, videoImage, videoImageContext, videoTexture;
      this._setLoading(true);
      this.sphereR.visible = false;
      texture = this.srcRight;
      if (endsWith(texture, '.webm') || endsWith(texture, '.mp4')) {
        video = document.createElement('video');
        if (endsWith(texture, '.webm')) {
          video.type = 'video/webm';
        } else {
          video.type = 'video/mp4';
        }
        video.src = texture;
        video.loop = true;
        video.load();
        video.play();
        videoImage = document.createElement('canvas');
        videoImage.width = 720;
        videoImage.height = 360;
        videoImageContext = videoImage.getContext('2d');
        videoImageContext.fillStyle = '#000000';
        videoImageContext.fillRect(0, 0, videoImage.width, videoImage.height);
        videoTexture = new THREE.Texture(videoImage);
        videoTexture.minFilter = THREE.LinearFilter;
        videoTexture.magFilter = THREE.LinearFilter;
        this.sphereR.material = new THREE.MeshBasicMaterial({
          map: videoTexture,
          overdraw: true
        });
        if (this.sphere.visible) {
          this._setLoading(false);
        }
        this.sphereR.visible = true;
        return this._dirty = true;
      } else {
        loader = new THREE.TextureLoader();
        loader.crossOrigin = '';
        return loader.load(texture, (function(_this) {
          return function(texture) {
            texture.minFilter = THREE.LinearFilter;
            _this.sphereR.material = new THREE.MeshBasicMaterial({
              map: texture
            });
            if (_this.render) {
              _this.render();
            }
            if (_this.sphere.visible) {
              _this._setLoading(false);
            }
            _this.sphereR.visible = true;
            return _this._dirty = true;
          };
        })(this));
      }
    },
    fovChanged: function(fov) {
      var i, len, ref, view;
      ref = this.views;
      for (i = 0, len = ref.length; i < len; i++) {
        view = ref[i];
        view.camera.fov = fov;
        view.camera.updateProjectionMatrix();
      }
      return this._dirty = true;
    },
    rotateChanged: function(rotate) {
      var ref;
      return (ref = this.controls) != null ? ref.autoRotate = rotate : void 0;
    },
    stereoChanged: function(stereo) {
      this.renderer.setSize(this.clientWidth, this.clientHeight);
      this.stereoEffect.setSize(this.clientWidth, this.clientHeight);
      return this._dirty = true;
    },
    _gyroSensor: function(ev) {
      var alpha, beta, deviceEuler, finalQuaternion, gamma, i, len, minusHalfAngle, orient, ref, screenTransform, view, worldTransform;
      alpha = THREE.Math.degToRad(ev.alpha || 0);
      beta = THREE.Math.degToRad(ev.beta || 0);
      gamma = THREE.Math.degToRad(ev.gamma || 0);
      orient = THREE.Math.degToRad(window.orientation || 0);
      if (alpha === 0 || beta === 0 || gamma === 0) {
        return;
      }
      finalQuaternion = new THREE.Quaternion();
      deviceEuler = new THREE.Euler();
      screenTransform = new THREE.Quaternion();
      worldTransform = new THREE.Quaternion(-Math.sqrt(0.5), 0, 0, Math.sqrt(0.5));
      deviceEuler.set(beta, alpha, -gamma, 'YXZ');
      finalQuaternion.setFromEuler(deviceEuler);
      minusHalfAngle = -orient / 2;
      screenTransform.set(0, Math.sin(minusHalfAngle), 0, Math.cos(minusHalfAngle));
      finalQuaternion.multiply(screenTransform);
      finalQuaternion.multiply(worldTransform);
      ref = this.views;
      for (i = 0, len = ref.length; i < len; i++) {
        view = ref[i];
        view.camera.quaternion.copy(finalQuaternion);
      }
      return this._dirty = true;
    },
    gyroscopeChanged: function(gyroEnabled) {
      var ref, ref1, ref2, ref3;
      if (gyroEnabled) {
        if ((ref = this.controls) != null) {
          ref.enabled = false;
        }
        if (window.DeviceOrientationEvent) {
          this._gyroWrapper = (function(_this) {
            return function(e) {
              return _this._gyroSensor(e);
            };
          })(this);
          window.addEventListener("deviceorientation", this._gyroWrapper, false);
        }
      } else {
        if ((ref1 = this.controls) != null) {
          ref1.enabled = true;
        }
        window.removeEventListener("deviceorientation", this._gyroWrapper, false);
      }
      if ((ref2 = this.controls) != null) {
        ref2.noRotate = gyroEnabled;
      }
      return (ref3 = this.controls) != null ? ref3.autoRotate = this.rotate && !gyroEnabled : void 0;
    },
    rotateXChanged: function(x) {
      var i, len, ref, view;
      ref = this.views;
      for (i = 0, len = ref.length; i < len; i++) {
        view = ref[i];
        view.camera.rotation.x = x;
      }
      return this._dirty = true;
    },
    rotateYChanged: function(y) {
      var i, len, ref, view;
      ref = this.views;
      for (i = 0, len = ref.length; i < len; i++) {
        view = ref[i];
        view.camera.rotation.y = y;
      }
      return this._dirty = true;
    },
    rotateZChanged: function(z) {
      var i, len, ref, view;
      ref = this.views;
      for (i = 0, len = ref.length; i < len; i++) {
        view = ref[i];
        view.camera.rotation.z = z;
      }
      return this._dirty = true;
    },
    onMouseWheel: function(event) {
      var delta;
      delta = 0;
      if (event.wheelDeltaY) {
        delta = -event.wheelDeltaY * 0.05;
      } else if (event.wheelDelta) {
        delta = -event.wheelDelta * 0.05;
      } else if (event.detail) {
        delta = event.detail * 1.0;
      }
      return this.fov = Math.max(40, Math.min(100, this.fov + delta));
    },
    _onIronResize: function() {
      var i, len, ref, view;
      if (this.offsetWidth > 0 && this.offsetHeight > 0) {
        this.renderer.setSize(this.offsetWidth, this.offsetHeight);
        this.stereoEffect.setSize(this.offsetWidth, this.offsetHeight);
        ref = this.views;
        for (i = 0, len = ref.length; i < len; i++) {
          view = ref[i];
          view.camera.aspect = this.offsetWidth / this.offsetHeight;
          view.camera.updateProjectionMatrix();
        }
        return this._dirty = true;
      }
    }
  });

}).call(this);