全景虚拟漫游实现(three.js)
2017-02-14 17:47
986 查看
全景虚拟漫游其实看到很多例子,比如地图上的全景,校园的全景,之前在朋友圈流行转发的公司全景。但真的想起来要去研究或者实现一下,是前几日说工作上可能会有这样的一个需求。觉悟来得太晚,好奇心也不够重,这么好玩新奇的东西怎么一开始没想到去尝试呢?
由于对这方面的了解是一篇空白的,于是直接在google里搜,发现资料很少,说的稍微全一些的就属《打造H5里的“3D全景漫游”秘籍 》。几种方案中,打算决定采用ThreeJS,因为之前也稍微看过一点,也打算学习,这正好是一个机会。但是看到这篇里面的教程其实说的比较含糊,关键步骤应该都展示出来了,但是没有完整的代码还是不能让我有个很好的概念的。然后,我就愣住了。。。直到我问了一下公司的同事,他告诉我ThreeJS官网有现成的例子!!! 一下子又被自己的智商惊呆了。。。还是没有养成什么都先去官网看看的习惯。
本文以官网的例子为例,具体分析全景虚拟漫游的原理和实现细节。
开发3D程序的过程好比拍照或者录制视频,首先要有场景,然后场景中可能有几个物体,接着把相机放置在某处,并且摆放好位置对准某个地方,这样就能记录下来了。想要在浏览器中显示出来,还需要一个渲染器。至于渲染器到底做了什么或者原理是什么,我们可能先不要管。总的来说,相机,场景,渲染器是开启一个3D程序必须的三个要素。三者的关系如下图所示(虽然我对这张图不是特别得满意,但没有找到其他合适的,将就着用)。
这样就创建了一个渲染的立方体的3D程序,是不是挺简单的。
其中需要稍微说一下的是,相机创建的时候带的那些参数。相机分为正交相机和透视相机。透视相机下的世界是真实的效果,有着远小近大的关系。如下图,你很容易看出二者的区别。
透视相机的参数如下
用张图直观地表示。
如何把六张图片拼接成一个立方体
渲染器如何将立方体的效果处理得逼真
如何表示和实现相机角度的移动
首先我们要清楚,ThreeJS使用的坐标系是右手坐标系, x轴向右,y轴向上,z轴向前。创建相机或者物体时的默认位置是坐标系的原点。所以想要把六张图拼接成一个立方体,只要进行一些平移旋转变化就行了。主要注意的是,图片的朝向要一致向原点,这样相机才能都看得到。
至于渲染器如何把立方体变成全景漫游的效果,ThreeJS作者新定义了一个渲染器叫CSS3DRenderer封装渲染的过程。我大概看了一点,没太看懂,感觉大致是用CSS3的translate3d,scale属性将图片进行变形,以达到迷惑人眼的效果。
搜了一些资料,因为一直有点不明白为什么cubemap可以实现全景图的效果,原来是因为实现了球面到立方体的映射。如下图,
至于这样的图片是怎么做出来,就涉及到图像处理以及算法的问题了,暂时不在本文的考虑范围内。下图是一张完整的cubemap图。
最后一个问题,相机角度的移动明确地说是相机聚焦点的移动。此时,我们可以把720度的场景抽象出一个球。由于相机的焦距是确定的,只要确定相机的角度也就确定了相机的聚焦点。只要确定经度纬度即可确定角度,然后通过一些数学计算算出最后的聚焦点位置。而场景的运动是由相机视角的变动而相对运动起来的。所以当鼠标在横向移动时,经度跟着移动;而在鼠标纵向移动时,纬度进行变化。直角坐标与球坐标的转化关系为(以左手坐标系为例):
参考文献:
https://threejs.org/ ThreeJS官网
https://isux.tencent.com/3d.html 打造H5里的“3D全景漫游”秘籍
http://www.hewebgl.com/article/getarticle/27 WebGL中文网ThreeJS教程
https://zh.wikipedia.org/wiki/%E7%90%83%E5%BA%A7%E6%A8%99%E7%B3%BB 球坐标系
http://stackoverflow.com/questions/29678510/convert-21-equirectangular-panorama-to-cube-map
由于对这方面的了解是一篇空白的,于是直接在google里搜,发现资料很少,说的稍微全一些的就属《打造H5里的“3D全景漫游”秘籍 》。几种方案中,打算决定采用ThreeJS,因为之前也稍微看过一点,也打算学习,这正好是一个机会。但是看到这篇里面的教程其实说的比较含糊,关键步骤应该都展示出来了,但是没有完整的代码还是不能让我有个很好的概念的。然后,我就愣住了。。。直到我问了一下公司的同事,他告诉我ThreeJS官网有现成的例子!!! 一下子又被自己的智商惊呆了。。。还是没有养成什么都先去官网看看的习惯。
本文以官网的例子为例,具体分析全景虚拟漫游的原理和实现细节。
基本概念
用自己的话来说,ThreeJS是一个3D的JS库,封装了WebGL的功能。而WebGL(Web Graphic Library)又是什么呢,简而言之,就是在浏览器端开发3D图形相关的程序的一个库或者说一个标准。开发3D程序的过程好比拍照或者录制视频,首先要有场景,然后场景中可能有几个物体,接着把相机放置在某处,并且摆放好位置对准某个地方,这样就能记录下来了。想要在浏览器中显示出来,还需要一个渲染器。至于渲染器到底做了什么或者原理是什么,我们可能先不要管。总的来说,相机,场景,渲染器是开启一个3D程序必须的三个要素。三者的关系如下图所示(虽然我对这张图不是特别得满意,但没有找到其他合适的,将就着用)。
入门例子
直接上个简单例子。//创建场景 var scene = new THREE.Scene(); //创建透视相机 var camera = new THREE.PerspectiveCamera(75, window.innerWidth/window,innerHeight, 1, 1000); //创建一个渲染器,添加到body元素中 var renderer = new THREE.WebGLRenderer(); document.body.appendChild(renderer.domElement); //创建一个物体,几何+材质 =》三维物体 var geometry = new THREE.CubeGeometry(1,1,1); var material = new THREE.MeshBasicMaterial({color: 0x00ff00}); var cube = new THREE.Mesh(geometry, material); //将物体添加到场景中 scene.add(cube); //定义渲染函数 function render(){ requestAnimationFrame(render); cube.rotation.x += 0.1; cube.rotation.y += 0.1; renderer.render(scene, camera); } //实时渲染 render();
这样就创建了一个渲染的立方体的3D程序,是不是挺简单的。
其中需要稍微说一下的是,相机创建的时候带的那些参数。相机分为正交相机和透视相机。透视相机下的世界是真实的效果,有着远小近大的关系。如下图,你很容易看出二者的区别。
透视相机的参数如下
PerspectiveCamera( fov, aspect, near, far ) fov — Camera frustum(截面椎体) vertical field of view. aspect — Camera frustum aspect ratio. near — Camera frustum near plane. far — Camera frustum far plane.
用张图直观地表示。
全景虚拟漫游分析
人的眼睛其实就相当于相机。那么做虚拟漫游重点就在于如何构造720度无死角的场景,而相机处于正中间,也就是坐标系原点(未必,但这样更方便)。由于人在不同的方向看到的最远距离是一样,所以理论上全景相对于人眼来说,是一个球形。但是如果将场景映射到球形上,似乎有些复杂。这里我们把全景抽象出一个立方体,对我们来说有上下左右前后六个面。原理分析清楚了,关键的问题就是如下几个了:如何把六张图片拼接成一个立方体
渲染器如何将立方体的效果处理得逼真
如何表示和实现相机角度的移动
首先我们要清楚,ThreeJS使用的坐标系是右手坐标系, x轴向右,y轴向上,z轴向前。创建相机或者物体时的默认位置是坐标系的原点。所以想要把六张图拼接成一个立方体,只要进行一些平移旋转变化就行了。主要注意的是,图片的朝向要一致向原点,这样相机才能都看得到。
至于渲染器如何把立方体变成全景漫游的效果,ThreeJS作者新定义了一个渲染器叫CSS3DRenderer封装渲染的过程。我大概看了一点,没太看懂,感觉大致是用CSS3的translate3d,scale属性将图片进行变形,以达到迷惑人眼的效果。
搜了一些资料,因为一直有点不明白为什么cubemap可以实现全景图的效果,原来是因为实现了球面到立方体的映射。如下图,
至于这样的图片是怎么做出来,就涉及到图像处理以及算法的问题了,暂时不在本文的考虑范围内。下图是一张完整的cubemap图。
最后一个问题,相机角度的移动明确地说是相机聚焦点的移动。此时,我们可以把720度的场景抽象出一个球。由于相机的焦距是确定的,只要确定相机的角度也就确定了相机的聚焦点。只要确定经度纬度即可确定角度,然后通过一些数学计算算出最后的聚焦点位置。而场景的运动是由相机视角的变动而相对运动起来的。所以当鼠标在横向移动时,经度跟着移动;而在鼠标纵向移动时,纬度进行变化。直角坐标与球坐标的转化关系为(以左手坐标系为例):
x = r*sin( theta ) *cos( phi); z = r*cos( theta ); y = r*sin( theta ) * sin( phi );
全景虚拟漫游实现
结合上述的分析,以下代码是官网的代码,加上了注释。<script src="js/three.js"></script> <script src="js/renderers/CSS3DRenderer.js"></script> <script> //定义相机,场景,渲染器,是3D场景形成的三大要素 var camera, scene, renderer; //定义几何体,材质,以及几何体加材质之后形成的网格 var geometry, material, mesh; //生成三维向量(0,0,0),相机的目标点 var target = new THREE.Vector3(); //lon 经度 竖着的 有东经 西经 ;lat 维度 横着的 有南纬 北纬 //该经纬表示相机的聚焦点,初始状态在前面 var lon = 90, lat = 0; //同样是相机的聚焦点,上面是角度,此处转化为弧度制 var phi = 0, theta = 0; //移动端用户输入的x,y var touchX, touchY; init(); animate(); function init() { //相机的默认位置在坐标系的原点 camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 1000 ); scene = new THREE.Scene(); //右手坐标系,z朝向观察者,即相机。下面是将六个面拼接成立方体,分别对应 var sides = [ { url: 'res/Bridge2/posx.jpg', //左侧 position: [ -512, 0, 0 ], rotation: [ 0, Math.PI / 2, 0 ] }, { url: 'res/Bridge2/negx.jpg', //右侧 position: [ 512, 0, 0 ], rotation: [ 0, -Math.PI / 2, 0 ] }, { url: 'res/Bridge2/posy.jpg', //上侧 position: [ 0, 512, 0 ], rotation: [ Math.PI / 2, 0, Math.PI ] }, { url: 'res/Bridge2/negy.jpg', // bf80 下侧 position: [ 0, -512, 0 ], rotation: [ -Math.PI / 2, 0, Math.PI ] }, { url: 'res/Bridge2/posz.jpg', //前 position: [ 0, 0, 512 ], rotation: [ 0, Math.PI, 0 ] }, { url: 'res/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; //CSS3DObject 是拓展出去的方法,原型是object3D,见CSS3DRenderer.js var object = new THREE.CSS3DObject( element ); object.position.fromArray( side.position ); object.rotation.fromArray( side.rotation ); scene.add( object ); } //渲染器也是拓展出来的方法,见CSS3DRenderer.js 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 ) { //鼠标的移动距离 currentEvent.movementX = currentEvent.screenX - previousEvent.screenX 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(); //移动端没有movement,所以直接用touchX touchY去计算移动的距离 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 ); }
参考文献:
https://threejs.org/ ThreeJS官网
https://isux.tencent.com/3d.html 打造H5里的“3D全景漫游”秘籍
http://www.hewebgl.com/article/getarticle/27 WebGL中文网ThreeJS教程
https://zh.wikipedia.org/wiki/%E7%90%83%E5%BA%A7%E6%A8%99%E7%B3%BB 球坐标系
http://stackoverflow.com/questions/29678510/convert-21-equirectangular-panorama-to-cube-map
相关文章推荐
- 04 使用three.js开发全景漫游 全景图切换的实现
- HTML5画布知识:在Three.js文件实现WebGL Plane
- three.js中3D视野的缩放实现
- 通过three.js实现简易3D打印模型切片展示
- three.js粒子效果(分别基于CPU&GPU实现)
- 基于Three.js的360度全景图片
- THREE.JS入门教程(6)创建自己的全景图实现步骤
- 19 Three.js实现雾化效果
- three.js实现围绕某物体旋转
- threesixty.min.js 和jquery.threesixty.js使用总结----实现360度展示
- 11 Three.js使用Detector.js插件实现兼容性检测
- Three.js打造H5里的“3D全景漫游”秘籍
- three.js实现一个网格
- three.js中3D视野的缩放实现
- Three.js 类的粗略总结和实现
- three.js插件实现立体动感视频播放效果
- <Three.js>(第三节)全景漫游
- 拾取模型的原理及其在THREE.JS中的代码实现
- 实现Three.JS中鼠标选择几何图元
- 15 Three.js实现阴影效果