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)