直接上代码：

<!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. Python爬虫小白入门（一）入门介绍

    一.前言 你是不是在为想收集数据而不知道如何收集而着急? 你是不是在为想学习爬虫而找不到一个专门为小白写的教程而烦恼? Bingo! 你没有看错,这就是专门面向小白学习爬虫而写的!我会采用实例的方式, ...

  2. centos7 hadoop 单机模式安装配置

    前言 由于现在要用spark,而学习spark会和hdfs和hive打交道,之前在公司服务器配的分布式集群,离开公司之后,自己就不能用了,后来用ambari搭的三台虚拟机的集群太卡了,所以就上网查了一 ...

  3. HTMLTestRunner生成html测试报告

    使用:把文件放到项目某个文件夹中,引入方式如下 import unittest import env import vendor.report.HTMLTestRunnerNew as HTMLTes ...

  4. sql片段提取引用

    sql片段 sql中可将重复的sql提取出来,使用时用include引用即可,最终达到sql重用的目的,如下: <!-- 传递pojo综合查询用户信息 --> <select id= ...

  5. BUAA_OO_2020_Unit2_总结博客

    BUAA_OO_2020_Unit2_总结 2020年春季学期第八周,OO第二单元落下帷幕,三次多线程任务作罢,萌新在OO的世界里又迈出了艰难但有意义的一步,下作总结: 一.三次作业设计策略 回顾三次 ...

  6. STM32单片机应用与全案例实践 /stm32自学笔记 第二版 pdf

    STM32单片机应用与全案例实践pdf https://pan.baidu.com/s/16WrivuLcHvLTwS__Zcwl6Q 4rj3 stm32自学笔记 第二版 pdf https://p ...

  7. OS_进程调度：C++实现

    实验二.进程调度模拟实验 一.实验目的: 本实验模拟在单处理机环境下的处理机调度,帮助理解进程调度的概念,深入了解进程控制块的功能,以及进程的创建.撤销和进程各个状态间的转换过程. 二.实验内容: 进 ...

  8. HUD-Text插件使用方法

    插件的使用需要 1.HUDText PS:若存在在运行项目时出现了text(clone)而未有字体,点击该HUD的Text的Apply更新预制 由此可见,该插件时同过实例化预制的形式来实现打击浮字的 ...

  9. 黎活明8天快速掌握android视频教程--19_采用ListView实现数据列表显示

    1.首先整个程序也是采用mvc的框架 DbOpenHelper 类 package dB; import android.content.Context; import android.databas ...

  10. django 报错处理汇总

    运行 manage.py task时 ,makemigrations抛出以下错误, django.db.utils.OperationalError: (1045, "Access deni ...