专栏首页前端之攻略css3D 全景图 - 含有定位的文字Label

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

冲击年薪50W,助你进阶Python工程师>>>

查看全景效果 

完整代码

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

(adsbygoogle = window.adsbygoogle || []).push({});

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • three.js鼠标控制物体旋转

    当我们需要固定场景背景,固定摄像机的时候。移动旋转物体可以使用Three.js提供的OrbitControls.js,也可以手动写控制器。

    tianyawhl
  • threejs之显示Label-CSS2DRenderer

    1、采用threeJs的精灵(Sprite),具体用法查看我另一篇博客https://my.oschina.net/u/2612473/blog/3038066...

    tianyawhl
  • webAPP页面切换之滑动-swiper2(切换页面默认显示顶部)

    最近做一个web页面,希望在手机上能滑动切换页面,第一次这种要求,在网上找到了一个插件swiper,swiper2可以在电脑和手机上使用,于是选择这个插件,在使...

    tianyawhl
  • python实现 opencv 学习笔记 图像二值化

    用户2965768
  • Django基础篇-模型表关系

    在 Mysql 中一对多是通过外键实现的,在 django 模型中通过 ForeignKeyField 类型实现。

    小团子
  • 前端工作中主动沟通的重要性

    主动性,大意是“个体按照自己规定或设置的目标行动,而不依赖外力推动的行为品质”。 可以看出就是自己主动的去做些什么,而不是被动的等待。但我有一个不太好的习惯,就...

    web前端教室
  • D3.js 满足你对数据可视化的一切幻想

    D3.js D3的全称是Data-Driven Documents(数据驱动的文档),是一个用来做数据可视化的JavaScript函数库,而JavaScript...

    企鹅号小编
  • D3.js 满足你对数据可视化的一切幻想

    D3.js D3的全称是Data-Driven Documents(数据驱动的文档),是一个用来做数据可视化的JavaScript函数库,而JavaScript...

    企鹅号小编
  • '%' 求余还是取模,傻傻分不清楚

    很多同学看见我的这个标题,不禁会说到:你这个是在逗我么,求余和取模不是一回事吗?是的再前不久之前我和你们的感受一样,求余和取模难道不是一个玩意?直到有一天有一个...

    用户5397975
  • Spark2.3.0 初始化

    Spark 程序必须做的第一件事是创建一个 JavaSparkContext 对象(Scala和Python中是SparkContext对象),这告诉了 Spa...

    smartsi

扫码关注云+社区

领取腾讯云代金券

玩转腾讯云 有奖征文活动