直接上代码：

<!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. cb02a_c++_数据结构_顺序容器_STL_list类_双向链表

    /*cb02a_c++_数据结构_顺序容器_STL_list类_双向链表实例化std::list对象在list开头插入元素在list末尾插入元素在list中间插入元素,插入时间恒定,非常快.数组:中间 ...

  2. Sharding-JDBC 快速入门第一课

    1.  概述 ShardingSphere是一套开源的分布式数据库中间件解决方案组成的生态圈,它由Sharding-JDBC.Sharding-Proxy和Sharding-Sidecar(计划中)这 ...

  3. 09.DRF-ModelSerializer

    四.模型类序列化器ModelSerializer 如果我们想要使用序列化器对应的是Django的模型类,DRF为我们提供了ModelSerializer模型类序列化器来帮助我们快速创建一个Serial ...

  4. Linux Systemd 详细介绍: Unit、Unit File、Systemctl、Target

    Systemd 简介 CentOS 7 使用 Systemd 替换了SysV Ubuntu 从 15.04 开始使用 Systemd Systemd 是 Linux 系统工具,用来启动守护进程,已成为 ...

  5. springboot 集成mybatis时日志输出

    application.properties(yml)中配置的两种方式: 这两种方式的效果是一样的,但是下面一种可以指定某个包下的SQL打印出来,上面这个会全部的都会打印出来.

  6. java关于传值与传引用

    关于java传值还是传引用的问题经常出现在一些烦人的面试题中,主要考察个人对java基础的掌握情况. 首先明确一下:本地方法中,java的参数传递都是传值.但是如果是远程调用方法时,会将对象本身传递过 ...

  7. Lens —— 最炫酷的 Kubernetes 桌面客户端

    原文链接:https://fuckcloudnative.io/posts/lens/ Kubernetes 的桌面客户端有那么几个,曾经 Kubernetic 应该是最好用的,但最近有个叫 Lens ...

  8. Python3-configparser模块-配置文件解析器

    Python3中的configparser模块主要用于处理类似于windows ini 文件结构的配置文件 1.configparser模块提供实现基本配置语言的ConfigParser类 2.配置文 ...

  9. C#数据结构与算法系列（十四）：递归——八皇后问题（回溯算法）

    1.介绍 八皇后问题,是一个古老而著名的问题,是回溯算法的经典案例,该问题是国际西洋棋棋手马克斯.贝瑟尔于1848年提出:在8×8格的国际象棋上摆放八个皇后,使其不能互相攻击,即 任意两个皇后都不能处 ...

  10. express高效入门教程（2）

    2.请求和响应 2.1.请求相关 2.1.1.返回一个html页面 // 注意path模块需要先引入 app.get('/', function (req, res){ res.sendFile(pa ...