css3D 全景圖 - 含有定位的文字Label

查看全景效果 

完整代碼

<style type="text/css">
    body {
        margin: 0px;
    }

    .canvasWrap {
        width: 100%;
        height: 600px;
        background: gray;
    }

    .label {
        margin-top: -20px;
        color: red;
        font-size: 12px;
        border: 1px solid #fff;
        padding: 3px 5px;
        background: rgba(0, 0, 0, 0.6)
    }
    </style>

    <div class="container aboutMe">
        <p>移動鼠標查看全景圖</p>
        <div class="canvasWrap" id="canvasWrap" style="margin-bottom:15px;"></div>
    </div>

    <script src="../plugins/jQuery/jQuery-2.1.4.min.js"></script>
    <script src="../bootstrap/js/bootstrap.js"></script>
    <script src="../dist/js/three.js"></script>
    <script src="../dist/js/CSS3DRenderer.js"></script>

    <script>
    var camera, scene, renderer;
    var geometry, material, mesh;
    var sprite;

    //相機聚焦點
    var target = new THREE.Vector3();
    // lon:經度（水平方向），Lat:維度（垂直方向）
    var lon = 90,
        lat = 0;
    // 能夠看到當theta=0時，是三維圖型的正面（X軸的正面），即平視，當theta>0不斷增大（如10，20，30）時，能夠看到三維圖型從右向左轉，也能夠理解爲視線從左向右移動；
    // 當phi=10，20，30時，能夠看到三維圖形從上向下移動，也能夠理解爲咱們的視線是從正面向上移動；
    var phi = 0,
        theta = 0;

    var touchX, touchY;
    var width, height;
    init();
    animate();

    function init() {
        var container = document.getElementById('canvasWrap')
        width = document.getElementById('canvasWrap').clientWidth;
        height = document.getElementById('canvasWrap').clientHeight;
        camera = new THREE.PerspectiveCamera(75, width / height, 1, 1000);

        console.log(camera)
        scene = new THREE.Scene();

        var sides = [{
                url: '../dist/img/Bridge2/posx.jpg', //右圖
                position: [-256, 0, 0],
                rotation: [0, Math.PI / 2, 0]
            },
            {
                url: '../dist/img/Bridge2/negx.jpg', //左圖
                position: [256, 0, 0],
                rotation: [0, -Math.PI / 2, 0]
            },
            {
                url: '../dist/img/Bridge2/posy.jpg', //上圖
                position: [0, 256, 0],
                rotation: [Math.PI / 2, 0, Math.PI]
                //rotation: [ -Math.PI / 2, 0, 0 ]
            },
            {
                url: '../dist/img/Bridge2/negy.jpg', //下圖
                position: [0, -256, 0],
                rotation: [-Math.PI / 2, 0, Math.PI]
            },
            {
                url: '../dist/img/Bridge2/posz.jpg', //前圖
                position: [0, 0, 256],
                rotation: [0, Math.PI, 0]
            },
            {
                url: '../dist/img/Bridge2/negz.jpg', //後圖
                position: [0, 0, -256],
                rotation: [0, 0, 0]
            }
        ];

        for (var i = 0; i < sides.length; i++) {

            var side = sides[i];

            var element = document.createElement('img');
            element.width = 514; // 2 pixels extra to close the gap.1像素也能夠
            element.src = side.url;

            var object = new THREE.CSS3DObject(element);
            object.position.fromArray(side.position);
            object.rotation.fromArray(side.rotation);
            scene.add(object);

        }
        var clickHander = function() {
            alert(this.innerHTML)
        }
        var earthDiv = document.createElement("div");
        earthDiv.className = "label";
        earthDiv.innerHTML = "<div><span>front11</span></div>"

        /*var spanDiv = document.createElement("span");
        spanDiv.innerHTML = "font";
        earthDiv.appendChild(spanDiv)*/
        //earthDiv.style.marginTop = "-1em";
        earthLabel = new THREE.CSS3DObject(earthDiv);
        earthLabel.position.set(0, 0, 252);
        earthLabel.rotation.set(0, Math.PI, 0);
        scene.add(earthLabel);
        earthDiv.onclick = clickHander;

        var rightDiv = document.createElement("div");
        rightDiv.className = "label";
        rightDiv.textContent = "right";
        //earthDiv.style.marginTop = "-1em";
        earthLabe2 = new THREE.CSS3DObject(rightDiv);
        earthLabe2.position.set(-252, -50, 0);
        earthLabe2.rotation.set(0, Math.PI / 2, 0);
        scene.add(earthLabe2);
        rightDiv.onclick = clickHander;

        var leftDiv = document.createElement("div");
        leftDiv.className = "label";
        leftDiv.textContent = "Left";
        //earthDiv.style.marginTop = "-1em";
        earthLabe3 = new THREE.CSS3DObject(leftDiv);
        earthLabe3.position.set(252, 0, 0);
        earthLabe3.rotation.set(0, -Math.PI / 2, 0);
        scene.add(earthLabe3);
        leftDiv.onclick = clickHander;

        var topDiv = document.createElement("div");
        topDiv.className = "label";
        topDiv.textContent = "top";
        //earthDiv.style.marginTop = "-1em";
        earthLabe4 = new THREE.CSS3DObject(topDiv);
        earthLabe4.position.set(0, 252, 0);
        earthLabe4.rotation.set(Math.PI / 2, 0, Math.PI);
        scene.add(earthLabe4);
        topDiv.onclick = clickHander;

        var bottomDiv = document.createElement("div");
        bottomDiv.className = "label";
        bottomDiv.textContent = "bottom1";
        //earthDiv.style.marginTop = "-1em";
        earthLabe5 = new THREE.CSS3DObject(bottomDiv);
        earthLabe5.position.set(0, -235, 0);
        earthLabe5.rotation.set(-Math.PI / 2, 0, Math.PI);
        scene.add(earthLabe5);

        var backDiv = document.createElement("div");
        backDiv.className = "label";
        backDiv.textContent = "Back";
        //earthDiv.style.marginTop = "-1em";
        earthLabe6 = new THREE.CSS3DObject(backDiv);
        earthLabe6.position.set(0, 0, -252);
        earthLabe6.rotation.set(0, 0, 0);
        scene.add(earthLabe6);


        //width = document.getElementById('canvas-frame').clientWidth;
        //height = document.getElementById('canvas-frame').clientHeight;
        renderer = new THREE.CSS3DRenderer();
        renderer.setSize(width, height);
        container.appendChild(renderer.domElement);

        //


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

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

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

    }

    function onWindowResize() {

        camera.aspect = width / height;
        camera.updateProjectionMatrix();
        renderer.setSize(width, height);

    }

    function onDocumentMouseDown(event) {

        event.preventDefault();

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

    }

    function onDocumentMouseMove(event) {

        var movementX = event.movementX || event.mozMovementX || event.webkitMovementX || 0;
        var movementY = event.movementY || event.mozMovementY || event.webkitMovementY || 0;
        console.log(movementX)
        lon -= movementX * 0.1;

        lat += movementY * 0.1;

    }

    function onDocumentMouseUp(event) {

        document.removeEventListener('mousemove', onDocumentMouseMove);
        document.removeEventListener('mouseup', onDocumentMouseUp);

    }

    function onDocumentMouseWheel(event) {

        var fov = camera.fov + event.deltaY * 0.05;

        camera.fov = THREE.Math.clamp(fov, 10, 75);

        camera.updateProjectionMatrix();

    }

    function onDocumentTouchStart(event) {

        event.preventDefault();

        var touch = event.touches[0];

        touchX = touch.screenX;
        touchY = touch.screenY;

    }

    function onDocumentTouchMove(event) {

        event.preventDefault();

        var touch = event.touches[0];

        lon -= (touch.screenX - touchX) * 0.1;
        lat += (touch.screenY - touchY) * 0.1;

        touchX = touch.screenX;
        touchY = touch.screenY;

    }

    function animate() {

        requestAnimationFrame(animate);

        //lon +=  0.1;
        lat = Math.max(-85, Math.min(85, lat));
        phi = THREE.Math.degToRad(90 - lat);
        theta = THREE.Math.degToRad(lon);

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

        camera.lookAt(target);

        renderer.render(scene, camera);

    }
    </script>