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相关的业务简单,所以暂采用第一种的方式,当然实际当中很恨复杂的项目可以采用两种方式相结合的方 ...