【实例简介】利用html5实现的360度全景图浏览(带天地)

【实例截图】

【核心代码】

var camera, scene, renderer;

var texture_placeholder,

isUserInteracting = false,

onMouseDownMouseX = 0, onMouseDownMouseY = 0,

lon = 90, onMouseDownLon = 0,

lat = 0, onMouseDownLat = 0,

phi = 0, theta = 0,

target = new THREE.Vector3();

init();

function init() {

var container, mesh;

container = document.getElementById( 'container' );

camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 1100 );

scene = new THREE.Scene();

scene.add( camera );

texture_placeholder = document.createElement( 'canvas' );

texture_placeholder.width = 128;

texture_placeholder.height = 128;

var context = texture_placeholder.getContext( '2d' );

context.fillStyle = 'rgb( 200, 200, 200 )';

context.fillRect( 0, 0, texture_placeholder.width, texture_placeholder.height );

var materials = [

loadTexture( 'images/textures/cube/skybox/px.jpg' ), // right

loadTexture( 'images/textures/cube/skybox/nx.jpg' ), // left

loadTexture( 'images/textures/cube/skybox/py.jpg' ), // top

loadTexture( 'images/textures/cube/skybox/ny.jpg' ), // bottom

loadTexture( 'images/textures/cube/skybox/pz.jpg' ), // back

loadTexture( 'images/textures/cube/skybox/nz.jpg' )  // front

];

mesh = new THREE.Mesh( new THREE.CubeGeometry( 300, 300, 300, 7, 7, 7, materials ), new THREE.MeshFaceMaterial() );

mesh.scale.x = - 1;

scene.add( mesh );

renderer = new THREE.CanvasRenderer();

renderer.setSize( window.innerWidth, window.innerHeight );

container.appendChild( renderer.domElement );

document.addEventListener( 'mousedown', onDocumentMouseDown, false );

document.addEventListener( 'mousemove', onDocumentMouseMove, false );

document.addEventListener( 'mouseup', onDocumentMouseUp, false );

document.addEventListener( 'mousewheel', onDocumentMouseWheel, false );

document.addEventListener( 'touchstart', onDocumentTouchStart, false );

document.addEventListener( 'touchmove', onDocumentTouchMove, false );

}

function loadTexture( path ) {

var texture = new THREE.Texture( texture_placeholder );

var material = new THREE.MeshBasicMaterial( { map: texture, overdraw: true } );

var image = new Image();

image.onload = function () {

texture.needsUpdate = true;

material.map.image = this;

render();

};

image.src = path;

return material;

}

function onDocumentMouseDown( event ) {

event.preventDefault();

isUserInteracting = true;

onPointerDownPointerX = event.clientX;

onPointerDownPointerY = event.clientY;

onPointerDownLon = lon;

onPointerDownLat = lat;

}

function onDocumentMouseMove( event ) {

if ( isUserInteracting ) {

lon = ( onPointerDownPointerX - event.clientX ) * 0.1 onPointerDownLon;

lat = ( event.clientY - onPointerDownPointerY ) * 0.1 onPointerDownLat;

render();

}

}

function onDocumentMouseUp( event ) {

isUserInteracting = false;

render();

}

function onDocumentMouseWheel( event ) {

camera.fov -= event.wheelDeltaY * 0.05;

camera.updateProjectionMatrix();

render();

}

function onDocumentTouchStart( event ) {

if ( event.touches.length == 1 ) {

event.preventDefault();

onPointerDownPointerX = event.touches[ 0 ].pageX;

onPointerDownPointerY = event.touches[ 0 ].pageY;

onPointerDownLon = lon;

onPointerDownLat = lat;

}

}

function onDocumentTouchMove( event ) {

if ( event.touches.length == 1 ) {

event.preventDefault();

lon = ( onPointerDownPointerX - event.touches[0].pageX ) * 0.1 onPointerDownLon;

lat = ( event.touches[0].pageY - onPointerDownPointerY ) * 0.1 onPointerDownLat;

render();

}

}

function render() {

lat = Math.max( - 85, Math.min( 85, lat ) );

phi = ( 90 - lat ) * Math.PI / 180;

theta = lon * Math.PI / 180;

target.x = 500 * Math.sin( phi ) * Math.cos( theta );

target.y = 500 * Math.cos( phi );

target.z = 500 * Math.sin( phi ) * Math.sin( theta );

camera.lookAt( target );

renderer.render( scene, camera );

}