360 Viewer

HTML


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>get started with three.js</title>
</head>
<body>
 
<div id="stage"></div>
 
<!-- three.jsの読み込み -->
<script src="three.min.js"></script>
<!-- DeviceOrientationControls.jsの読み込み -->
<script src="DeviceOrientationControls.js"></script>
<!-- OrbitControls.jsの読み込み -->
<script src="OrbitControls.js"></script>

<!-- main.jsの読み込み -->
<script src="main3.js" ></script>


</body>
</html>

JavaScript



(function(){

  var width = window.innerWidth,
      height = window.innerHeight;

  //scene
  var scene = new THREE.Scene();

  //mesh
  var geometry = new THREE.SphereGeometry( 5, 60, 40 );
    geometry.scale( - 1, 1, 1 );

  var material = new THREE.MeshBasicMaterial( {
       map: THREE.ImageUtils.loadTexture( 'image5.jpg' )
  } );

  sphere = new THREE.Mesh( geometry, material );
  scene.add( sphere );

  //camera
  var camera = new THREE.PerspectiveCamera(75, width / height, 1, 1000);
  camera.position.set(0,0,1);
  camera.lookAt(sphere.position);

  //helper
  var axis = new THREE.AxisHelper(1000);
  axis.position.set(0,0,0);
  scene.add(axis);

  //render
  var renderer = new THREE.WebGLRenderer();
  renderer.setSize(width,height);
  renderer.setClearColor({color: 0x000000});
  document.getElementById('stage').appendChild(renderer.domElement);
  renderer.render(scene,camera);

  //control
//  var controls = new THREE.OrbitControls(camera,renderer.domElement);

  function render(){
    requestAnimationFrame(render);
//    sphere.rotation.y += 0.05 * Math.PI/180;
    //画面リサイズ対応
    window.addEventListener( 'resize', onWindowResize, false );
    window.addEventListener( 'wheel', onMouseWheel, false );
    renderer.render(scene,camera);
//    controls.update();
  }
  render();


  function onMouseWheel(e){
    camera.fov -= 5;
    camera.updateProjectionMatrix();
    cancelEvent(e);
  }
  function onWindowResize() {
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
    renderer.setSize( window.innerWidth, window.innerHeight );
  }


//イベント伝搬をキャンセル
function cancelEvent(e) {
  e.preventDefault();
  e.stopPropagation();
}



function handllerDroppedFile(e) {
  //単一ファイルの想定
  var file = e.dataTransfer.files[0];
  //dummy imgタグwww
  var img = document.createElement("img");
  var fileReader = new FileReader();
  fileReader.onload = function(e) {
    //一度、dummy imgのsrcにセットしてから
    //再利用します。
    //いきなりこうやるとsame origin error
    //material.map = new THREE.Texture(e.target.result);
    img.src = e.target.result;
    material.map = new THREE.Texture(img);
    material.map.needsUpdate = true;
  };
  //imageをdataURIで取得
  fileReader.readAsDataURL(file);
  //デフォルトのイベントキャンセルしないと
  //ブラウザでイメージが表示されてしまう
  cancelEvent(e);
}


//画面全体
var droppable = document.getElementById('stage');
//イベントハンドラ
droppable.addEventListener('dradenter', cancelEvent);
droppable.addEventListener('dragover', cancelEvent);
droppable.addEventListener('drop', handllerDroppedFile);


})();

python


#codeing:utf-8
#sudo ln /dev/null /dev/raw1394

import cv2
import numpy as np
import math

import sys

args = sys.argv

print (args[1])
img = cv2.imread(args[1])

map_x = np.zeros(img.shape[:2],np.float32)
map_y = np.zeros(img.shape[:2],np.float32)
width,height = img.shape[:2]

x_center = float(width) / 2
y_center = float(height) / 2
r_180 = float(height)/2
f = r_180

for j in xrange(height):
for i in xrange(width):

x = float(i) - x_center
y = float(j) - y_center

a = x*math.pi/2/r_180
b = y*math.pi/2/r_180

if math.sin(a) == 0:
if math.tan(b) > 0:
phi = math.pi / 2 
else:
phi = -math.pi / 2
else: 
phi = math.atan(math.tan(b) / math.sin(a))

theta = math.asin(math.sqrt(math.sin(b)**2+math.cos(b)**2*math.sin(a)**2))

# Stereographic
r = f * math.tan(theta/2)
# Equidistant
#r = 2 * f * theta / math.pi
# Equisolid Angle
#r = math.sqrt(2) * f * math.sin(theta / 2)
# Orthographic
#r = f * math.sin(theta)


if x >= 0:
x_src = r * math.cos(phi)
y_src = r * math.sin(phi)
else:
x_src = -r * math.cos(phi)
y_src = -r * math.sin(phi)

map_x.itemset((j,i),x_src + x_center)
map_y.itemset((j,i),y_src + y_center)

dst = cv2.remap(img,map_x,map_y,cv2.INTER_LINEAR)

print (args[2])
cv2.imwrite(args[2], dst)