three.js全景
<!DOCTYPE html> <html lang="en"> <head> <title>three.js webgl - equirectangular 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: 0px; overflow: hidden; } #info { position: absolute; top: 0px; width: 100%; color: #ffffff; padding: 5px; font-family:Monospace; font-size:13px; font-weight: bold; text-align:center; } a { color: #ffffff; } </style> </head> <body> <div id="container"></div> <div id="info"> <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 /> drag equirectangular texture into the page. </div> <script src="../build/three.js"></script> <script> var camera, scene, renderer;//相机 场景 渲染器 var isUserInteracting = false, onMouseDownMouseX = 0, onMouseDownMouseY = 0, lon = 0, onMouseDownLon = 0, lat = 0, onMouseDownLat = 0, phi = 0, theta = 0; init(); animate(); function init() { var container, mesh; container = document.getElementById( 'container' ); camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 1100 );//透视投影照相机 camera.target = new THREE.Vector3( 0, 0, 0 );//设置相机所看的位置 scene = new THREE.Scene();//场景 var geometry = new THREE.SphereGeometry( 500, 60, 40 );//SphereGeometry用来在三维空间内创建一个球体对象. geometry.scale( - 1, 1, 1 ); var material = new THREE.MeshBasicMaterial( { //使用基本材质(BasicMaterial)的物体,渲染后物体的颜色始终为该材质的颜色,不会由于光照产生明暗、阴影效果 map: new THREE.TextureLoader().load( 'textures/quanjing1.jpg' ) } ); mesh = new THREE.Mesh( geometry, material );//Mesh(图元装配函数) 生成三维物体 scene.add( mesh );//网格添加到场景中 renderer = new THREE.WebGLRenderer();//定义渲染器 renderer.setPixelRatio( window.devicePixelRatio ); renderer.setSize( window.innerWidth, window.innerHeight );//设定尺寸 container.appendChild( renderer.domElement );//将场景加入到画面 document.addEventListener( 'mousedown', onDocumentMouseDown, false ); document.addEventListener( 'mousemove', onDocumentMouseMove, false ); document.addEventListener( 'mouseup', onDocumentMouseUp, false ); document.addEventListener( 'wheel', onDocumentMouseWheel, false ); // document.addEventListener( 'dragover', function ( event ) { event.preventDefault(); event.dataTransfer.dropEffect = 'copy'; }, false ); document.addEventListener( 'dragenter', function ( event ) { document.body.style.opacity = 0.5; }, false ); document.addEventListener( 'dragleave', function ( event ) { document.body.style.opacity = 1; }, false ); document.addEventListener( 'drop', function ( event ) { event.preventDefault(); var reader = new FileReader(); reader.addEventListener( 'load', function ( event ) { material.map.image.src = event.target.result; material.map.needsUpdate = true; }, false ); reader.readAsDataURL( event.dataTransfer.files[ 0 ] ); document.body.style.opacity = 1; }, 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(); isUserInteracting = true; onPointerDownPointerX = event.clientX; onPointerDownPointerY = event.clientY; onPointerDownLon = lon; onPointerDownLat = lat; } function onDocumentMouseMove( event ) { if ( isUserInteracting === true ) { lon = ( onPointerDownPointerX - event.clientX ) * 0.1 + onPointerDownLon; lat = ( event.clientY - onPointerDownPointerY ) * 0.1 + onPointerDownLat; } } function onDocumentMouseUp( event ) { isUserInteracting = false; } function onDocumentMouseWheel( event ) { camera.fov += event.deltaY * 0.05; camera.updateProjectionMatrix(); } function animate() { requestAnimationFrame( animate ); update(); } function update() { if ( isUserInteracting === false ) { lon += 0.1; } lat = Math.max( - 85, Math.min( 85, lat ) ); phi = THREE.Math.degToRad( 90 - lat ); theta = THREE.Math.degToRad( lon ); camera.target.x = 500 * Math.sin( phi ) * Math.cos( theta ); camera.target.y = 500 * Math.cos( phi ); camera.target.z = 500 * Math.sin( phi ) * Math.sin( theta ); camera.lookAt( camera.target ); /* // distortion camera.position.copy( camera.target ).negate(); */ renderer.render( scene, camera ); } </script> </body> </html>
three.js全景的更多相关文章
- three.js全景漫游实践
Hello 小伙伴们,如果觉得本文还不错,记得给个 star , 小伙伴们的 star 是我持续更新的动力!GitHub 地址 简介 全景图分两种 由六张正方形图片组成的SkyBox 一整张的宽高比为 ...
- 现在做 Web 全景合适吗?
Web 全景在以前带宽有限的条件下常常用来作为街景和 360° 全景图片的查看.它可以给用户一种 self-immersive 的体验,通过简单的操作,自由的查看周围的物体.随着一些运营商推出大王卡等 ...
- 基于Three.js的360度全景--photo-sphere-viewer--简介
这个是基于three.js的全景插件 photo-sphere-viewer.js ---------------------------------------- 1.能添加热点: 2.能调用陀 ...
- three.js 实现全景以及优化(2)
继昨天全景实现后,再做了一个全景图切换实验; code:https://github.com/Thinkia/threejs_/blob/master/test/test1-panorama/inde ...
- three.js 实现全景以及优化(1)
实现一个三维全景; 然后思考优化问题; 于是我问了下webgl技术交流群朋友有啥解决方案; 对于krpano.js 的了解,只是知道百度全景用了这个技术; 最后还是选择了群友给出的three.js ...
- 全景播放器-js+flash
经过一个多月的辛苦,全景播放展示平台终于做出来了,主要用到的是js+flash技术.有什么不足的地方园子里的兄弟还请多多指教啊 <iframe src="http://www.ipa ...
- <Three.js>(第三节)全景漫游
一.实验内容 通过上次实验,了解了Three.js创建场景的基本步骤.这一节,我们将通过Three.js实现全景漫游功能.如下图: 全景图是获取一个3D场景中的不同角度的图片,然后通过拼接.融合实现3 ...
- 基于Three.js的全景---photo-sphere-viewer
以前公司其他几个前端做全景都是用软件生成,由于本人比较懒,不想去折腾那个软件,于是乎就有了下面的事...... 这个是基于three.js的全景插件 photo-sphere-viewer.js ...
- Three.js 实现3D全景侦探小游戏🕵️
背景 你是嘿嘿嘿侦探社实习侦探️,接到上级指派任务,到甄开心小镇调查市民甄不戳宝石失窃案,根据线人流浪汉老石提供的线索,小偷就躲在小镇,快把他找出来,帮甄不戳寻回失窃的宝石吧! 本文使用 Three ...
随机推荐
- knn-伪代码与实现过程
knn特点 优点:精度高,对异常值不明感,无数据输入嘉定 缺点:计算复杂度高,空间复杂度高 适用范围:数值型和标称型 knn算法的伪代码 1.计算已知类别数据集中的点与当前之间的距离 2.按照距离递增 ...
- 11i和R12配置JAR包
R11:$IAS_ORACLE_HOME/Apache/Jserv/etc/jserv.properties R12: 方法1:直接解压JAR包放到$JAVA_TOP下: 方法2:编辑:$ORA_CO ...
- jq添加数组
var array=new Array(); array.push(值); //向数组中添加值 array.shift(值);//向数组中移除值
- 浅谈C++之冒泡排序、希尔排序、快速排序、插入排序、堆排序、基数排序性能对比分析之后续补充说明(有图有真相)
如果你觉得我的有些话有点唐突,你不理解可以想看看前一篇<C++之冒泡排序.希尔排序.快速排序.插入排序.堆排序.基数排序性能对比分析>. 这几天闲着没事就写了一篇<C++之冒泡排序. ...
- [转载]PV操作简单理解
原文链接:http://blog.csdn.net/liushuijinger/article/details/7586656 进程通常分为就绪.运行和阻塞三个工作状态.三种状态在某些条件下可以转 ...
- Android Studio 导出jar包
不像在Eclipse,可以直接导出jar包.AndroidStudio只可以生成aar包. 在网上看到许多朋友问怎么可以像Eclipse一样导出jar包,其实我们只要知道它的原理就可以了. 用jar命 ...
- ng-repeat 嵌套访问父作用域里的属性
在一个项目中,需要嵌套循环输出一个二维表的里的数据 数据结构 [ { id:1, list:[ { id:1, name:'li' } ] }, { id:2, list:[ { id:1, name ...
- C# 调用webservice 几种办法(转载)
原文地址: http://www.cnblogs.com/eagle1986/archive/2012/09/03/2669699.html //=========================== ...
- 常用js函数封装
see them... // 获取网址的get参数 var GET = function(name) { var reg = new RegExp("(^|&)" + na ...
- 让一个图片在div中居中(四种方法)
第一种方法: <div class="title"> <div class="flag"></div> <div cl ...