直接上代码：

<!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. SUBSTRING / CHARINDEX_函数随手练_2

    SUBSTRING / CHARINDEX_函数随手练_2环境:MSSQL 2014(AdventureWorks2008R2附加到2014中的表 Location) /* Learning SQL ...

  2. JavaSE的基本语法

    JavaSE基本语法 一.语法的注意事项 1.严格区分大小写 2.每句命令结尾使用分号 3.符号都是英文状态 4.括号.引号都是成对出现的! 5.注意缩进 Tips: 文件名和类名可以不一致,但pub ...

  3. 嵌入式QT开发视频教程-供参考

    免费嵌入式QT开发视频教程 https://pan.baidu.com/s/1bprhJ2Z QT初级到高级编程视频教程--丁林松.rarhttp://www.jisoupan.com/share/2 ...

  4. Vmware的各版本KEY

    算是之前收集到的备份一下在这里吧,顺便方便别人(ô‿ô) 应该是比较全的 VMware Workstation4.xx for WindowsZHDH1-UR90N-W844G-4PTN6G1NP0- ...

  5. const变量的修改

    int main(){ const char a[]="hello world"; char *aa=(char *)a; printf("\nthe a address ...

  6. java8 探讨与分析匿名内部类、lambda表达式、方法引用的底层实现

    问题解决思路:查看编译生成的字节码文件 目录 测试匿名内部类的实现 小结 测试lambda表达式 小结 测试方法引用 小结 三种实现方式的总结 对于lambda表达式,为什么java8要这样做? 理论 ...

  7. Redis：缓存淘汰策略

    将redis用做缓存是一种非常常见的手段,然而由于内存大小的限制,会导致redis在内存空间满了以后需要处理继续存入的数据.总计有以下几种策略: volatile-ttl:在设置了过期时间的数据集里, ...

  8. Spring IoC 循环依赖的处理

    前言 本系列全部基于 Spring 5.2.2.BUILD-SNAPSHOT 版本.因为 Spring 整个体系太过于庞大,所以只会进行关键部分的源码解析. 本篇文章主要介绍 Spring IoC 是 ...

  9. onunload对应的js代码为什么不能执行？和onbeforeunload的区别？

    为什么onunload对应的js代码不能执行? 为什么onbeforeunload才可以在离开页面时执行相应的js代码? 1.onunload和onbeforeunload都是在离开页面或者刷新页面的 ...

  10. plsql截取字符串字段中的某个字符段

    截取字符串 字符串s=" hello world  ! (name) " 如果要截取括号中的字符串可以采取如下方法. select substr(s,instr(s,'(')+1, ...