Simple panorama with three.js.

simple_panorama.coffee

$ ->
  class Panorama360
    constructor: (container) ->
      $container = $(container)
      source = $container.data("panorama")
      
      @camera = new THREE.PerspectiveCamera(70, $container.width() / $container.height(), 1, 1100)
      @camera.target = new THREE.Vector3(0, 0, 0)
      @scene = new THREE.Scene()
      sphereGeometry = new THREE.SphereGeometry(500, 60, 40)
      meshBasicMaterial = new THREE.MeshBasicMaterial(map: THREE.ImageUtils.loadTexture(source))
      
      mesh = new THREE.Mesh(sphereGeometry, meshBasicMaterial)
      mesh.scale.x = -1
  
      @scene.add mesh
      @renderer = new THREE.WebGLRenderer()
      @renderer.setSize $container.width(), $container.height()
      
      $container.append @renderer.domElement
  
      @lon = 0
      @lat = 0
      @phi = 0
      @theta = 0
      
      @isUserInteracting = false
      @onMouseDownMouseX = 0
      @onMouseDownMouseY = 0
      @onMouseDownLon = 0
      @onMouseDownLat = 0

      $container.on 'mousedown', (e)=> @startDragging(e)
      $(window).on 'mousemove', (e)=> @dragging(e)
      $(window).on 'mouseup', (e)=> @stopDragging(e)
      
    animate: ->
      @render()
      requestAnimationFrame => @animate()

    render: ->
      @lat = Math.max(-85, Math.min(85, @lat))
      @phi = THREE.Math.degToRad(90 - @lat)
      @theta = THREE.Math.degToRad(@lon)
      @camera.target.x = 500 * Math.sin(@phi) * Math.cos(@theta)
      @camera.target.y = 500 * Math.cos(@phi)
      @camera.target.z = 500 * Math.sin(@phi) * Math.sin(@theta)
      @camera.lookAt @camera.target
      @renderer.render @scene, @camera
  
    startDragging: (e) ->
      e.preventDefault()
      @isUserInteracting = true
      @onPointerDownPointerX = e.clientX
      @onPointerDownPointerY = e.clientY
      @onPointerDownLon = @lon
      @onPointerDownLat = @lat
  
    dragging: (e) ->
      if @isUserInteracting
        @lon = (@onPointerDownPointerX - e.clientX) * 0.1 + @onPointerDownLon
        @lat = (e.clientY - @onPointerDownPointerY) * 0.1 + @onPointerDownLat
        
    stopDragging: (e) ->
      @isUserInteracting = false
  
  if $('[data-panorama]').length > 0
    $('[data-panorama]').each (i,e)->
      panorama360 = new Panorama360 e
      panorama360.animate()

simple_panorama.min.js

(function(){$(function(){var e;e=function(){function e(e){var t,n,r,i,s,o=this;t=$(e),i=t.data("panorama"),this.camera=new THREE.PerspectiveCamera(70,t.width()/t.height(),1,1100),this.camera.target=new THREE.Vector3(0,0,0),this.scene=new THREE.Scene,s=new THREE.SphereGeometry(500,60,40),r=new THREE.MeshBasicMaterial({map:THREE.ImageUtils.loadTexture(i)}),n=new THREE.Mesh(s,r),n.scale.x=-1,this.scene.add(n),this.renderer=new THREE.WebGLRenderer,this.renderer.setSize(t.width(),t.height()),t.append(this.renderer.domElement),this.lon=0,this.lat=0,this.phi=0,this.theta=0,this.isUserInteracting=!1,this.onMouseDownMouseX=0,this.onMouseDownMouseY=0,this.onMouseDownLon=0,this.onMouseDownLat=0,t.on("mousedown",function(e){return o.startDragging(e)}),$(window).on("mousemove",function(e){return o.dragging(e)}),$(window).on("mouseup",function(e){return o.stopDragging(e)})}return e.prototype.animate=function(){var e=this;return this.render(),requestAnimationFrame(function(){return e.animate()})},e.prototype.render=function(){return this.lat=Math.max(-85,Math.min(85,this.lat)),this.phi=THREE.Math.degToRad(90-this.lat),this.theta=THREE.Math.degToRad(this.lon),this.camera.target.x=500*Math.sin(this.phi)*Math.cos(this.theta),this.camera.target.y=500*Math.cos(this.phi),this.camera.target.z=500*Math.sin(this.phi)*Math.sin(this.theta),this.camera.lookAt(this.camera.target),this.renderer.render(this.scene,this.camera)},e.prototype.startDragging=function(e){return e.preventDefault(),this.isUserInteracting=!0,this.onPointerDownPointerX=e.clientX,this.onPointerDownPointerY=e.clientY,this.onPointerDownLon=this.lon,this.onPointerDownLat=this.lat},e.prototype.dragging=function(e){if(this.isUserInteracting)return this.lon=(this.onPointerDownPointerX-e.clientX)*.1+this.onPointerDownLon,this.lat=(e.clientY-this.onPointerDownPointerY)*.1+this.onPointerDownLat},e.prototype.stopDragging=function(e){return this.isUserInteracting=!1},e}();if($("[data-panorama]").length>0)return $("[data-panorama]").each(function(t,n){var r;return r=new e(n),r.animate()})})}).call(this);