网络上看到了3D全景图，发现threejs里面有一个库竟然可以实现，一下我贴出代码：

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">

    <title>three.js css3d - panorama</title>

    <style>

        body {

            background-color: #;

            margin: ;

            cursor: move;

            overflow: hidden;

        }

        a {

            color: #ffffff;

        }

        #info {

            position: absolute;

            width: %;

            color: #ffffff;

            padding: 5px;

            font-family: Monospace;

            font-size: 13px;

            font-weight: bold;

            text-align: center;

            z-index: ;

        }

    </style>

</head>

<body>

<script src="../build/three.min.js"></script> <!-- 此处引入threejs基础类 -->

<script src="js/renderers/CSS3DRenderer.js"></script> <!-- 此处引入CSS3Drenderer.js类 -->

<!-- 以上两个文件，在下载threejs的时候就有的，引入就好 -->

<script>

    var camera, scene, renderer;

    var geometry, material, mesh;

    var target = new THREE.Vector3();

    var lon = , lat = ;

    var phi = , theta = ;

    var touchX, touchY;

    init();

    animate();

    function init() {

        camera = new THREE.PerspectiveCamera( , window.innerWidth / window.innerHeight, ,  );

        scene = new THREE.Scene();

/** 次数是重点说明的

 * 这个sides对应的是六张图位于立体坐标轴内的位置，里面的position又包含x,y,三个轴

 * 然后ratation是三个轴上的变换

 */

        var sides = [

            {

                position: [ , ,  ], //

                rotation: [ , -Math.PI / ,  ]

            },

            {

                position: [ -, ,  ], //

                rotation: [ , Math.PI / ,  ]

            },

            {

                position: [ ,  ,  ], //

                rotation: [ Math.PI / , , Math.PI ]

            },

            {

                position: [ , -,  ], //

                rotation: [ - Math.PI / , , Math.PI ]

            },

            {

                position: [ , ,   ], //

                rotation: [ , Math.PI,  ]

            },

            {

                position: [ , , - ], //

                rotation: [ , ,  ]

            }

        ];

        var canvas = document.createElement('canvas');

        var image = document.createElement('img');

        image.src = 'picture/360photos.jpg'; // 画图，这里引入的这张图片，是一张图上集合了6张图片

        image.height = ;

        image.width = ;

        canvas.width = ;

        canvas.height = ;

        // 这里有判断image.onload，这里是判断创建的image节点是否把引入的图片加载进来

            image.onload = function() {

                for ( var i = ; i < sides.length; i ++ ) { // 由于是六张图放在一张图片上，然后这里分割六张图片

                    var cxt = canvas.getContext("2d");

                    cxt.drawImage(image, , -*i);

                    var side = sides[ i ];

                    var element = document.createElement( 'img' );

                    element.width = ; // 2 pixels extra to close the gap.

                    document.getElementsByTagName('body')[].appendChild(canvas);

                    var _img_url = canvas.toDataURL("image/png"); // 获取图片位置

                    element.src = _img_url;

                    var object = new THREE.CSS3DObject( element ); // 这里根据sides把图片放在坐标轴上进行渲染

                    object.position.fromArray( side.position );

                    object.rotation.fromArray( side.rotation );

                    scene.add( object );

                }

        }

        renderer = new THREE.CSS3DRenderer();

        renderer.setSize( window.innerWidth, window.innerHeight );

        document.body.appendChild( renderer.domElement );

        //

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

        document.addEventListener( 'mousewheel', onDocumentMouseWheel, false );

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

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

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

    }

    function onWindowResize() {

        camera.aspect = window.innerWidth / window.innerHeight;

        camera.updateProjectionMatrix();

        renderer.setSize( window.innerWidth, window.innerHeight );

    }

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

        var movementY = event.movementY || event.mozMovementY || event.webkitMovementY || ;

        lon -= movementX * 0.1;

        lat += movementY * 0.1;

    }

    function onDocumentMouseUp( event ) {

        document.removeEventListener( 'mousemove', onDocumentMouseMove );

        document.removeEventListener( 'mouseup', onDocumentMouseUp );

    }

    function onDocumentMouseWheel( event ) {

        camera.fov -= event.wheelDeltaY * 0.05;

        camera.updateProjectionMatrix();

    }

    function onDocumentTouchStart( event ) {

        event.preventDefault();

        var touch = event.touches[  ];

        touchX = touch.screenX;

        touchY = touch.screenY;

    }

    function onDocumentTouchMove( event ) {

        event.preventDefault();

        var touch = event.touches[  ];

        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( - , Math.min( , lat ) );

        phi = THREE.Math.degToRad(  - 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>

</body>

</html>

用threejs实现三维全景图的更多相关文章

  1. 3D全景之ThreeJs

    3D全景之ThreeJs 一.前言 随着H5越来越多的被应用到各个领域,3D也越来越频繁的出现在各个H5案例中,今天我们就来讨论一下3D全景的实现. 据百度百科上介绍:720全景是视角超过人的正常视角 ...

  2. 贝塞尔曲线(面)二三维可视化(Three+d3)

    贝塞尔曲线(面)二三维可视化(Three+d3) 在学完 games101 几何后开始实践,可视化贝塞尔曲线 我想实现三维的贝塞尔曲线,用 threejs,但是 threejs 控制太麻烦了,因此,我 ...

  3. js迪杰斯特拉算法求最短路径

    1.后台生成矩阵 名词解释和下图参考:https://blog.csdn.net/csdnxcn/article/details/80057574 double[,] arr = new double ...

  4. threejs构建web三维视图入门教程

    本文是一篇简单的webGL+threejs构建web三维视图的入门教程,你可以了解到利用threejs创建简单的三维图形,并且控制图形运动.若有不足,欢迎指出. 本文使用的框架是three.js gi ...

  5. threejs三维地图大屏项目分享

    这是最近公司的一个项目.客户的需求是基于总公司和子公司的数据,开发一个数据展示大屏. 大屏两边都是一些图表展示数据,中间部分是一个三维中国地图,点击中国地图的某个省份,可以下钻到省份地图的展示. 地图 ...

  6. Web三维编程入门总结之一：WebGL与Threejs入门知识

    /*在这里对这段时间学习的3D编程知识做个总结,以备再次出发.计划分成“webgl与three.js基础介绍”.“面向对象的基础3D场景框架编写”.“模型导入与简单3D游戏编写”三个部分,其他零散知识 ...

  7. threejs纹理

    纹理 纹理用来表现物体的细节.理论上可以将物体的每个细节建模出来,但是这样时间成本和性能成本都太高,因此,将物体的一些细节用纹理来表示. 图片纹理 图片纹理直接在物体表面应用图片.可以使用Textur ...

  8. threejs和3d各种效果的学习

    写给即将开始threejs学习的自己,各种尝试,各种记忆.不要怕,灰色的年华终会过去. 一个技术学习的快慢,以及你的深刻程度,还有你的以后遇到这个东西的时候的反应速度,很大程度上,取决于你的博客的深刻 ...

  9. 360全景图three.js

    1.three.js是JavaScript编写的WebGL第三方库.提供了非常多的3D显示功能. Three.js 是一款运行在浏览器中的 3D 引擎,你可以用它创建各种三维场景,包括了摄影机.光影. ...

随机推荐

  1. AutoJS4.1.0实战教程 ---火热持续更新中

    这个时代假货太多,虚假广告更是充斥着整个互联网.尤其是那个传奇的我都无语了.好几个明xing代言,问题是太假了……我好奇的是那么虚假怎么就没人管呢,XX部干嘛呢……另外互联网刷视频赚钱就是个炒作.几百 ...

  2. 故事：走进JVM的世界（图文并茂）

    注意!本文较长,建议先收藏再阅读.更多文章可以关注作者公众号:码上实战 你也可以 star 我的 GitHub上本文所属仓库:https://github.com/flyhero/MarkNote 说 ...

  3. 第十六周Java实验作业

    实验十六  线程技术 实验时间 2017-12-8 1.实验目的与要求 (1) 掌握线程概念: 多线程是进程执行过程中产生的多条执行线索,线程是比进程执行更小的单位. 线程不能独立存在,必须存在于进程 ...

  4. ElasticSearch 32766 的限制

    插入一个稍大的数据到elasticsearch的时候,突然报错“ 400 - elastic: Error 400 (Bad Request): Document contains at least ...

  5. mysql系列--sql实现原理

    count(*) MyISAM 引擎把⼀个表的总⾏数存在了磁盘上,因此执⾏ count(*) 的时候会直接返回这个数,效率很⾼:但是加了条件则不能快速返回⽽ InnoDB 引擎就麻烦了,它执⾏ cou ...

  6. ML Lecture 0-1: Introduction of Machine Learning

    本博客是针对李宏毅教授在Youtube上上传的课程视频<ML Lecture 0-1: Introduction of Machine Learning>的学习笔记.在Github上也po ...

  7. tigervnc使用总结

    vncserver和x0vncserver用法总计 通常vncserver :port 会调用到xvnc,这时系统会新建一个虚拟桌面通过vncserver分享出去. vncserver的用法很简单: ...

  8. Sprinboot 整合 RabbitMQ,RabbitMQ 消息重试机制

    当消费者消费消息的时候,出现错误,RabbitMQ 本身会有

  9. 已知IP地址和子网掩码求出网络地址、广播地址、地址范围和主机数（转载https://blog.csdn.net/qq_39026548/article/details/78959089）

    假设IP地址为128.11.67.31,子网掩码是255.255.240.0.请算出网络地址.广播地址.地址范围.主机数.方法:将IP地址和子网掩码转化成二进制形式,然后进行后续操作. IP地址和子网 ...

  10. Python基础 | pandas中dataframe的整合与形变(merge & reshape)

    目录 行的union pd.concat df.append 列的join pd.concat pd.merge df.join 行列转置 pivot stack & unstack melt ...