Question

我正在玩这个html5脚本，它现在加载了一个地球仪，你必须点击地球仪才能获取该位置，它会打开另一个站点，并在你点击的位置上显示地图。以下是全球网站的示例：

http://parameter-pollution.github.io/webgl-ingress/demo/index.html

您会看到当您点击地球时，它会打开包含您点击位置的其他网站。下面是使这一切成为现实的html代码。

      <!DOCTYPE HTML>
  <html lang="en">
    <head>
<title>Ingress WebGL</title>
<meta charset="utf-8">
<style type="text/css">
  html{
    height: 100%;
  }
  body {
    margin: 0;
    padding: 0;
    border: 0;
    overflow-y:hidden;
    overflow-x:hidden;
    height: 100%;
    background-color: #000000;
  }
  #universe{
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
  }
  .ada_wheel{
    position:absolute;
    top: 50%;
    left: 50%;
    height: 396px;
    width: 396px;
    margin-top: -198px;
    margin-left: -198px;
    animation-duration: 10s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    -webkit-animation-duration: 10s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
  }
  #wheel_outer{
    animation-name: rotateLeft;
    -webkit-animation-name: rotateLeft;
  }
  @keyframes rotateLeft{
    from {  transform:rotate(360deg); }
    to {  transform:rotate(0deg); }
  }
  @-webkit-keyframes rotateLeft{
    from {  -webkit-transform:rotate(360deg); }
    to {  -webkit-transform:rotate(0deg); }
  }

  #wheel_inner{
    animation-name: rotateRight;
    -webkit-animation-name: rotateRight;
  }
  @keyframes rotateRight{
    from {  transform:rotate(0deg); }
    to {  transform:rotate(360deg); }
  }
  @-webkit-keyframes rotateRight{
    from {  -webkit-transform:rotate(0deg); }
    to {  -webkit-transform:rotate(360deg); }
  }

  #border_gradient{
    position:absolute;
    top:0px;
    left:0px;
    height:100%;
    width:100%;
  }
  #click_notify{
    position:absolute;
    top:20%;
    left:20%;
    color: white;
    font-size:2em;
    display:none;
  }
  #webgl_error{
    margin-top: 10%;
    text-align: center;
    color:white;
    display:none;
  }
</style>
<script type="text/javascript" src="/Detector.js"></script>
<script type="text/javascript" src="/three.js"></script>
<script type="text/javascript" src="/Tween.js"></script>
<script type="text/javascript" src="/myOrbit.js"></script>
<script type="text/javascript" src="/myHUD.js"></script>
<script type="text/javascript">
  /*
    @coder paremeter-pollution / https://github.com/parameter-pollution/
  */

  //audio controls:
  var sounds={};

  var tweenStyle={};
  tweenStyle.opacity=1;
  var inner_wheel, outer_wheel, border_gradient, click_notify;

   // standard global variables
  var container, scene, camera, renderer, clock, controls, stats, projector;


  // custom global variables
  var middle_earth={x:0,y:0,z:0};
  var orbit;

  var earth;
  var earth_radius=50;
  var layers= new Array(10);
  var layer_distance=0.005;

  var hud;
  var hud_distance=30;

  var crosshairTrackingPoint;

  var randomPointInterval;

  var numberOfTextures=3;

  function init()
  {
    if(!Detector.webgl){  //check for webgl support
      document.getElementById('webgl_error').style.display="block";
      return;
    }

    sounds.aquiring_position=document.getElementById('aquiring_position');
    sounds.crosshair_locked=document.getElementById('crosshair_locked');
    sounds.logon_established=document.getElementById('logon_established');
    sounds.zoom_sound=document.getElementById('zoom_sound');
    sounds.downloading_latest_intel_package=document.getElementById('downloading_latest_intel_package');
    sounds.ambient_space=document.getElementById('ambient_space');

    inner_wheel=document.getElementById('wheel_inner');
    outer_wheel= document.getElementById('wheel_outer');
    border_gradient= document.getElementById('border_gradient');
    click_notify=document.getElementById('click_notify');

    clock = new THREE.Clock();

    scene = new THREE.Scene();

    // set up camera
    camera = new THREE.PerspectiveCamera( 45, window.innerWidth/window.innerHeight, 0.1, 2000);
    camera.up.set(0,0,1);

    //HUD
    hud = new myHUD(camera,hud_distance);

    crosshairTrackingPoint=new THREE.Vector3(25,25,25);

    //crosshair
    var crosshairGeometry = new THREE.PlaneGeometry( 30, 30 ); 
    var crosshairMaterial = new THREE.MeshLambertMaterial( { map: THREE.ImageUtils.loadTexture('img/crosshair.png', null, textureLoadComplete), transparent:true } ); 
    crosshair = new THREE.Mesh(crosshairGeometry, crosshairMaterial);
    hud.addTracked(crosshair, crosshairTrackingPoint);

    //var ambientLight = new THREE.AmbientLight(0x101010,0.5);
    //scene.add(ambientLight);

     // spotlight
    var spotlight = new THREE.SpotLight(0xffffff, 1.4);
    spotlight.position.set(0,0,50);
    spotlight.angle=Math.PI/6;
    camera.add(spotlight);
/*
    var spotlight2 = new THREE.SpotLight(0xffffff, 1.5, 40);
    spotlight2.position.set(0,0,30);
    spotlight2.exponent=0;
    camera.add(spotlight2);
*/
    // add the camera to the scene
    scene.add(camera);   

    orbit=new myOrbit( camera, middle_earth, 500, clock );    

    // create renderer
    renderer = new THREE.WebGLRenderer( {antialias:true} );
    renderer.setSize(window.innerWidth, window.innerHeight);

    // render container
    container = document.getElementById( 'universe' );


    // attach renderer to the container div
    container.appendChild( renderer.domElement );       

    // sphere parameters: radius, segments along width, segments along height
    var earthGeometry = new THREE.SphereGeometry( earth_radius, 64, 32 ); 
    var earthMaterial = new THREE.MeshLambertMaterial( { map: THREE.ImageUtils.loadTexture('img/borders.jpg', null, textureLoadComplete) } ); 
    earth = new THREE.Mesh(earthGeometry, earthMaterial);
    earth.rotation.set(Math.PI/2,0,0);


    // layers
    var layerMaterial = new THREE.MeshLambertMaterial( { map: THREE.ImageUtils.loadTexture('img/layer.png', null, textureLoadComplete), transparent:true, opacity: 0.6 } ); 


    //this function doesn't work when you start with adding layers with lower scale. but i have NO FUCKING IDEA why ^^
    //if you decide to change it around and find yourself changing it back again increase this counter: 3
    var scale=1+layer_distance*layers.length;
    for (var i = 0; i < layers.length; i++) {
      layers[i] = new THREE.Mesh(earthGeometry, layerMaterial);
      layers[i].scale.set( scale, scale, scale  );
      earth.add(layers[i]);
      scale -= layer_distance;
    }

    scene.add(earth);

    renderer.initWebGLObjects( scene );

    projector = new THREE.Projector();

    document.addEventListener( 'mousedown', onDocumentMouseDown, false );
    window.addEventListener( 'resize', onWindowResize, false );          
  }

  function textureLoadComplete(){
    numberOfTextures--;
    if( numberOfTextures === 0 ){ //all textures have been loaded, let's get this party started ;-)
      var delta=clock.getDelta();
      if( delta < 3000 ){ //make sure people with google fiber can also appreciate the loading animation ;-)
        setTimeout( function(){startAnimation()}, 3000-delta);
      }else{
        startAnimation();
      }

    }     
  }

  function startAnimation(){
    fadeOutLoading();
      orbit.tween_to_orbit( { distance: 200}, 4000, TWEEN.Easing.Exponential.Out, function(){
        playSound(sounds.aquiring_position);
        setTimeout( function(){
          playSound(sounds.logon_established);
        }, 2000);
        setTimeout( function(){click_notify.style.display="inline";}, 5000);
      });

    randomPointInterval = setInterval( generateRandomTrackingPoint , 2000);
    //start render loop
    animate();
  }

  function fadeOutLoading(){

    var fadeOutTween=new TWEEN.Tween(tweenStyle).to( {opacity: 0}, 4000);
    fadeOutTween.easing(TWEEN.Easing.Cubic.In);
    fadeOutTween.onUpdate(function(){
      inner_wheel.style.opacity=tweenStyle.opacity;
      outer_wheel.style.opacity=tweenStyle.opacity;
    });
    fadeOutTween.onComplete(function(){
      inner_wheel.style.display="none";
      outer_wheel.style.display="none";
    });
    fadeOutTween.start();
  }

  function animate() 
  {
      requestAnimationFrame( animate );
      render();   
  }

  function render() 
  { 

    TWEEN.update();

    orbit.update(); 

    hud.update();

    renderer.clear();    
    renderer.render( scene, orbit.camera );
  }

  function onDocumentMouseDown( event ) {

    event.preventDefault();

    var vector = new THREE.Vector3( ( event.clientX / window.innerWidth ) * 2 - 1, - ( event.clientY / window.innerHeight ) * 2 + 1, 0.5 );
    projector.unprojectVector( vector, camera );

    var raycaster = new THREE.Raycaster( camera.position, vector.sub( camera.position ).normalize() );

    var intersects = raycaster.intersectObject( earth );

    if ( intersects.length > 0 ) { //bazinga, we found an intersection point
      orbit.fixAzimuth();
      orbit.autoRotate=false;
      window.clearInterval(randomPointInterval);
      randomPointInterval=null;

      hud.updateTrackingPoint( new THREE.Vector3(intersects[0].point.x, intersects[0].point.y, intersects[0].point.z) );

      var spherical=orbit.convertCartesionToSpherical( intersects[0].point );

      console.log("--lat------------long------");
      console.log(spherical.inclination,spherical.azimuth);
      var latitude=((spherical.inclination*180/Math.PI)-90)*(-1);
      var longitude=spherical.azimuth*180/Math.PI;
      if( longitude > 180 ){ longitude-=360 }
      console.log(latitude,longitude);


      // http://www.ingress.com/intel?ll=LA.ITUDE,LO.NGITUDE&z=9
      //http://www.ingress.com/intel?ll=48.729699,15.205459&z=20

      playSound(sounds.zoom_sound);
      playSound(sounds.downloading_latest_intel_package);

      click_notify.style.display="none"
      border_gradient.style.display="none";

      orbit.tween_to_orbit(spherical, 3000, TWEEN.Easing.Cubic.InOut, function(){ 
        window.location.href="http://www.ingress.com/intel?ll="+latitude+","+longitude+"&z=6";  

        /*orbit.reset();

        hud.updateTrackingPoint(new THREE.Vector3(0,0,0));
        if( randomPointInterval === null ) { randomPointInterval = setInterval( generateRandomTrackingPoint , 2000); };

        //TODO: this timeout should not be necessary         
        setTimeout( function(){
          border_gradient.style.display="inline";
          orbit.tween_to_orbit( { distance: 200}, 3000, TWEEN.Easing.Exponential.Out, function(){
            playSound(sounds.aquiring_position);
            setTimeout( function(){
              playSound(sounds.logon_established);
            }, 2000);
          });
        }, 50);*/ 
      });

    }
  }

  function onWindowResize( event ) {
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
    renderer.setSize( window.innerWidth, window.innerHeight );
  }

  function generateRandomTrackingPoint(){
    var min_azimuth=orbit.spherical.azimuth-0.5;
    var max_azimuth=min_azimuth+Math.PI/2;
    var spherical={};
    spherical.azimuth = getRandomNumber(min_azimuth,max_azimuth);
    spherical.inclination = getRandomNumber( 0.4, Math.PI-0.4 );
    spherical.distance = earth_radius;

    playSound(crosshair_locked);

    var point=orbit.convertSphericalToCartesian(spherical);
    hud.updateTrackingPoint(new THREE.Vector3(point.x, point.y, point.z));
  }

  function getRandomNumber(min, max) {
    return Math.random() * (max - min) + min;
  }

  function playSound(sound){
    var newAudio=new Audio(sound.src);
    newAudio.play();
  }

  //chrome audio loop stops working randomly. this ugly hack fixes it
  function ambient_loop_hack(){
    setTimeout(function(){
      playSound(sounds.ambient_space);
      ambient_loop_hack(); 
    }, 5601 );
  }

  function getLocation() {
if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(showPosition);
} else { 
    x.innerHTML = "Geolocation is not supported by this browser.";
}
}

function showPosition(position) {
x.innerHTML = "Latitude: " + position.coords.latitude + 
"<br>Longitude: " + position.coords.longitude;  
}

</script>

<img class="ada_wheel" id="wheel_outer" src="img/ada_wheel_outer.png">
<img class="ada_wheel" id="wheel_inner" src="img/ada_wheel_inner.png">
<img id="border_gradient" src="img/border_gradient.png">
<div id="click_notify">click somewhere on the planet!</div>
<div id="webgl_error">Sorry, your graphics card and/or webbrowser don't support WebGL!</div>
<div id="universe"></div>

<script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

  ga('create', 'UA-42384097-1', 'github.com');
  ga('send', 'pageview');
</script>
<body onload="getLocation()">

我已尝试使用此示例获取当前位置：

http://www.w3schools.com/html/html5_geolocation.asp

并使用此示例在加载时加载函数：

http://html5hive.org/javascript-beginners-tutorial/

有没有什么方法可以让它在加载地球的地方工作，抓住地点，然后打开另一个地点，地图就在它从地球上抓取的当前位置？所有这一切都无需点击地球。

这是我运行以获取当前用户位置协调员的脚本：

<body onload="getLocation()">

<p id="demo"></p>

<script>
var x = document.getElementById("demo");

function getLocation() {
if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(showPosition);
} else { 
    x.innerHTML = "Geolocation is not supported by this browser.";
}
}

function showPosition(position) {
x.innerHTML = "Latitude: " + position.coords.latitude + 
"<br>Longitude: " + position.coords.longitude;  
}
</script>

Answer 1

这是获取用户位置的代码，然后使用正确的参数重定向到Ingress站点：

    <button onclick="getLoc()">GET LOCATION</button>

<p id="demo"></p>
<script>
var x = document.getElementById("demo");

function getLoc() {
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(redirectMe);
    } else { 
        x.innerHTML = "Geolocation is not supported by this browser.";
    }

}

function redirectMe(position) {
    document.location.href="https://www.ingress.com/intel?ll="+position.coords.latitude+","+position.coords.longitude+"&z=6";
}

</script>

这：position.coords.longitude和position.coords.latitude是由navigator.geolocation函数创建的变量。然后你在第二个函数中调用它们。 document.location.href重定向到您指定的网址。

小提琴：http://jsfiddle.net/ve0bwg24/4/

有没有办法在我的位置抓住我的位置并在我的位置打开另一个网站？

1 个答案: