网络上看到了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. Error: clean-webpack-plugin only accepts an options object. See: https://github.com/johnagan/clean-webpack-plugin#options-and-defaults-optional

    webpack中文文档中推荐这样使用,but 执行npm run build Error: clean-webpack-plugin only accepts an options object. S ...

  2. 拿 C# 搞函数式编程 - 3

    前言 今天和某个人聊天聊到了 C# 的 LINQ,发现我认识的 LINQ 似乎和大多数人认识的 LINQ 不太一样,怎么个不一样法呢?其实 LINQ 也可以用来搞函数式编程. 当然,并不是说写几个 l ...

  3. 【Vulnhub练习】Tr0ll 1

    下载: https://www.vulnhub.com/entry/tr0ll-1,100/#download 说明: Tr0ll的灵感来自OSCP实验室中不断摇曳的机器. 目标很简单,获得根目录并从 ...

  4. 凸包问题 Graham Scan

    2020-01-09 15:14:21 凸包问题是计算几何的核心问题,并且凸包问题的研究已经持续了好多年,这中间涌现出了一大批优秀的算法. 凸包问题的最优解法是Graham Scan算法,该算法可以保 ...

  5. 超参数、验证集和K-折交叉验证

    本文首发自公众号:RAIS ​前言 本系列文章为 <Deep Learning> 读书笔记,可以参看原书一起阅读,效果更佳. 超参数 参数:网络模型在训练过程中不断学习自动调节的变量,比如 ...

  6. java——基本数据类型

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

  7. arcgis连接oracle发布服务，提示数据未注册到服务器，手动注册服务器失败

    arcgis连接oracle数据库发布服务时候,分析之后提示:数据未注册到服务器上. 手动注册之后提示:数据客户端没有正确配置.实际上数据库客户端已经安装完成也可以使用. 设置 PATH 环境变量(仅 ...

  8. 用Python简单批量处理数据

    近期碰到一个问题,两套系统之间数据同步出了差错,事后才发现的,又不能将业务流程倒退,但是这么多数据手工处理量也太大了,于是决定用Python偷个小懒. 1.首先分析数据. 两边数据库字段的值都是一样, ...

  9. coding++: java把一个整数拆分为单个值

    方式一: int num = 100; int[] ary = new int[(num+"").length()]; for(int i = ary.length-1;i> ...

  10. h5 js数组Array方法总结

    重新复习数组方法. 一.首先说一下构建一个数组. 1.直接定义一个数组. var a = [1,2,3]; 2.通过Array 对象new一个数组,但Array对象根据传参的不同会返回不同的数组对象. ...