4

I'm taking 360-degree pictures.

I want to share them.

I don't want people viewing them to install any apps / any software.

Just mine webserver running ___ and me sharing a private link.

I've found this - https://www.quora.com/Whats-the-best-way-to-share-a-360-degree-panoramic-photo - with some suggestions but maybe in 2016 there is a better way?

Improve this question

3 Answers 3

Reset to default
4

In most modern web browsers you can have a 360 degree panorama viewer with just a little JavaScript in a HTML5 WebGL web page.

There is a good example here which makes use of the three.js open source library.

The code from the above page

<html>
    <head>
        <style>
            body{
                margin: 0;
            }
            canvas{
                width: 100%;
                height: 100%
            }
        </style>
        <script src="//cdnjs.cloudflare.com/ajax/libs/three.js/r69/three.min.js"></script>

    </head>
    <body>
        <script>

            var manualControl = false;
            var longitude = 0;
            var latitude = 0;
            var savedX;
            var savedY;
            var savedLongitude;
            var savedLatitude;

            // panoramas background
            var panoramasArray = ["01.jpg","02.jpg","03.jpg","04.jpg","05.jpg","06.jpg"];
            var panoramaNumber = Math.floor(Math.random()*panoramasArray.length);

            // setting up the renderer
            renderer = new THREE.WebGLRenderer();
            renderer.setSize(window.innerWidth, window.innerHeight);
            document.body.appendChild(renderer.domElement);

            // creating a new scene
            var scene = new THREE.Scene();

            // adding a camera
            var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 1000);
            camera.target = new THREE.Vector3(0, 0, 0);

            // creation of a big sphere geometry
            var sphere = new THREE.SphereGeometry(100, 100, 40);
            sphere.applyMatrix(new THREE.Matrix4().makeScale(-1, 1, 1));

            // creation of the sphere material
            var sphereMaterial = new THREE.MeshBasicMaterial();
            sphereMaterial.map = THREE.ImageUtils.loadTexture(panoramasArray[panoramaNumber])

            // geometry + material = mesh (actual object)
            var sphereMesh = new THREE.Mesh(sphere, sphereMaterial);
            scene.add(sphereMesh);

            // listeners
            document.addEventListener("mousedown", onDocumentMouseDown, false);
            document.addEventListener("mousemove", onDocumentMouseMove, false);
            document.addEventListener("mouseup", onDocumentMouseUp, false);

               render();

               function render(){

                requestAnimationFrame(render);

                if(!manualControl){
                    longitude += 0.1;
                }

                // limiting latitude from -85 to 85 (cannot point to the sky or under your feet)
                    latitude = Math.max(-85, Math.min(85, latitude));

                // moving the camera according to current latitude (vertical movement) and longitude (horizontal movement)
                camera.target.x = 500 * Math.sin(THREE.Math.degToRad(90 - latitude)) * Math.cos(THREE.Math.degToRad(longitude));
                camera.target.y = 500 * Math.cos(THREE.Math.degToRad(90 - latitude));
                camera.target.z = 500 * Math.sin(THREE.Math.degToRad(90 - latitude)) * Math.sin(THREE.Math.degToRad(longitude));
                camera.lookAt(camera.target);

                // calling again render function
                renderer.render(scene, camera);

            }

            // when the mouse is pressed, we switch to manual control and save current coordinates
            function onDocumentMouseDown(event){

                event.preventDefault();

                manualControl = true;

                savedX = event.clientX;
                savedY = event.clientY;

                savedLongitude = longitude;
                savedLatitude = latitude;

            }

            // when the mouse moves, if in manual contro we adjust coordinates
            function onDocumentMouseMove(event){

                if(manualControl){
                    longitude = (savedX - event.clientX) * 0.1 + savedLongitude;
                    latitude = (event.clientY - savedY) * 0.1 + savedLatitude;
                }

            }

            // when the mouse is released, we turn manual control off
            function onDocumentMouseUp(event){

                manualControl = false;

            }

            // pressing a key (actually releasing it) changes the texture map
            document.onkeyup = function(event){

                panoramaNumber = (panoramaNumber + 1) % panoramasArray.length
                sphereMaterial.map = THREE.ImageUtils.loadTexture(panoramasArray[panoramaNumber])

                }

        </script>
    </body>
</html>
Improve this answer
1
1

It looks to me like this is early stage (because of the whole variety of debug messages) and it also uses THREE.js

Improve this answer
0

You can use https://www.ideaspacevr.org - a self-hosted open source php software with 360 degrees panorama themes

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.