1. <!DOCTYPE html>
  2. <html lang="en">
  3.     <head>
  4.         <title>three.js webgl - equirectangular panorama</title>
  5.         <meta charset="utf-8">
  6.         <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
  7.         <style>
  8.             body {
  9.                 background-color: #000000;
  10.                 margin: 0px;
  11.                 overflow: hidden;
  12.             }
  13.  
  14.             #info {
  15.                 position: absolute;
  16.                 top: 0px; width: 100%;
  17.                 color: #ffffff;
  18.                 padding: 5px;
  19.                 font-family:Monospace;
  20.                 font-size:13px;
  21.                 font-weight: bold;
  22.                 text-align:center;
  23.             }
  24.  
  25.             a {
  26.                 color: #ffffff;
  27.             }
  28.         </style>
  29.     </head>
  30.     <body>
  31.  
  32.         <div id="container"></div>
  33.         <div id="info">
  34.             <a href="http://threejs.org" target="_blank">three.js webgl</a> - equirectangular panorama demo. photo by <a href="http://www.flickr.com/photos/jonragnarsson/2294472375/" target="_blank">Jón Ragnarsson</a>.<br />
  35.             drag equirectangular texture into the page.
  36.         </div>
  37.  
  38.         <script src="../build/three.js"></script>
  39.  
  40.         <script>
  41.  
  42.             var camera, scene, renderer;//相机 场景 渲染器
  43.  
  44.             var isUserInteracting = false,
  45.             onMouseDownMouseX = 0, onMouseDownMouseY = 0,
  46.             lon = 0, onMouseDownLon = 0,
  47.             lat = 0, onMouseDownLat = 0,
  48.             phi = 0, theta = 0;
  49.  
  50.             init();
  51.             animate();
  52.  
  53.             function init() {
  54.  
  55.                 var container, mesh;
  56.  
  57.                 container = document.getElementById( 'container' );
  58.  
  59.                 camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 1100 );//透视投影照相机
  60.                 camera.target = new THREE.Vector3( 0, 0, 0 );//设置相机所看的位置
  61.  
  62.                 scene = new THREE.Scene();//场景
  63.  
  64.                 var geometry = new THREE.SphereGeometry( 500, 60, 40 );//SphereGeometry用来在三维空间内创建一个球体对象.
  65.                 geometry.scale( - 1, 1, 1 );
  66.  
  67.                 var material = new THREE.MeshBasicMaterial( { //使用基本材质（BasicMaterial）的物体，渲染后物体的颜色始终为该材质的颜色，不会由于光照产生明暗、阴影效果
  68.                     map: new THREE.TextureLoader().load( 'textures/quanjing1.jpg' )
  69.                 } );
  70.  
  71.                 mesh = new THREE.Mesh( geometry, material );//Mesh（图元装配函数）   生成三维物体
  72.  
  73.                 scene.add( mesh );//网格添加到场景中
  74.  
  75.                 renderer = new THREE.WebGLRenderer();//定义渲染器
  76.                 renderer.setPixelRatio( window.devicePixelRatio );
  77.                 renderer.setSize( window.innerWidth, window.innerHeight );//设定尺寸
  78.                 container.appendChild( renderer.domElement );//将场景加入到画面
  79.  
  80.                 document.addEventListener( 'mousedown', onDocumentMouseDown, false );
  81.                 document.addEventListener( 'mousemove', onDocumentMouseMove, false );
  82.                 document.addEventListener( 'mouseup', onDocumentMouseUp, false );
  83.                 document.addEventListener( 'wheel', onDocumentMouseWheel, false );
  84.  
  85.                 //
  86.  
  87.                 document.addEventListener( 'dragover', function ( event ) {
  88.  
  89.                     event.preventDefault();
  90.                     event.dataTransfer.dropEffect = 'copy';
  91.  
  92.                 }, false );
  93.  
  94.                 document.addEventListener( 'dragenter', function ( event ) {
  95.  
  96.                     document.body.style.opacity = 0.5;
  97.  
  98.                 }, false );
  99.  
  100.                 document.addEventListener( 'dragleave', function ( event ) {
  101.  
  102.                     document.body.style.opacity = 1;
  103.  
  104.                 }, false );
  105.  
  106.                 document.addEventListener( 'drop', function ( event ) {
  107.  
  108.                     event.preventDefault();
  109.  
  110.                     var reader = new FileReader();
  111.                     reader.addEventListener( 'load', function ( event ) {
  112.  
  113.                         material.map.image.src = event.target.result;
  114.                         material.map.needsUpdate = true;
  115.  
  116.                     }, false );
  117.                     reader.readAsDataURL( event.dataTransfer.files[ 0 ] );
  118.  
  119.                     document.body.style.opacity = 1;
  120.  
  121.                 }, false );
  122.  
  123.                 //
  124.  
  125.                 window.addEventListener( 'resize', onWindowResize, false );
  126.  
  127.             }
  128.  
  129.             function onWindowResize() {
  130.  
  131.                 camera.aspect = window.innerWidth / window.innerHeight;
  132.                 camera.updateProjectionMatrix();
  133.  
  134.                 renderer.setSize( window.innerWidth, window.innerHeight );
  135.  
  136.             }
  137.  
  138.             function onDocumentMouseDown( event ) {
  139.  
  140.                 event.preventDefault();
  141.  
  142.                 isUserInteracting = true;
  143.  
  144.                 onPointerDownPointerX = event.clientX;
  145.                 onPointerDownPointerY = event.clientY;
  146.  
  147.                 onPointerDownLon = lon;
  148.                 onPointerDownLat = lat;
  149.  
  150.             }
  151.  
  152.             function onDocumentMouseMove( event ) {
  153.  
  154.                 if ( isUserInteracting === true ) {
  155.  
  156.                     lon = ( onPointerDownPointerX - event.clientX ) * 0.1 + onPointerDownLon;
  157.                     lat = ( event.clientY - onPointerDownPointerY ) * 0.1 + onPointerDownLat;
  158.  
  159.                 }
  160.  
  161.             }
  162.  
  163.             function onDocumentMouseUp( event ) {
  164.  
  165.                 isUserInteracting = false;
  166.  
  167.             }
  168.  
  169.             function onDocumentMouseWheel( event ) {
  170.  
  171.                 camera.fov += event.deltaY * 0.05;
  172.                 camera.updateProjectionMatrix();
  173.  
  174.             }
  175.  
  176.             function animate() {
  177.  
  178.                 requestAnimationFrame( animate );
  179.                 update();
  180.  
  181.             }
  182.  
  183.             function update() {
  184.  
  185.                 if ( isUserInteracting === false ) {
  186.  
  187.                     lon += 0.1;
  188.  
  189.                 }
  190.  
  191.                 lat = Math.max( - 85, Math.min( 85, lat ) );
  192.                 phi = THREE.Math.degToRad( 90 - lat );
  193.                 theta = THREE.Math.degToRad( lon );
  194.  
  195.                 camera.target.x = 500 * Math.sin( phi ) * Math.cos( theta );
  196.                 camera.target.y = 500 * Math.cos( phi );
  197.                 camera.target.z = 500 * Math.sin( phi ) * Math.sin( theta );
  198.  
  199.                 camera.lookAt( camera.target );
  200.  
  201.                 /*
  202.                 // distortion
  203.                 camera.position.copy( camera.target ).negate();
  204.                 */
  205.  
  206.                 renderer.render( scene, camera );
  207.  
  208.             }
  209.  
  210.         </script>
  211.     </body>
  212. </html>

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

  1. three.js全景漫游实践

    Hello 小伙伴们,如果觉得本文还不错,记得给个 star , 小伙伴们的 star 是我持续更新的动力!GitHub 地址 简介 全景图分两种 由六张正方形图片组成的SkyBox 一整张的宽高比为 ...

  2. 现在做 Web 全景合适吗？

    Web 全景在以前带宽有限的条件下常常用来作为街景和 360° 全景图片的查看.它可以给用户一种 self-immersive 的体验,通过简单的操作,自由的查看周围的物体.随着一些运营商推出大王卡等 ...

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

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

  4. three.js 实现全景以及优化（2）

    继昨天全景实现后,再做了一个全景图切换实验; code:https://github.com/Thinkia/threejs_/blob/master/test/test1-panorama/inde ...

  5. three.js 实现全景以及优化（1）

    实现一个三维全景;  然后思考优化问题; 于是我问了下webgl技术交流群朋友有啥解决方案; 对于krpano.js 的了解,只是知道百度全景用了这个技术; 最后还是选择了群友给出的three.js  ...

  6. 全景播放器-js+flash

    经过一个多月的辛苦,全景播放展示平台终于做出来了,主要用到的是js+flash技术.有什么不足的地方园子里的兄弟还请多多指教啊 <iframe  src="http://www.ipa ...

  7. <Three.js>（第三节）全景漫游

    一.实验内容 通过上次实验,了解了Three.js创建场景的基本步骤.这一节,我们将通过Three.js实现全景漫游功能.如下图: 全景图是获取一个3D场景中的不同角度的图片,然后通过拼接.融合实现3 ...

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

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

  9. Three.js 实现3D全景侦探小游戏🕵️

    背景 你是嘿嘿嘿侦探社实习侦探️,接到上级指派任务,到甄开心小镇调查市民甄不戳宝石失窃案,根据线人流浪汉老石‍提供的线索,小偷就躲在小镇,快把他找出来,帮甄不戳寻回失窃的宝石吧! 本文使用 Three ...

随机推荐

  1. Open Xml 读取Excel中的图片

      在我的一个项目中,需要分析客户提供的Excel, 读出其中的图片信息(显示在Excel的第几行,第几列,以及图片本身). 网络上有许多使用Open Xml插入图片到Word,Excel的文章, 但 ...

  2. Java性能调优之：idea变慢解决

    今天搬砖的时候遇到一个问题,idea总是卡死,完全无法愉快的玩耍.幸好机器是Linux系统的.于是通过以下方式解决了问题: 通过top命令,查看系统运行状态发现4个CPU中有1个CPU用户占用率为10 ...

  3. markdown语法与使用

    Markdown是一种可以使用普通文本编辑器编写的标记语言,通过简单的标记语法,它可以使普通文本内容具有一定的格式. 语法 # 文本 =>h1标签 ##文本 =>h2标签 *文本* =&g ...

  4. JDBC之存储过程

    存储过程的语法创建就不说了,这里这篇博客 就挺详细了http://blog.sina.com.cn/s/blog_52d20fbf0100ofd5.html. 1. Java代码调用没有参数的存错过程 ...

  5. CAIN怎么嗅探路由密码

    Cain & Abel 是由Oxid.it开发的一个针对Microsoft操作系统的免费口令恢复工具.号称穷人使用的L0phtcrack.它的功能十分强大,可以网络嗅探,网络欺骗,破解加密口令 ...

  6. python3 黑板客爬虫闯关游戏（四）

    这关较第三关难度增加许多,主要多了并发编程 密码一共有100位,分布在13页,每页打开的时间在15秒左右,所以理所当然的想到要用并发,但是后来发现同IP访问间隔时间不能小于8秒,不然会返回404,所以 ...

  7. 通过rsync+inotify实现数据的实时备份

    我讲到过利用rsync实现数据的镜像和备份,但是要实现数据的实时备份,单独靠rsync还不能实现,本文就讲述下如何实现数据的实时备份. 一.rsync的优点与不足 与传统的cp.tar备份方式相比,r ...

  8. OC编程之道-创建对象之抽象工厂方法

    定义:提供一个创建一系列相关或相互依赖对象的接口,而无需指定他们具体的类.       <AbstractProductA> <AbstractProductB> <Ab ...

  9. day7

    本节作业: 选课系统 角色:学校.学员.课程.讲师要求:1. 创建北京.上海 2 所学校2. 创建linux , python , go 3个课程 , linux\py 在北京开, go 在上海开3. ...

  10. NodeJS+Express下构建后端MVC文件结构

    关于MVC的结构大体上有两种方式,其一按照层级进行文件夹分类,其二是按照业务进行文件夹分类.关于这个demo相关的业务简单,所以暂采用第一种的方式,当然实际当中很恨复杂的项目可以采用两种方式相结合的方 ...