用threejs实现三维全景图

网络上看到了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实现三维全景图的更多相关文章

3D全景之ThreeJs
3D全景之ThreeJs 一.前言随着H5越来越多的被应用到各个领域,3D也越来越频繁的出现在各个H5案例中,今天我们就来讨论一下3D全景的实现. 据百度百科上介绍:720全景是视角超过人的正常视角 ...
贝塞尔曲线(面)二三维可视化(Three+d3)
贝塞尔曲线(面)二三维可视化(Three+d3) 在学完 games101 几何后开始实践,可视化贝塞尔曲线我想实现三维的贝塞尔曲线,用 threejs,但是 threejs 控制太麻烦了,因此,我 ...
js迪杰斯特拉算法求最短路径
1.后台生成矩阵名词解释和下图参考:https://blog.csdn.net/csdnxcn/article/details/80057574 double[,] arr = new double ...
threejs构建web三维视图入门教程
本文是一篇简单的webGL+threejs构建web三维视图的入门教程,你可以了解到利用threejs创建简单的三维图形,并且控制图形运动.若有不足,欢迎指出. 本文使用的框架是three.js gi ...
threejs三维地图大屏项目分享
这是最近公司的一个项目.客户的需求是基于总公司和子公司的数据,开发一个数据展示大屏. 大屏两边都是一些图表展示数据,中间部分是一个三维中国地图,点击中国地图的某个省份,可以下钻到省份地图的展示. 地图 ...
Web三维编程入门总结之一：WebGL与Threejs入门知识
/*在这里对这段时间学习的3D编程知识做个总结,以备再次出发.计划分成“webgl与three.js基础介绍”.“面向对象的基础3D场景框架编写”.“模型导入与简单3D游戏编写”三个部分,其他零散知识 ...
threejs纹理
纹理纹理用来表现物体的细节.理论上可以将物体的每个细节建模出来,但是这样时间成本和性能成本都太高,因此,将物体的一些细节用纹理来表示. 图片纹理图片纹理直接在物体表面应用图片.可以使用Textur ...
threejs和3d各种效果的学习
写给即将开始threejs学习的自己,各种尝试,各种记忆.不要怕,灰色的年华终会过去. 一个技术学习的快慢,以及你的深刻程度,还有你的以后遇到这个东西的时候的反应速度,很大程度上,取决于你的博客的深刻 ...
360全景图three.js
1.three.js是JavaScript编写的WebGL第三方库.提供了非常多的3D显示功能. Three.js 是一款运行在浏览器中的 3D 引擎,你可以用它创建各种三维场景,包括了摄影机.光影. ...

随机推荐

Vue中使用axios发送ajax请求
作为前后端交互的重要技巧--发送ajax请求,在Vue中我们使用axio来完成这一需求: 首先是下载axios的依赖, npm install --save axios vue-axios 然后在ma ...
Cisco 综合配置（二）
要求: 1. PC1 属于VLAN10,PC2属于VLAN20,网关:Master Router2. VLAN10.20 的网段为:192.168.10.0/24 . 192.168.20.0/24 ...
SVN分支合并指南
SVN分支合并主干具体操作步骤 1. 在装有svn插件的myeclipse中,在主干上选择需要合并的文件或文件夹, 右击--> team -->合并(merge) 2.选择合并类型--合并 ...
python3爬虫爬取金庸小说所有角色
# -*- coding:utf-8 -*- import requests from bs4 import BeautifulSoup url = 'http://www.jinyongwang.c ...
Contest 161
2019-11-03 20:35:18 总体感受:本周的赛题完全是反过来的,第一题最难,第二题次之,最后的hard反而是最简单的. 注意点:心态放平稳,慢慢来.
渗透测试之Web安全
写在前面: 渗透测试包含但不限于Web安全渗透测试并不相当于Web渗透 Web安全学习是入门渗透测试最容易的途径,门槛最低 Web安全入门: 基础入门整体框架 SQL注入 XSS攻击业务逻辑漏洞 ...
SpringBoot 集成ehcache
1, 项目实在springboot 集成mybatis 的基础上的: https://www.cnblogs.com/pickKnow/p/11189729.html 2,pom 如下,有的不需要加, ...
jsonp跨域的原理及实现
1,什么是跨域? 跨域跨域,跨过域名,笼统来说就是一个域名区请求另外一个域名的数据,但实际上,不同端口.不同域名.不同协议上请求数据都会出现跨域问题.浏览器出于安全考虑会报出异常,拒绝访问. 2,js ...
简述MySQL数据库中的Date,DateTime,TimeStamp和Time类型
DATETIME类型定义同时包含日期和时间信息的值时.MySQL检索并且以'YYYY-MM-DD HH:MM:SS'格式显示DATETIME值,支持的范围是'1000-01-01 00:00:00' ...
文件上传 Window & Linux
1. 在application配置文件添加图片存储路径的参数上传路径前必须加 file:/ 否则网页图片请求可能404window gofy: uploadPath: file:/F:/fileUp ...

用threejs实现三维全景图

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

随机推荐

热门专题