直接上代码：

<!DOCTYPE html>
<html>
 <head>
  <title>three.js css3d - panorama</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
  <style>
   body {
    background-color: #000000;
    margin: 0;
    cursor: move;
    overflow: hidden;
   }

   a {
    color: #ffffff;
   }

   #info {
    position: absolute;
    width: 100%;
    color: #ffffff;
    padding: 5px;
    font-family: Monospace;
    font-size: 13px;
    font-weight: bold;
    text-align: center;
    z-index: 1;
   }
  </style>
 </head>
 <body>
  <script src="../build/three.js"></script>
  <script src="js/renderers/CSS3DRenderer.js"></script>
  <script>

   var camera, scene, renderer;
   var geometry, material, mesh;
   var target = new THREE.Vector3();

   var lon = 90, lat = 0;
   var phi = 0, theta = 0;

   var touchX, touchY;

   init();
   animate();

   function init() {

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

    scene = new THREE.Scene();

    var sides = [
     {
      url: 'textures/cube/Bridge2/posx.jpg',
      position: [ -512, 0, 0 ],
      rotation: [ 0, Math.PI / 2, 0 ]
     },
     {
      url: 'textures/cube/Bridge2/negx.jpg',
      position: [ 512, 0, 0 ],
      rotation: [ 0, -Math.PI / 2, 0 ]
     },
     {
      url: 'textures/cube/Bridge2/posy.jpg',
      position: [ 0,  512, 0 ],
      rotation: [ Math.PI / 2, 0, Math.PI ]
     },
     {
      url: 'textures/cube/Bridge2/negy.jpg',
      position: [ 0, -512, 0 ],
      rotation: [ - Math.PI / 2, 0, Math.PI ]
     },
     {
      url: 'textures/cube/Bridge2/posz.jpg',
      position: [ 0, 0,  512 ],
      rotation: [ 0, Math.PI, 0 ]
     },
     {
      url: 'textures/cube/Bridge2/negz.jpg',
      position: [ 0, 0, -512 ],
      rotation: [ 0, 0, 0 ]
     }
    ];

    for ( var i = 0; i < sides.length; i ++ ) {

     var side = sides[ i ];

     var element = document.createElement( 'img' );
     element.width = 1026; // 2 pixels extra to close the gap.
     element.src = side.url;

     var object = new THREE.CSS3DObject( element );
     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( 'wheel', 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 || 0;
    var movementY = event.movementY || event.mozMovementY || event.webkitMovementY || 0;

    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.deltaY * 0.05;
    camera.updateProjectionMatrix();

   }

   function onDocumentTouchStart( event ) {

    event.preventDefault();

    var touch = event.touches[ 0 ];

    touchX = touch.screenX;
    touchY = touch.screenY;

   }

   function onDocumentTouchMove( event ) {

    event.preventDefault();

    var touch = event.touches[ 0 ];

    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( - 85, Math.min( 85, lat ) );
    phi = THREE.Math.degToRad( 90 - 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>

基于three.js的全景的更多相关文章

  1. 基于Three.js的全景---photo-sphere-viewer

    以前公司其他几个前端做全景都是用软件生成,由于本人比较懒,不想去折腾那个软件,于是乎就有了下面的事...... 这个是基于three.js的全景插件  photo-sphere-viewer.js  ...

  2. 基于Three.js的360度全景--photo-sphere-viewer--简介

    这个是基于three.js的全景插件  photo-sphere-viewer.js  ---------------------------------------- 1.能添加热点: 2.能调用陀 ...

  3. 基于 React.js + Redux + Bootstrap 的 Ruby China 示例 (转)

    一直学 REACT + METEOR 但路由部分有点问题,参考一下:基于 React.js + Redux + Bootstrap 的 Ruby China 示例 http://react-china ...

  4. 用jQuery基于原生js封装的轮播

    我发现轮播在很多网站里面都用到过,一个绚丽的轮播可以为网页增色不少,最近闲来无事,也用原生js封装了一个轮播,可能不像网上的插件那么炫,但是也有用心去做.主要用了闭包的思想.需要传递的参数有:图片地址 ...

  5. 基于Three.js的360X180度全景图预览插件

    基于Three.js的360X180度全景图预览插件 时间 2015-08-12 10:01:10  HTML5中国 原文  http://www.html5cn.org/article-8621-1 ...

  6. NodeBB – 基于 Node.js 的开源论坛系统

    NodeBB 是一个更好的论坛平台,专门为现代网络打造.它是免费的,易于使用. NodeBB 论坛软件是基于 Node.js 开发,支持 Redis 或 MongoDB 的数据库.它利用 Web So ...

  7. RSuite 一个基于 React.js 的 Web 组件库

    RSuite http://rsuite.github.io RSuite 是一个基于 React.js 开发的 Web 组件库,参考 Bootstrap 设计,提供其中常用组件,支持响应式布局. 我 ...

  8. 基于 Node.js 平台，快速、开放、极简的 web 开发框架。

    资料地址:http://www.expressjs.com.cn/ Express 基于 Node.js 平台,快速.开放.极简的 web 开发框架. $ npm install express -- ...

  9. 基于ArcGIS JS API的在线专题地图实现

    0 引言     专题地图是突出而深入的表示一种或几种要素或现象,即按照地图主题的要求,集中表示与主题有关内容的地图.专题地图的专题要素多种多样,分类方法也多种多样,根据专题地图表现数据的特点可分为定 ...

随机推荐

  1. Mybaties概述

  2. [Cadence] 10个Cadence AD PADS经典案例 2-12层板设计

    [Cadence] 10个Cadence Allegro经典案例 2-12层板设计 自己保存的PCB例程资料分享 Allegro AD PADS看下面截图需要的拿去 下载链接 链接: https:// ...

  3. 关于Ubuntu系统忘记密码的解决方法合集

    昨天有台机器的Ubuntu系统密码出了问题,一直提示错误.由于里面的数据比较重要,不建议重装系统,所以百度了一会,最终解决了忘记密码问题.整理了一个大合集分享出来. 第一种:参考教程如下       ...

  4. program files (x86)\microsoft visual studio 14.0\vc\include\xtree，如果没有找到，下标溢出了，就报错咯

    ---------------------------Microsoft Visual C++ Runtime Library---------------------------Debug Asse ...

  5. SQLserver 的分页存储过程

      -- 1.建立修改学生数据的存储过程 -- 2.建立根据班级Id和学生姓名模糊查询的分页存储过程,要求正确输出总记录数,总页数-- (输入班学生姓名 计算总记录数 计算总页数) -- @name ...

  6. Andrew Ng - 深度学习工程师 - Part 1. 神经网络和深度学习（Week 1. 深度学习概论）

     =================第1周 循环序列模型=============== ===1.1 欢迎来到深度学习工程师微专业=== 我希望可以培养成千上万的人使用人工智能,去解决真实世界的实际问 ...

  7. Asp.Net 五大对象及作用

    Connection(连接对象):与数据源建立连接. DataAdapter(适配器对象):对数据源执行操作并返回结果,在DataSet与数据源之间建立通信,将数据源中的数据写入DataSet中,或根 ...

  8. Merge，Rebase，Cherry-Pick 一文解惑

    代码合并在日常开发中是较为常见的场景,采用合适的合并方式,可以起到事半功倍的效果.对应在 Git 中合并的方式主要有三个,Merge,Rebase,Cherry-Pick. 开始部分会首先介绍一下这三 ...

  9. 01MySQL内核分析-The Skeleton of the Server Code

    摘要 这个官方文档一段对MySQL内核分析的一个向导.是对MySQL一条insert语句写入到MySQL数据库的分析. 但是,对于MySQL 5.7版本来说,基本上都是写入到innodb引擎.但也还是 ...

  10. c++教程网经典的c语音学习视频教程