|
|
@@ -1,7 +1,7 @@
|
|
|
<!DOCTYPE html>
|
|
|
<html lang="en">
|
|
|
<head>
|
|
|
- <title>three.js webgl - equirectangular video panorama demo</title>
|
|
|
+ <title>three.js webgl - equirectangular video panorama</title>
|
|
|
<meta charset="utf-8">
|
|
|
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
|
|
|
<style>
|
|
|
@@ -42,7 +42,8 @@
|
|
|
onMouseDownMouseX = 0, onMouseDownMouseY = 0,
|
|
|
lon = 0, onMouseDownLon = 0,
|
|
|
lat = 0, onMouseDownLat = 0,
|
|
|
- phi = 0, theta = 0;
|
|
|
+ phi = 0, theta = 0,
|
|
|
+ distance = 500;
|
|
|
|
|
|
init();
|
|
|
animate();
|
|
|
@@ -58,7 +59,7 @@
|
|
|
|
|
|
scene = new THREE.Scene();
|
|
|
|
|
|
- var geometry = new THREE.SphereGeometry( 500, 60, 40 );
|
|
|
+ var geometry = new THREE.SphereBufferGeometry( 500, 60, 40 );
|
|
|
geometry.scale( - 1, 1, 1 );
|
|
|
|
|
|
var video = document.createElement( 'video' );
|
|
|
@@ -70,6 +71,7 @@
|
|
|
|
|
|
var texture = new THREE.VideoTexture( video );
|
|
|
texture.minFilter = THREE.LinearFilter;
|
|
|
+ texture.format = THREE.RGBFormat;
|
|
|
|
|
|
var material = new THREE.MeshBasicMaterial( { map : texture } );
|
|
|
|
|
|
@@ -140,24 +142,22 @@
|
|
|
|
|
|
if ( event.wheelDeltaY ) {
|
|
|
|
|
|
- camera.fov -= event.wheelDeltaY * 0.05;
|
|
|
+ distance -= event.wheelDeltaY * 0.05;
|
|
|
|
|
|
// Opera / Explorer 9
|
|
|
|
|
|
} else if ( event.wheelDelta ) {
|
|
|
|
|
|
- camera.fov -= event.wheelDelta * 0.05;
|
|
|
+ distance -= event.wheelDelta * 0.05;
|
|
|
|
|
|
// Firefox
|
|
|
|
|
|
} else if ( event.detail ) {
|
|
|
|
|
|
- camera.fov += event.detail * 1.0;
|
|
|
+ distance += event.detail * 1.0;
|
|
|
|
|
|
}
|
|
|
|
|
|
- camera.updateProjectionMatrix();
|
|
|
-
|
|
|
}
|
|
|
|
|
|
function animate() {
|
|
|
@@ -173,9 +173,9 @@
|
|
|
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.position.x = distance * Math.sin( phi ) * Math.cos( theta );
|
|
|
+ camera.position.y = distance * Math.cos( phi );
|
|
|
+ camera.position.z = distance * Math.sin( phi ) * Math.sin( theta );
|
|
|
|
|
|
camera.lookAt( camera.target );
|
|
|
|
Mr.doob