网络上看到了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. 论文速递 | 实例分割算法BlendMask，实时又state-of-the-art

    BlendMask通过更合理的blender模块融合top-level和low-level的语义信息来提取更准确的实例分割特征,该模型效果达到state-of-the-art,但结构十分精简,推理速度 ...

  2. RabbitMQ 在Ubuntu18.04上的安装

    1.安装erlang由于rabbitMq需要erlang语言的支持,在安装rabbitMq之前需要安装erlang sudo apt-get install erlang2.安装Rabbitmq更新源 ...

  3. Contest 153

    2019-09-14 23:16:25 总体感受:节奏尚可,难度尚可.然而还是卡在了最后一题,完全没有想到使用dp. 注意点: 1)Contest的最后一题往往是DP,Graph,这个敏感度需要提高: ...

  4. python爬取中国大学排名

    教程来自:[Python网络爬虫与信息提取].MOOC. 北京理工大学 目标:爬取最好大学网前50名大学 代码如下: import requests from bs4 import Beautiful ...

  5. 基于KNN的发票识别

    项目概况: 有一个PDF文件,里面的每页都是一张发票,把每页的发票单独存为一个PDF并用该发票的的发票号码进行文件的命名,发票号码需要OCR识别,即识别下图中红色方块的内容. 一:拆分PDF 现有一个 ...

  6. ICCV 2019|70 篇论文抢先读，含目标检测／自动驾驶／GCN／等（提供PDF下载）

    虽然ICCV2019已经公布了接收ID名单,但是具体的论文都还没放出来,为了让大家更快得看论文,我们汇总了目前已经公布的大部分ICCV2019 论文,并组织了ICCV2019论文汇总开源项目(http ...

  7. javax.el.PropertyNotFoundException: 类型[cn.cqsw.pojo.Course]上找不到属性[CourseId]

    今天在JSP利用EL表达式取值报了 "javax.el.PropertyNotFoundException” 1 Caused by: org.apache.jasper.JasperExc ...

  8. My背包九讲——01背包

    文章目录 背包问题中的常用变量说明 题目 解题思路 我想要想理解最简单 01背包就是要`理解

  9. HTTP Session例子

    HTTP协议是“一次性单向”协议.服务端不能主动连接客户端,只能被动等待并答复客户端请求.客户端连接服务端,发出一个HTTP Request,服务端处理请求,并且返回一个HTTP Response给客 ...

  10. 自定义yum仓库

                                             自定义yum仓库 案例4:自定义yum软件仓库 4.1问题 本例要求在CentOS真机上利用RHEL7的光盘镜像文件准 ...