Question

我希望像这个网址一样制作全景视图：https://s3-eu-west-1.amazonaws.com/canonliveevents/360/ny_expo_2015/index.html

我能够执行此操作http://threejs.org/examples/#css3d_panorama但我需要在图像上添加一些按钮以获取有关图像的信息。

anyhelp将会很感激，无论如何，谢谢

mycode：

<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        body{
            margin: 0;
        }
        canvas{
            position: absolute;
            width: 100%;
            height: 100%
        }
    </style>
    <script src="//cdnjs.cloudflare.com/ajax/libs/three.js/r69/three.min.js"></script>

 </head>
<body>
<div id="test" style="position: absolute; left: 0px; top: 0px; width: 884px; height: 657px; overflow: hidden; -moz-user-select: none; cursor: default;">
    <div id="img" stlye="position:absolute;left:0px;top:0px;">
    </div>
    <div id="button" style="position:absolute;left:0px;right:0px;width:100%;height:100%;overflow:hidden;">
        <div style="position: absolute; z-index: 2001; overflow: visible; cursor: pointer; pointer-events: auto; opacity: 1; transform-origin: 50% 50% 0px; background-image: url(&quot;https://s3-eu-west-1.amazonaws.com/canonliveevents/360/ny_expo_2015/skin/images/info.png&quot;); width: 100px; height: 100px; background-position: 0px 0px; background-size: 100px 200px; transform: translateZ(0px) translate(373.486px, 358.85px) translate(-50px, -50px) rotate(0deg) translate(0px, 0px) scale(0.5, 0.5) translate(0px, 0px);">

        </div>
    </div>
</div>
    <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);
        var obj = document.getElementById('test');
        obj.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>`

如何使用javascript，webgl制作全景视图360

0 个答案: