直接上代码：

<!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. CentOS7.5搭建ES6.2.4集群与简单测试

    一 简介 Elasticsearch是一个高度可扩展的开源全文搜索和分析引擎.它允许您快速,近实时地存储,搜索和分析大量数据.它通常用作支持具有复杂搜索功能和需求的应用程序的底层引擎/技术. 下载地址 ...

  2. （六）获取http状态码和处理返回结果

    int StatusCode = httpResponse.getStatusLine().getStatusCode(); 处理返回结果: /** * 处理返回结果 * @param respons ...

  3. WebBrowser禁用触摸缩放

    最近做一个WPF触屏的项目,引用到WebBrowser控件,由于是触屏的所以控件里的网页可以缩放,客户提出要求,屏蔽这缩放功能. 于是网上找了很多资料,也换过控件,WebView2 控件使用Micro ...

  4. SpringCloud 入门(二)

    前文我们介绍了创建注册中心的过程以及配置,接下来我们再简单的创建一个客户端 基本操作和前文一样,不一样的是选择的依赖 然后下一步,修改启动类和配置,结构如下图 修改配置文件application-te ...

  5. hashcode和==

    public class Main { public static void main(String[] args) { Object o=new Object(); System.out.print ...

  6. elasticSearch数据库、skywalking集群部署

    Centos6上面安装elasticsearc数据库的集群 安装的是6.3.2版本,安装之前首先要先安装jdk1.8版本 安装之前首先需要关闭防火墙 Centos6 sudo service ipta ...

  7. spring 整合redis集群中使用@autowire无效问题的解决办法

    1.视频参考黑马32期宜立方商城第6课 redis对于的代码 我们先变向一个redis客户端的接口文件 package com.test; public interface JedisClient { ...

  8. Python初识函数

    Python初识函数 函数理论篇 什么是函数 在编程语言中的函数不同于数学中的函数.不管是数学上的函数还是编程语言中的函数都是为了完成特定的某一功能而诞生的,他们的区别在于: 1.数学中的函数当输入的 ...

  9. Oracel中coalesce函数的用法

    1.coalesce函数的用法 1.1 取出第一个不为空的列的数据.

  10. Windows Defender might be impacting your build performance

    由于换了SSD, 昨天安装了最新的 Idea 2019.2+ , 然后发现每次导入项目都有如下提示: 处理方法就是在Windows安全中心排除目录 处理方式参考: 官方 Known issues An ...