文档章节

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

tianyawhl
 tianyawhl
发布于 06/20 17:10
字数 813
阅读 13
收藏 0

查看全景效果 

完整代码


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

 

© 著作权归作者所有

tianyawhl
粉丝 7
博文 254
码字总数 134408
作品 0
常州
前端工程师
私信 提问
svg、canvas、css3d实现数据可视化

前言: 这次项目用到了一些自定义的数据可视化组件,我把我做的部分抽出来几个典型做个汇总。 分为如下: 星球环绕旋转图 -- 方法一: svg:animateMotion+ animateTransform 方法二:css3d...

2018/09/10
0
0
你到了第几层?图片式标题、按钮与隐藏文本

一、所谓何物? 所谓“图片式标题/按钮”,是指文字图片化的标题/按钮。比较熟悉的就是淘宝网首页了哈 上面右图(或上图,如果是普屏)的“便民服务”、“卡券&票务”,开小差,忘记圈了 二、...

林文安
2012/06/16
0
0
[翻译]Windows Phone 7 Application Controls

前言-关于这段译文 Windows Phone开发的中文资料缺乏,这段译文翻译自《UI Design and Interaction Guide for Windows Phone 7 Series》,翻译活动由http://www.wpmind.com/ 的站长小指发起,...

长平狐
2012/08/21
314
0
android游戏开发框架libgdx的使用(十八)—简单的AVG游戏效果实现

本文使用的libgdx是0.92版本,和现在的最新版可能有一些不一样的地方。全文内容仅供参考。 好久没有写libgdx的东西了,主要是最近迷上了各种算法… 文章是关于实现简单的AVG游戏效果,可能会...

长平狐
2013/11/25
398
0
实现文字的颜色渐变效果  CAGradientLayer(渐变色图层)

本次文章,主要讲述的是图层中的mask属性,利用它,可以做出文字渐变效果! 思路: 1. 创建UILabel. --- > label只是用来做文字裁剪;必须要把label添加到view上,如果不添加到view上,label...

如若初见
2016/05/04
334
0

没有更多内容

加载失败,请刷新页面

加载更多

uniapp + bootstrapvue 移动/PC 一套搞定 (一)配置bootstrapvue

1.准备文件 自己到DCloud官网: http://dcloud.io/ 去下载官方的IDE Hbuilder,新建一个空的uniapp项目即可。 uniapp框架自带优化的vue,我们仅仅需要准备以下三个文件: bootstrap.min.css ...

panyunxing
今天
9
0
Android Camera原理之camera service类与接口关系

camera service主要是指 frameworks/av/services/camera/下面的代码,最近在看这一块的代码,为了更好地理清这一块的代码,也为了后续学习camera方便一些,我觉得很有必要理一下这一块的整体...

天王盖地虎626
今天
2
0
Golang学习笔记

[TOC] Golang学习笔记 这个学习笔记是最早在1.初,版本左右的时候写的,和当前最新的版本可能会有较大的差异. 因为成文比较早,文章里面又有很多自己的见解,有些东西当时理解的不太透彻可能写错...

我爱吃炒鸡
今天
10
0
科技赋能成效显著!金融壹账通两大赋能项目荣获IDC大奖

7月19日,2019IDC中国未来金融论坛曁颁奖典礼于北京举办。由金融壹账通赋能的长春农商银行多人视频面审智能风控系统、包头农商银行互联网银行SaaS服务两大项目因在项目的创新性、技术领先性、...

IFTNews
昨天
1
0
HTTP协议

HTTP简介 HTTP协议(HyperText Transfer Protocol,超文本传输协议)是因特网上应用最为广泛的一种网络传输协议,所有的WWW文件都必须遵守这个标准。 HTTP是一个基于TCP/IP通信协议来传递数据...

Eappo_Geng
昨天
7
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部