在好例子网,分享、交流、成长!
您当前所在位置:首页js 开发实例Ajax框架/RIA → 利用html5实现的360度全景图浏览(带天地)

利用html5实现的360度全景图浏览(带天地)

Ajax框架/RIA

下载此实例
  • 开发语言:js
  • 实例大小:0.36M
  • 下载次数:116
  • 浏览次数:17446
  • 发布时间:2014-03-31
  • 实例类别:Ajax框架/RIA
  • 发 布 人:bz2009
  • 所需积分:3
 相关标签: HTML5 HTML 360 全景浏览 全景

实例介绍

【实例简介】利用html5实现的360度全景图浏览(带天地)
【实例截图】
【核心代码】

 

var camera, scene, renderer;

   var texture_placeholder,
   isUserInteracting = false,
   onMouseDownMouseX = 0, onMouseDownMouseY = 0,
   lon = 90, onMouseDownLon = 0,
   lat = 0, onMouseDownLat = 0,
   phi = 0, theta = 0,
   target = new THREE.Vector3();

   init();

   function init() {

    var container, mesh;

    container = document.getElementById( 'container' );

    camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 1100 );

    scene = new THREE.Scene();

    scene.add( camera );

    texture_placeholder = document.createElement( 'canvas' );
    texture_placeholder.width = 128;
    texture_placeholder.height = 128;

    var context = texture_placeholder.getContext( '2d' );
    context.fillStyle = 'rgb( 200, 200, 200 )';
    context.fillRect( 0, 0, texture_placeholder.width, texture_placeholder.height );

    var materials = [

     loadTexture( 'images/textures/cube/skybox/px.jpg' ), // right
     loadTexture( 'images/textures/cube/skybox/nx.jpg' ), // left
     loadTexture( 'images/textures/cube/skybox/py.jpg' ), // top
     loadTexture( 'images/textures/cube/skybox/ny.jpg' ), // bottom
     loadTexture( 'images/textures/cube/skybox/pz.jpg' ), // back
     loadTexture( 'images/textures/cube/skybox/nz.jpg' )  // front

    ];

    mesh = new THREE.Mesh( new THREE.CubeGeometry( 300, 300, 300, 7, 7, 7, materials ), new THREE.MeshFaceMaterial() );
    mesh.scale.x = - 1;
    scene.add( mesh );

    renderer = new THREE.CanvasRenderer();
    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( 'mousewheel', onDocumentMouseWheel, false );

    document.addEventListener( 'touchstart', onDocumentTouchStart, false );
    document.addEventListener( 'touchmove', onDocumentTouchMove, false );

   }

   function loadTexture( path ) {

    var texture = new THREE.Texture( texture_placeholder );
    var material = new THREE.MeshBasicMaterial( { map: texture, overdraw: true } );

    var image = new Image();
    image.onload = function () {

     texture.needsUpdate = true;
     material.map.image = this;

     render();

    };
    image.src = path;

    return material;

   }

   function onDocumentMouseDown( event ) {

    event.preventDefault();

    isUserInteracting = true;

    onPointerDownPointerX = event.clientX;
    onPointerDownPointerY = event.clientY;

    onPointerDownLon = lon;
    onPointerDownLat = lat;

   }

   function onDocumentMouseMove( event ) {

    if ( isUserInteracting ) {

     lon = ( onPointerDownPointerX - event.clientX ) * 0.1 onPointerDownLon;
     lat = ( event.clientY - onPointerDownPointerY ) * 0.1 onPointerDownLat;
     render();

    }
   }

   function onDocumentMouseUp( event ) {

    isUserInteracting = false;
    render();

   }

   function onDocumentMouseWheel( event ) {

    camera.fov -= event.wheelDeltaY * 0.05;
    camera.updateProjectionMatrix();

    render();

   }


   function onDocumentTouchStart( event ) {

    if ( event.touches.length == 1 ) {

     event.preventDefault();

     onPointerDownPointerX = event.touches[ 0 ].pageX;
     onPointerDownPointerY = event.touches[ 0 ].pageY;

     onPointerDownLon = lon;
     onPointerDownLat = lat;

    }

   }

   function onDocumentTouchMove( event ) {

    if ( event.touches.length == 1 ) {

     event.preventDefault();

     lon = ( onPointerDownPointerX - event.touches[0].pageX ) * 0.1 onPointerDownLon;
     lat = ( event.touches[0].pageY - onPointerDownPointerY ) * 0.1 onPointerDownLat;

     render();

    }

   }

   function render() {

    lat = Math.max( - 85, Math.min( 85, lat ) );
    phi = ( 90 - lat ) * Math.PI / 180;
    theta = lon * Math.PI / 180;

    target.x = 500 * Math.sin( phi ) * Math.cos( theta );
    target.y = 500 * Math.cos( phi );
    target.z = 500 * Math.sin( phi ) * Math.sin( theta );

    camera.lookAt( target );

    renderer.render( scene, camera );

   }


 

实例下载地址

利用html5实现的360度全景图浏览(带天地)

不能下载?内容有错? 点击这里报错 + 投诉 + 提问

好例子网口号:伸出你的我的手 — 分享

网友评论

第 1 楼 happy14250 发表于: 2015-05-12 21:59 18
我来说两句...ghdjfskjflajsdfljasljvnalsvnlsdv

支持(0) 盖楼(回复)

第 2 楼 mybye 发表于: 2015-10-21 16:45 14
真不错!!!

支持(0) 盖楼(回复)

第 3 楼 xal825912 发表于: 2016-01-06 11:47 17
看着挺不错的,多谢楼主分享!!!

支持(0) 盖楼(回复)

第 4 楼 levin 发表于: 2016-02-02 11:26 19
简单

支持(0) 盖楼(回复)

第 5 楼 zx1414175 发表于: 2016-02-20 15:56 05
不错

支持(0) 盖楼(回复)

第 6 楼 七音梦 发表于: 2016-06-06 12:03 23
很好,正是我所需

支持(0) 盖楼(回复)

第 7 楼 shextremely 发表于: 2016-06-30 17:18 26
不错

支持(0) 盖楼(回复)

第 8 楼 tanxuegang 发表于: 2016-07-22 11:45 06
来试一试

支持(0) 盖楼(回复)

第 9 楼 cyq1135827431 发表于: 2016-09-18 15:13 46
不错,值得学习

支持(0) 盖楼(回复)

第 10 楼 牧码人 发表于: 2016-09-19 16:13 14
试一试 看看 OK不

支持(0) 盖楼(回复)

第 11 楼 牧码人 发表于: 2016-09-19 16:13 17
试一试 看看 OK不

支持(0) 盖楼(回复)

第 12 楼 627323050 发表于: 2016-09-25 09:49 05
很不错的例子看看

支持(0) 盖楼(回复)

第 13 楼 627323050 发表于: 2016-09-25 09:49 09
很不错的例子看看

支持(0) 盖楼(回复)

第 14 楼 medson 发表于: 2016-11-21 14:11 51
不错

支持(0) 盖楼(回复)

第 15 楼 medson 发表于: 2016-11-21 14:11 52
不错

支持(0) 盖楼(回复)

第 16 楼 medson 发表于: 2016-11-21 14:11 56
不错

支持(0) 盖楼(回复)

第 17 楼 asdasdad 发表于: 2016-11-23 17:01 31
wdead awwd aawd adasbucuo 不错

支持(0) 盖楼(回复)

第 18 楼 依剑听琴 发表于: 2016-11-29 12:00 44
不错,学习学习

支持(0) 盖楼(回复)

第 19 楼 依剑听琴 发表于: 2016-11-29 12:00 50
不错,学习学习

支持(0) 盖楼(回复)

第 20 楼 1231234321 发表于: 2016-12-12 21:51 35
太垃圾了,全靠图片的拼凑

支持(0) 盖楼(回复)

第 21 楼 ulaitakulaitak 发表于: 2017-04-10 14:55 47
在在在在在在

支持(0) 盖楼(回复)

第 22 楼 ulaitakulaitak 发表于: 2017-04-10 14:55 50
在在在在在在

支持(0) 盖楼(回复)

第 23 楼 ulaitakulaitak 发表于: 2017-04-10 14:55 51
在在在在在在

支持(0) 盖楼(回复)

第 24 楼 ulaitakulaitak 发表于: 2017-04-10 14:55 52
在在在在在在

支持(0) 盖楼(回复)

第 25 楼 85673578 发表于: 2017-05-09 10:56 40
风飒飒的发大水

支持(0) 盖楼(回复)

第 26 楼 qwerqwersss 发表于: 2017-05-18 13:41 07
很好,正是我所需

支持(0) 盖楼(回复)

第 27 楼 web333 发表于: 2017-05-23 20:13 36
可以!!!!!!!!

支持(0) 盖楼(回复)

第 28 楼 Dean_Winchester 发表于: 2017-06-06 15:10 47
66666666666666666

支持(0) 盖楼(回复)

第 29 楼 Dean_Winchester 发表于: 2017-06-06 15:10 53
66666666666666666

支持(0) 盖楼(回复)

第 30 楼 Dean_Winchester 发表于: 2017-06-06 15:11 09
没有积分下载不了

支持(0) 盖楼(回复)

第 31 楼 viphz615 发表于: 2017-07-24 11:26 00
没积分下载

支持(0) 盖楼(回复)

发表评论

(您的评论需要经过审核才能显示)

查看所有31条评论>>

小贴士

感谢您为本站写下的评论,您的评论对其它用户来说具有重要的参考价值,所以请认真填写。

  • 类似“顶”、“沙发”之类没有营养的文字,对勤劳贡献的楼主来说是令人沮丧的反馈信息。
  • 相信您也不想看到一排文字/表情墙,所以请不要反馈意义不大的重复字符,也请尽量不要纯表情的回复。
  • 提问之前请再仔细看一遍楼主的说明,或许是您遗漏了。
  • 请勿到处挖坑绊人、招贴广告。既占空间让人厌烦,又没人会搭理,于人于己都无利。
;
报警