网络上看到了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. ubuntu在github上传项目

    GitHub是一个面向开源及私有软件项目的托管平台,因为只支持git 作为唯一的版本库格式进行托管,故名GitHub. 作为开源代码库以及版本控制系统,Github拥有超过900万开发者用户.随着越来 ...

  2. 用java分组查elasticsearch

    哎,编程路漫漫,一坑又一坑,爬完还会掉,何时是尽头! 今朝有酒今朝醉,程序不对不敢睡! 还是接口昂,今天还是接口有问题,我是很菜,很笨,但是我还是要努力!! 正文: 接口需求是这样的,根据车型查询在线 ...

  3. effective-java学习笔记---使用接口模拟可扩展的枚举38

    枚举类型( BasicOperation )不可扩展,但接口类型( Operation )是可以扩展的,并且它是用于表示 API 中的操作的接口类型. // Emulated extensible e ...

  4. 一篇文章让你了解动态数组的数据结构的实现过程（Java 实现）

    目录 数组基础简单回顾 二次封装数组类设计 基本设计 向数组中添加元素 在数组中查询元素和修改元素 数组中的包含.搜索和删除元素 使用泛型使该类更加通用(能够存放 "任意" 数据类 ...

  5. Transformers 词汇表 | 二

    作者|huggingface 编译|VK 来源|Github 词汇表每种模型都不同,但与其他模型相似.因此,大多数模型使用相同的输入,此处将在用法示例中进行详细说明. 输入ID 输入id通常是传递给模 ...

  6. java——基本数据类型

    一.整型 bite 1字节 2^0 short 2字节 2^1 int 4字节 2^2 long  8字节 2^3 整形常量默认为int型,所以定义long 型时候要在常量后面加 L 或 l ,其他类 ...

  7. rabbitmq++：rabbitmq 三种常用的交换机

    更多 rabbitmq 介绍 首先先介绍一个简单的一个消息推送到接收的流程,提供一个简单的图: 黄色的圈圈就是我们的消息推送服务,将消息推送到 中间方框里面也就是 rabbitMq的服务器: 然后经过 ...

  8. Codeforces 1332F - Independent Set(树dp)

    题目链接 题意 给出一棵 n 个点的树, 求它的所有非空诱导子图的独立集种类数之和, 对 998244353 取模. n ≤ 3e5. 题解 不妨假设在独立集中的点被染色成 1, 其余不染色; 由于不 ...

  9. 死磕Lambda表达式（六）：Consumer、Predicate、Function复合

    你的无畏来源于无知.--<三体> 在上一篇文章(传送门)中介绍了Comparator复合,这次我们来介绍一下其他的复合Lambda表达式. Consumer复合 Consumer接口中,有 ...

  10. Activiti组任务

    一.Candidate-users候选人 1.需求 在流程定义中在任务节点的assignee固定设置任务负责人,在流程定义时将参数者固定设置在.bpmn文件中,如果临时任务负责人变更则需要修改流程定义 ...