先附上两张成果图,我们的主要功能就是以上两个,实现全景图的浏览,将全景标记放在图上并实现属性查询。
注:并不是所有的图片都能当作全景图,可以到专门的网站下载全景图使用,有些拍摄的不好的全景图也会出现衔接的问题。
一.基本原理
我们可以把我们我们观察到的对象想象成一个球体,而全景图就是附在球体上的一张图片,我们通过鼠标移动来改变我们的视角,从而到达全景图的其他地方。
我估计将球体做的很小(如上面两张图)就是为了直观的看出这是一个球体。而通过特定的相机视角和 透视投影我们可以全景图尽可能少的发生变形。
当我们把视角,或者说相机的焦距稍稍变化一些,或者把球体的半径变大一些,我们就发现不了球体的存在,从而有身临其境的感觉。
还有一个功能是将我们特定的poi点标记在全景上,如下图,这也不是一个简单的问题,因为我们要在数据库中记录poi点的位置,然后跟随者我们全景图的变化位置要发生变化,这就涉及到了坐标转换的问题,我们在下面探讨。
一.参数初始化
在上一篇博客提到过要生成一个treejs场景的几个要素,在全景图中也无外乎这么几个(相机,渲染器,场景)。
1.1 初始化相机
我们要想让全景有更好的视觉效果所使用的相机最好是透视投影:这种投影模式旨在模仿人眼所看到的方式。它是用于渲染3D场景的最常用的投影模式。fov参数是视场角 人的视场角大致是30度到100度,这里设置75度左右。
camera = new THREE.PerspectiveCamera( fov, window.innerWidth / window.innerHeight, 1, 1100 );
camera.target = new THREE.Vector3( 0, 0, 0 );
我们的标记不是三维元素,他的大小不需要随着我们的视角改变,所以我们使用正投影:在这种投影模式下,渲染图像中物体的大小与摄像机的距离无关,保持不变。这可以用于渲染2D场景和UI元素等等。
cameraOrtho = new THREE.OrthographicCamera( - window.innerWidth / 2, window.innerWidth / 2, window.innerHeight / 2, - window.innerHeight / 2, 1, 10 );
cameraOrtho.position.z = 10;
1.2 初始化场景
场景也要初始化两个:
scene = new THREE.Scene();
sceneOrtho = new THREE.Scene();
1.3 全景初始化
创建容纳全景的球形集合体:
mesh = new THREE.Mesh( new THREE.SphereGeometry( 2, 60, 40 ),
new THREE.MeshBasicMaterial(
{ map: THREE.ImageUtils.loadTexture( 'textures/pano-1.jpg' ) }
) );
mesh.scale.x = -1;
scene.add( mesh );
第一个参数是半径,必须大于1小于某个数,第二三个参数为经纬度切片数,值太小全景图会变形,值越大越精细,但是会影响性能
1.4 创建渲染器
renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.autoClear = false;
container.appendChild( renderer.domElement );
1.5 初始化动画
function animate() {
requestAnimationFrame( animate );
renderer.clear();
renderer.render( scene, camera );
}
二.实现移动视角
2.1 事件监听
对dom和window进行事件监听
document.addEventListener( 'mousedown', onDocumentMouseDown, false );
document.addEventListener( 'mousemove', onDocumentMouseMove, false );
document.addEventListener( 'mouseup', onDocumentMouseUp, false );
window.addEventListener( 'resize', onWindowResize, false );
2.2 鼠标按下事件
function onDocumentMouseDown( event ) {
event.preventDefault();
isUserInteracting = true;
onPointerDownPointerX = event.clientX;
onPointerDownPointerY = event.clientY;
onPointerDownLon = lon;
onPointerDownLat = lat;
}
isUserInteracting 用于标识用户是否按下鼠标,记录下此时鼠标的屏幕坐标和初始经纬度。
注意这个经纬度不是传统意义上的经纬度,是我们模仿地球经纬度虚拟出的一个坐标,用于标记球体上的任意位置,方便计算。
2.3 鼠标移动,弹起事件
由鼠标移动的距离来计算屏幕中心移动的经纬度。
function onDocumentMouseMove( event ) {
if ( isUserInteracting ) {
lon = ( onPointerDownPointerX - event.clientX ) * 0.1