RICOH THETA 網頁全景處理

參考

360 Degree Interactive Panoramas And Virtual Tours In Html 5 - Multiple Browsers / 360 Easy - Complete Tutorial On 360 Degree Photography

<head>
    <script type="text/javascript" src="utilities.js"></script>

    <style type="text/css" media="screen">
        * { outline : none; -moz-outline : none -moz-mac-focusring; }
        #source-img	  { position: absolute; left: -999em; }
        canvas        	{ position: absolute; float:center; top: -90px; }
        #screen	        	{ position: absolute; float:center; top: 0px; }
        #screen div     { position: absolute; top: 0px; left: 300px; width: 630px; height: 815px;
            background: #fffff; }
        div#screen-overlay { position: absolute; top: 0px; left: 0px; margin-left: 0px; height: 715px;
            width: 630px; }
    </style>

    <script type="text/javascript">
        var YD = YAHOO.util.Dom,
                YE = YAHOO.util.Event;
        var canvas, ctx, img, widthSlider, scalingSlider, pw = 630, sf = .490, imgOffset = 0,
                stage, stagePos, stageDim, moveInterval, moveDirection, dist = 1, data = []; function init() {
            canvas = YD.get('cv');
            ctx = canvas.getContext('2d');
            canvas.width = 630;
            canvas.height = 815;
            canvas.style.width = '630px';
            canvas.style.height = '815px';
            stage = YD.get('screen-overlay');
            YE.on(stage, 'mousedown', startMoveBackground);
            YE.on(stage, 'mousemove', moveBackground);
            YE.on(stage, 'mouseout', stopMove);
            YE.on(stage, 'mouseup', stopMoveBackground);
            stagePos = YD.getXY(stage);
            stageDim = [ YD.getStyle(stage, 'width'), YD.getStyle(stage, 'height') ];
            img = YD.get('source-img');
            redraw(); }
        function startMoveBackground(e) {}
        function moveBackground(e) {
            dist = Math.abs(e.clientX - (parseInt(stageDim[0], 10) / 2 + stagePos[0])) / 3; var timeInt = 1;
            if(e.clientX - stagePos[0] > parseInt(stageDim[0], 10) / 2) {
                if(moveDirection === 'left' || !moveDirection) {
                    clearInterval(moveInterval);
                    moveInterval = setInterval(function() { moveRight(); }, timeInt); moveDirection = 'right'; }}
            else
            { if(moveDirection === 'right' || !moveDirection) {
                clearInterval(moveInterval);
                moveInterval = setInterval(function() { moveLeft(); }, timeInt);
                moveDirection = 'left'; }}}
        function stopMove() {
            clearInterval(moveInterval);
            moveDirection = null; }
        function moveRight() {
            imgOffset += dist;
            redraw(); }
        function moveLeft() {
            imgOffset -= dist;
            redraw(); }
        function stopMoveBackground(e) {}
        function precalculate(img, x, y, pixelWidth, scalingFactor, offset) {
            if(typeof offset === 'undefined') offset = 0;
            var h = img.height,
                    w = (img.width - 2) / 2.5;
            var polarity = (pixelWidth > 0) ? 1 : -1;
            var widthFactor = Math.abs(pixelWidth) / w;
            var delta = Math.abs(pixelWidth);
            var dHeight, dWidth, dy, dx;
            var constant = Math.pow(100000, scalingFactor); //380;
            var firstInc = ((delta / 2) * (delta / 2)) / constant;
            for(var n = 0, len = delta, inc = w / delta, incScale = (1 - scalingFactor) / delta; n < len; n++) {
                (function(m) {
                    sx = function(offset) { return ((inc * m + offset) >= 0) ? (inc * m + offset) % img.width : img.width +
                    ((inc * m + offset) % img.width) };})(n);
                sy = 0;
                sWidth = inc;
                sHeight = h;
                firstHalf = h + 100 - firstInc + (((len / 2) - n) * ((len / 2) - n)) / constant;
                secondHalf = h + 100 - firstInc + ((n - (len / 2)) * (n - (len / 2))) / constant;
                dHeight = (n < len / 2) ? firstHalf : secondHalf;
                dWidth = inc * widthFactor;
                dy = y + (h - dHeight) / 2;
                dx = x + (inc * n * widthFactor * polarity);
                data.push({
                    sx: sx,
                    sy: sy,
                    sWidth: sWidth,
                    sHeight: sHeight,
                    dx: dx,
                    dy: dy,
                    dWidth: dWidth,
                    dHeight: dHeight }); } }
        function redraw() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            displayImage(ctx, img, 0, 140, pw, sf, imgOffset); }
        function displayImage(ctx, img, x, y, pixelWidth, scalingFactor, offset) {
            if(data.length === 0) {
                precalculate(img, x, y, pixelWidth, scalingFactor, offset); }
            var slice, sx;
            for(var n = 0, len = data.length; n < len; n++) {
                slice = data[n];
                ctx.drawImage(img, slice.sx(offset), slice.sy, slice.sWidth, slice.sHeight,
                        slice.dx, slice.dy, slice.dWidth, slice.dHeight); }}
        YAHOO.util.Event.on(window, 'load', init);
    </script>
</head>

<body>
<canvas id="cv"></canvas>
<img src="panorama.jpg" id="source-img" />
<div id="screen-overlay"></div>
</body>

100

101

102

103

104

105

106

107

108

<head>

* { outline : none; -moz-outline : none -moz-mac-focusring; }

#source-img { position: absolute; left: -999em; }

canvas { position: absolute; float:center; top: -90px; }

#screen { position: absolute; float:center; top: 0px; }

#screen div { position: absolute; top: 0px; left: 300px; width: 630px; height: 815px;

background: #fffff; }

div#screen-overlay { position: absolute; top: 0px; left: 0px; margin-left: 0px; height: 715px;

width: 630px; }

</style>

var YD = YAHOO.util.Dom,

YE = YAHOO.util.Event;

var canvas, ctx, img, widthSlider, scalingSlider, pw = 630, sf = .490, imgOffset = 0,

stage, stagePos, stageDim, moveInterval, moveDirection, dist = 1, data = []; function init() {

canvas = YD.get('cv');

ctx = canvas.getContext('2d');

canvas.width = 630;

canvas.height = 815;

canvas.style.width = '630px';

canvas.style.height = '815px';

stage = YD.get('screen-overlay');

YE.on(stage, 'mousedown', startMoveBackground);

YE.on(stage, 'mousemove', moveBackground);

YE.on(stage, 'mouseout', stopMove);

YE.on(stage, 'mouseup', stopMoveBackground);

stagePos = YD.getXY(stage);

stageDim = [ YD.getStyle(stage, 'width'), YD.getStyle(stage, 'height') ];

img = YD.get('source-img');

redraw(); }

function startMoveBackground(e) {}

function moveBackground(e) {

dist = Math.abs(e.clientX - (parseInt(stageDim[0], 10) / 2 + stagePos[0])) / 3; var timeInt = 1;

if(e.clientX - stagePos[0] > parseInt(stageDim[0], 10) / 2) {

if(moveDirection === 'left' || !moveDirection) {

clearInterval(moveInterval);

moveInterval = setInterval(function() { moveRight(); }, timeInt); moveDirection = 'right'; }}

else

{ if(moveDirection === 'right' || !moveDirection) {

clearInterval(moveInterval);

moveInterval = setInterval(function() { moveLeft(); }, timeInt);

moveDirection = 'left'; }}}

function stopMove() {

clearInterval(moveInterval);

moveDirection = null; }

function moveRight() {

imgOffset += dist;

redraw(); }

function moveLeft() {

imgOffset -= dist;

redraw(); }

function stopMoveBackground(e) {}

function precalculate(img, x, y, pixelWidth, scalingFactor, offset) {

if(typeof offset === 'undefined') offset = 0;

var h = img.height,

w = (img.width - 2) / 2.5;

var polarity = (pixelWidth > 0) ? 1 : -1;

var widthFactor = Math.abs(pixelWidth) / w;

var delta = Math.abs(pixelWidth);

var dHeight, dWidth, dy, dx;

var constant = Math.pow(100000, scalingFactor); //380;

var firstInc = ((delta / 2) * (delta / 2)) / constant;

for(var n = 0, len = delta, inc = w / delta, incScale = (1 - scalingFactor) / delta; n < len; n++) {

(function(m) {

sx = function(offset) { return ((inc * m + offset) >= 0) ? (inc * m + offset) % img.width : img.width +

((inc * m + offset) % img.width) };})(n);

sy = 0;

sWidth = inc;

sHeight = h;

firstHalf = h + 100 - firstInc + (((len / 2) - n) * ((len / 2) - n)) / constant;

secondHalf = h + 100 - firstInc + ((n - (len / 2)) * (n - (len / 2))) / constant;

dHeight = (n < len / 2) ? firstHalf : secondHalf;

dWidth = inc * widthFactor;

dy = y + (h - dHeight) / 2;

dx = x + (inc * n * widthFactor * polarity);

data.push({

sx: sx,

sy: sy,

sWidth: sWidth,

sHeight: sHeight,

dx: dx,

dy: dy,

dWidth: dWidth,

dHeight: dHeight }); } }

function redraw() {

ctx.clearRect(0, 0, canvas.width, canvas.height);

displayImage(ctx, img, 0, 140, pw, sf, imgOffset); }

function displayImage(ctx, img, x, y, pixelWidth, scalingFactor, offset) {

if(data.length === 0) {

precalculate(img, x, y, pixelWidth, scalingFactor, offset); }

var slice, sx;

for(var n = 0, len = data.length; n < len; n++) {

slice = data[n];

ctx.drawImage(img, slice.sx(offset), slice.sy, slice.sWidth, slice.sHeight,

slice.dx, slice.dy, slice.dWidth, slice.dHeight); }}

YAHOO.util.Event.on(window, 'load', init);

</script>

</head>

<body>

</body>

720全景图

<!DOCTYPE html>
<html lang="en">
<head>
    <title>全景演示</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    <style>
        body {
            background-color: #000000;
            margin: 0px;
            overflow: hidden;
        }

        #info {
            position: absolute;
            top: 0px; width: 100%;
            color: #ffffff;
            padding: 5px;
            font-family:Monospace;
            font-size:13px;
            font-weight: bold;
            text-align:center;
        }

        a {
            color: #ffffff;
        }
    </style>

</head>
<body>

<div id="container"></div>
<div id="info">单张图片全景.</div>

<script type="text/javascript" src="http://sandbox.runjs.cn/uploads/rs/340/p1qwizuy/three.min.js"></script>

<script>
    var camera, scene, renderer;
    var fov = 70,
            texture_placeholder,
            isUserInteracting = false,
            onMouseDownMouseX = 0, onMouseDownMouseY = 0,
            lon = 0, onMouseDownLon = 0,
            lat = 0, onMouseDownLat = 0,
            phi = 0, theta = 0;

    init();
    animate();

    function init() {
        var container, mesh;
        container = document.getElementById( 'container' );
        camera = new THREE.PerspectiveCamera( fov, window.innerWidth / window.innerHeight, 1, 1100 );
        camera.target = new THREE.Vector3( 0, 0, 0 );
        scene = new THREE.Scene();

        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' ) } ) );
        mesh.scale.x = -1;
        scene.add( mesh );

        renderer = new THREE.WebGLRenderer();
        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( 'DOMMouseScroll', onDocumentMouseWheel, false);
        //
        window.addEventListener( 'resize', onWindowResize, false );
    }

    function onWindowResize() {
        camera.aspect = window.innerWidth / window.innerHeight;
        camera.updateProjectionMatrix();
        renderer.setSize( window.innerWidth, window.innerHeight );
    }

    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;
        }
    }

    function onDocumentMouseUp( event ) {
        isUserInteracting = false;
    }

    function onDocumentMouseWheel( event ) {
        // WebKit
        if ( event.wheelDeltaY ) {
            fov -= event.wheelDeltaY * 0.05;
            // Opera / Explorer 9

        } else if ( event.wheelDelta ) {
            fov -= event.wheelDelta * 0.05;
            // Firefox

        } else if ( event.detail ) {
            fov += event.detail * 1.0;
        }

        camera.projectionMatrix.makePerspective( fov, window.innerWidth / window.innerHeight, 1, 1100 );
        render();
    }

    function animate() {
        requestAnimationFrame( animate );
        render();
    }

    function render() {
        lat = Math.max( - 85, Math.min( 85, lat ) );
        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.lookAt( camera.target );

        /*
         // distortion
         camera.position.x = - camera.target.x;
         camera.position.y = - camera.target.y;
         camera.position.z = - camera.target.z;
         */

        renderer.render( scene, camera );
    }
</script>
</body>
</html>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

<!DOCTYPE html>

<head>

<style>

body {

background-color: #000000;

margin: 0px;

overflow: hidden;

}

#info {

position: absolute;

top: 0px; width: 100%;

color: #ffffff;

padding: 5px;

font-family:Monospace;

font-size:13px;

font-weight: bold;

text-align:center;

}

a {

color: #ffffff;

}

</style>

</head>

<body>

<div id="info">单张图片全景.</div>

var camera, scene, renderer;

var fov = 70,

texture_placeholder,

isUserInteracting = false,

onMouseDownMouseX = 0, onMouseDownMouseY = 0,

lon = 0, onMouseDownLon = 0,

lat = 0, onMouseDownLat = 0,

phi = 0, theta = 0;

init();

animate();

function init() {

var container, mesh;

container = document.getElementById( 'container' );

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

camera.target = new THREE.Vector3( 0, 0, 0 );

scene = new THREE.Scene();

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' ) } ) );

mesh.scale.x = -1;

scene.add( mesh );

renderer = new THREE.WebGLRenderer();

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( 'DOMMouseScroll', onDocumentMouseWheel, false);

window.addEventListener( 'resize', onWindowResize, false );

}

function onWindowResize() {

camera.aspect = window.innerWidth / window.innerHeight;

camera.updateProjectionMatrix();

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

}

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;

}

function onDocumentMouseUp( event ) {

isUserInteracting = false;

}

function onDocumentMouseWheel( event ) {

// WebKit

if ( event.wheelDeltaY ) {

fov -= event.wheelDeltaY * 0.05;

// Opera / Explorer 9

} else if ( event.wheelDelta ) {

fov -= event.wheelDelta * 0.05;

// Firefox

} else if ( event.detail ) {

fov += event.detail * 1.0;

}

camera.projectionMatrix.makePerspective( fov, window.innerWidth / window.innerHeight, 1, 1100 );

render();

}

function animate() {

requestAnimationFrame( animate );

render();

}

function render() {

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

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.lookAt( camera.target );

// distortion

camera.position.x = - camera.target.x;

camera.position.y = - camera.target.y;

camera.position.z = - camera.target.z;

renderer.render( scene, camera );

}

</script>

</body>

</html>

2,749 total views, 2 views today

RICOH THETA 網頁全景處理

720全景图

Related Post

PWA - LINE Notify 結束服務後，有網站的真正免費解決方案

PWA 漸進式網路應用程式 - 2. 使用 FCM 推播通知

PWA 漸進式網路應用程式 - 1. 加到主畫面、安裝