//监听横竖屏重新设置尺寸 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; // Click action mouse.x = ( event.clientX / renderer.domElement.clientWidth ) * 2 - 1; mouse.y = - ( event.clientY / renderer.domElement.clientHeight ) * 2 + 1; raycaster.setFromCamera( mouse, camera ); var intersects = raycaster.intersectObjects( scene.children );//第一个是最上面一层的元素 console.log("点击的元素",intersects); if ( intersects.length > 0 ) {//如果点到小圆点 就执行回调函数回调函数为goto_p try { intersects[0].object.callback(); } catch(err) {} } } 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; } // touch event start function onDocumentTouchDown( event ) { is_touch=true; event.preventDefault(); isUserInteracting = true; onPointerDownPointerX = event.touches[ 0 ].clientX; onPointerDownPointerY = event.touches[ 0 ].clientY; if(is_start){ onPointerDownLon = lon; onPointerDownLat = lat; } // For Click action mouse.x = ( onPointerDownPointerX / renderer.domElement.clientWidth ) * 2 - 1; mouse.y = - ( onPointerDownPointerY / renderer.domElement.clientHeight ) * 2 + 1; raycaster.setFromCamera( mouse, camera ); var intersects = raycaster.intersectObjects( scene.children ); console.log('touchDown',lon,lat); if ( intersects.length > 0 ) { try { intersects[0].object.callback(); } catch(err) {} } } function onDocumentTouchMove( event ) { if(is_start){ if ( isUserInteracting === true ) { lon = ( onPointerDownPointerX - event.touches[ 0 ].clientX ) * 0.1 + onPointerDownLon; lat = ( event.touches[ 0 ].clientY - onPointerDownPointerY ) * 0.1 + onPointerDownLat; } } } function onDocumentTouchUp( event ) { is_touch=false; } // touch event end // set function onDocumentTouchDown2( event ) { tsa = event.touches[0].clientY; console.log( '@:'+event.touches[0].clientY ); event.preventDefault(); } function onDocumentMouseWheel( event ) { camera.fov += event.deltaY * 0.05; camera.updateProjectionMatrix(); }
动画播放和陀螺仪
function animate() {//播放动画 if(isPlay){ TWEEN.update(); update(); requestAnimationFrame( animate ); } } o.onOrient = function (obj) {//重力感应计算角度 if(is_start){ //最新经度 new_longitude = obj.lon; move_longitude=new_longitude-last_longitude; //最新纬度 new_latitude = obj.lat; move_latitude = new_latitude-last_latitude; //判断经纬度 if(move_longitude>=300){ move_longitude=move_longitude-361; }else if(move_longitude<=-300){ move_longitude=move_longitude+359; } if(move_latitude>=300){ move_latitude=move_latitude-361; }else if(move_latitude<=-300){ move_latitude=move_latitude+359; } if( is_touch ){ move_longitude=0; move_latitude=0; }else{ move_longitude=move_longitude*0.6; move_latitude=move_latitude*0.6; } //计算得出重力感应的经纬度 lon=lon-move_longitude; last_longitude = obj.lon; lat = lat-move_latitude; last_latitude = obj.lat; } }; function update() {//更新摄像机位置，旋转平移 //lat = Math.max( -6, Math.min( 6, lat ) );//设置lat纬度的范围，只在一个范围内旋转 phi = THREE.Math.degToRad( 90 - lat ); theta = THREE.Math.degToRad( lon ); camera.target.x = 500 * Math.sin( phi ) * Math.cos( theta );//X轴的坐标 camera.target.y = 500 * Math.cos( phi );//y轴的坐标 camera.target.z = 500 * Math.sin( phi ) * Math.sin( theta ) ;//z轴的坐标 camera.lookAt( camera.target ); renderer.render( scene, camera );//重新渲染 }
执行所有
//执行所有 is_start=true; init(); o.init(); animate();
综上，炫酷的3D重力感应H5就出来啦！