\u53c3\u8003<\/p>\n
--<\/p>\n
360 Degree Interactive Panoramas And Virtual Tours In Html 5 - Multiple Browsers \/ 360 Easy - Complete Tutorial On 360 Degree Photography<\/p>\n
<head>\r\n <script type=\"text\/javascript\" src=\"utilities.js\"><\/script>\r\n\r\n <style type=\"text\/css\" media=\"screen\">\r\n * { outline : none; -moz-outline : none -moz-mac-focusring; }\r\n #source-img\t { position: absolute; left: -999em; }\r\n canvas \t{ position: absolute; float:center; top: -90px; }\r\n #screen\t \t{ position: absolute; float:center; top: 0px; }\r\n #screen div { position: absolute; top: 0px; left: 300px; width: 630px; height: 815px;\r\n background: #fffff; }\r\n div#screen-overlay { position: absolute; top: 0px; left: 0px; margin-left: 0px; height: 715px;\r\n width: 630px; }\r\n <\/style>\r\n\r\n <script type=\"text\/javascript\">\r\n var YD = YAHOO.util.Dom,\r\n YE = YAHOO.util.Event;\r\n var canvas, ctx, img, widthSlider, scalingSlider, pw = 630, sf = .490, imgOffset = 0,\r\n stage, stagePos, stageDim, moveInterval, moveDirection, dist = 1, data = []; function init() {\r\n canvas = YD.get('cv');\r\n ctx = canvas.getContext('2d');\r\n canvas.width = 630;\r\n canvas.height = 815;\r\n canvas.style.width = '630px';\r\n canvas.style.height = '815px';\r\n stage = YD.get('screen-overlay');\r\n YE.on(stage, 'mousedown', startMoveBackground);\r\n YE.on(stage, 'mousemove', moveBackground);\r\n YE.on(stage, 'mouseout', stopMove);\r\n YE.on(stage, 'mouseup', stopMoveBackground);\r\n stagePos = YD.getXY(stage);\r\n stageDim = [ YD.getStyle(stage, 'width'), YD.getStyle(stage, 'height') ];\r\n img = YD.get('source-img');\r\n redraw(); }\r\n function startMoveBackground(e) {}\r\n function moveBackground(e) {\r\n dist = Math.abs(e.clientX - (parseInt(stageDim[0], 10) \/ 2 + stagePos[0])) \/ 3; var timeInt = 1;\r\n if(e.clientX - stagePos[0] > parseInt(stageDim[0], 10) \/ 2) {\r\n if(moveDirection === 'left' || !moveDirection) {\r\n clearInterval(moveInterval);\r\n moveInterval = setInterval(function() { moveRight(); }, timeInt); moveDirection = 'right'; }}\r\n else\r\n { if(moveDirection === 'right' || !moveDirection) {\r\n clearInterval(moveInterval);\r\n moveInterval = setInterval(function() { moveLeft(); }, timeInt);\r\n moveDirection = 'left'; }}}\r\n function stopMove() {\r\n clearInterval(moveInterval);\r\n moveDirection = null; }\r\n function moveRight() {\r\n imgOffset += dist;\r\n redraw(); }\r\n function moveLeft() {\r\n imgOffset -= dist;\r\n redraw(); }\r\n function stopMoveBackground(e) {}\r\n function precalculate(img, x, y, pixelWidth, scalingFactor, offset) {\r\n if(typeof offset === 'undefined') offset = 0;\r\n var h = img.height,\r\n w = (img.width - 2) \/ 2.5;\r\n var polarity = (pixelWidth > 0) ? 1 : -1;\r\n var widthFactor = Math.abs(pixelWidth) \/ w;\r\n var delta = Math.abs(pixelWidth);\r\n var dHeight, dWidth, dy, dx;\r\n var constant = Math.pow(100000, scalingFactor); \/\/380;\r\n var firstInc = ((delta \/ 2) * (delta \/ 2)) \/ constant;\r\n for(var n = 0, len = delta, inc = w \/ delta, incScale = (1 - scalingFactor) \/ delta; n < len; n++) {\r\n (function(m) {\r\n sx = function(offset) { return ((inc * m + offset) >= 0) ? (inc * m + offset) % img.width : img.width +\r\n ((inc * m + offset) % img.width) };})(n);\r\n sy = 0;\r\n sWidth = inc;\r\n sHeight = h;\r\n firstHalf = h + 100 - firstInc + (((len \/ 2) - n) * ((len \/ 2) - n)) \/ constant;\r\n secondHalf = h + 100 - firstInc + ((n - (len \/ 2)) * (n - (len \/ 2))) \/ constant;\r\n dHeight = (n < len \/ 2) ? firstHalf : secondHalf;\r\n dWidth = inc * widthFactor;\r\n dy = y + (h - dHeight) \/ 2;\r\n dx = x + (inc * n * widthFactor * polarity);\r\n data.push({\r\n sx: sx,\r\n sy: sy,\r\n sWidth: sWidth,\r\n sHeight: sHeight,\r\n dx: dx,\r\n dy: dy,\r\n dWidth: dWidth,\r\n dHeight: dHeight }); } }\r\n function redraw() {\r\n ctx.clearRect(0, 0, canvas.width, canvas.height);\r\n displayImage(ctx, img, 0, 140, pw, sf, imgOffset); }\r\n function displayImage(ctx, img, x, y, pixelWidth, scalingFactor, offset) {\r\n if(data.length === 0) {\r\n precalculate(img, x, y, pixelWidth, scalingFactor, offset); }\r\n var slice, sx;\r\n for(var n = 0, len = data.length; n < len; n++) {\r\n slice = data[n];\r\n ctx.drawImage(img, slice.sx(offset), slice.sy, slice.sWidth, slice.sHeight,\r\n slice.dx, slice.dy, slice.dWidth, slice.dHeight); }}\r\n YAHOO.util.Event.on(window, 'load', init);\r\n <\/script>\r\n<\/head>\r\n\r\n<body>\r\n<canvas id=\"cv\"><\/canvas>\r\n<img src=\"panorama.jpg\" id=\"source-img\" \/>\r\n<div id=\"screen-overlay\"><\/div>\r\n<\/body><\/pre>\n--<\/p>\n
720\u5168\u666f\u56fe<\/h2>\n<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n <title>\u5168\u666f\u6f14\u793a<\/title>\r\n <meta charset=\"utf-8\">\r\n <meta name=\"viewport\" content=\"width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0\">\r\n <style>\r\n body {\r\n background-color: #000000;\r\n margin: 0px;\r\n overflow: hidden;\r\n }\r\n\r\n #info {\r\n position: absolute;\r\n top: 0px; width: 100%;\r\n color: #ffffff;\r\n padding: 5px;\r\n font-family:Monospace;\r\n font-size:13px;\r\n font-weight: bold;\r\n text-align:center;\r\n }\r\n\r\n a {\r\n color: #ffffff;\r\n }\r\n <\/style>\r\n\r\n<\/head>\r\n<body>\r\n\r\n<div id=\"container\"><\/div>\r\n<div id=\"info\">\u5355\u5f20\u56fe\u7247\u5168\u666f.<\/div>\r\n\r\n<script type=\"text\/javascript\" src=\"http:\/\/sandbox.runjs.cn\/uploads\/rs\/340\/p1qwizuy\/three.min.js\"><\/script>\r\n\r\n<script>\r\n var camera, scene, renderer;\r\n var fov = 70,\r\n texture_placeholder,\r\n isUserInteracting = false,\r\n onMouseDownMouseX = 0, onMouseDownMouseY = 0,\r\n lon = 0, onMouseDownLon = 0,\r\n lat = 0, onMouseDownLat = 0,\r\n phi = 0, theta = 0;\r\n\r\n init();\r\n animate();\r\n\r\n function init() {\r\n var container, mesh;\r\n container = document.getElementById( 'container' );\r\n camera = new THREE.PerspectiveCamera( fov, window.innerWidth \/ window.innerHeight, 1, 1100 );\r\n camera.target = new THREE.Vector3( 0, 0, 0 );\r\n scene = new THREE.Scene();\r\n\r\n mesh = new THREE.Mesh( new THREE.SphereGeometry( 500, 60, 40 ), new THREE.MeshBasicMaterial( { map: THREE.ImageUtils.loadTexture( 'http:\/\/sandbox.runjs.cn\/uploads\/rs\/232\/bpgpj5uv\/123.jpg' ) } ) );\r\n mesh.scale.x = -1;\r\n scene.add( mesh );\r\n\r\n renderer = new THREE.WebGLRenderer();\r\n renderer.setSize( window.innerWidth, window.innerHeight );\r\n\r\n container.appendChild( renderer.domElement );\r\n\r\n document.addEventListener( 'mousedown', onDocumentMouseDown, false );\r\n document.addEventListener( 'mousemove', onDocumentMouseMove, false );\r\n document.addEventListener( 'mouseup', onDocumentMouseUp, false );\r\n document.addEventListener( 'mousewheel', onDocumentMouseWheel, false );\r\n document.addEventListener( 'DOMMouseScroll', onDocumentMouseWheel, false);\r\n \/\/\r\n window.addEventListener( 'resize', onWindowResize, false );\r\n }\r\n\r\n function onWindowResize() {\r\n camera.aspect = window.innerWidth \/ window.innerHeight;\r\n camera.updateProjectionMatrix();\r\n renderer.setSize( window.innerWidth, window.innerHeight );\r\n }\r\n\r\n function onDocumentMouseDown( event ) {\r\n event.preventDefault();\r\n isUserInteracting = true;\r\n onPointerDownPointerX = event.clientX;\r\n onPointerDownPointerY = event.clientY;\r\n onPointerDownLon = lon;\r\n onPointerDownLat = lat;\r\n }\r\n\r\n function onDocumentMouseMove( event ) {\r\n if ( isUserInteracting ) {\r\n lon = ( onPointerDownPointerX - event.clientX ) * 0.1 + onPointerDownLon;\r\n lat = ( event.clientY - onPointerDownPointerY ) * 0.1 + onPointerDownLat;\r\n }\r\n }\r\n\r\n function onDocumentMouseUp( event ) {\r\n isUserInteracting = false;\r\n }\r\n\r\n function onDocumentMouseWheel( event ) {\r\n \/\/ WebKit\r\n if ( event.wheelDeltaY ) {\r\n fov -= event.wheelDeltaY * 0.05;\r\n \/\/ Opera \/ Explorer 9\r\n\r\n } else if ( event.wheelDelta ) {\r\n fov -= event.wheelDelta * 0.05;\r\n \/\/ Firefox\r\n\r\n } else if ( event.detail ) {\r\n fov += event.detail * 1.0;\r\n }\r\n\r\n camera.projectionMatrix.makePerspective( fov, window.innerWidth \/ window.innerHeight, 1, 1100 );\r\n render();\r\n }\r\n\r\n function animate() {\r\n requestAnimationFrame( animate );\r\n render();\r\n }\r\n\r\n function render() {\r\n lat = Math.max( - 85, Math.min( 85, lat ) );\r\n phi = THREE.Math.degToRad( 90 - lat );\r\n theta = THREE.Math.degToRad( lon );\r\n\r\n camera.target.x = 500 * Math.sin( phi ) * Math.cos( theta );\r\n camera.target.y = 500 * Math.cos( phi );\r\n camera.target.z = 500 * Math.sin( phi ) * Math.sin( theta );\r\n\r\n camera.lookAt( camera.target );\r\n\r\n \/*\r\n \/\/ distortion\r\n camera.position.x = - camera.target.x;\r\n camera.position.y = - camera.target.y;\r\n camera.position.z = - camera.target.z;\r\n *\/\r\n\r\n renderer.render( scene, camera );\r\n }\r\n<\/script>\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n--<\/p>\n
<\/div>\n