Question

<input type="button" value="Mercury" class="btn" onClick = "showInfo(1)"/>
<div id="1" style="left:70%;top:300px;width:300px;position:absolute;z-index:100;display:none;">
    Mercury - my favorite planet
</div>

金星 - 我最喜欢的星球

<input type="button" value="Earth" class="btn3" onClick = "showInfo(3)"/>
<div id="3" style="left:70%;top:300px;width:300px;position:absolute;z-index:100;display:none;">
    earth - my favorite planet
</div>`

这是太阳能系统导航的按钮功能。

var infoMercury = false;    
var infoVenus = false;
var infoEarth = false;

这些是变量。

if(!info){

    earth.position.x = Math.sin(t*0.2)*3000;
    earth.position.z = Math.cos(t*0.2)*3000;

    clouds.position.x = Math.sin(t*0.2)*3000;
    clouds.position.z = Math.cos(t*0.2)*3000;

    mercury.position.x = Math.sin(t*0.6)*800;
    mercury.position.z = Math.cos(t*0.6)*800;

    venus.position.x = Math.sin(t*0.4)*1700;
    venus.position.z = Math.cos(t*0.4)*1700;

    mars.position.x = Math.sin(t*0.16)*5000;
    mars.position.z = Math.cos(t*0.16)*5000;

    jupiter.position.x = Math.sin(t*0.12)*(-7400);
    jupiter.position.z = Math.cos(t*0.12)*(-7400);

    saturn.position.x = Math.sin(t*0.08)*9800;
    saturn.position.z = Math.cos(t*0.08)*9800;

    ring.position.x = saturn.position.x;
    ring.position.z = saturn.position.z;

    uranus.position.x = Math.sin(t*0.04)*12000;
    uranus.position.z = Math.cos(t*0.04)*12000;

    neptune.position.x = Math.sin(t*0.02)*18000;
    neptune.position.z = Math.cos(t*0.02)*18000;

    mercury.rotation.y+=0.01;
    venus.rotation.y+=0.01;
    earth.rotation.y+=0.005;
    clouds.rotation.y-=0.001;
    mars.rotation.y+=0.01;
    jupiter.rotation.y+=0.01;
    saturn.rotation.y+=0.01;
    ring.rotation.y-=0.002; //saturn ring
    uranus.rotation.y+=0.01;
    neptune.rotation.y+=0.01;
}

 else 

  {
      if(infoMercury){
        if(camera.position.z>mercury.position.z-100){
          camera.position.z-=80;
          camera.lookAt(mercury.position);
         }
         else
         {
             document.getElementById("1").style.display = "block";

         }
          if(camera.position.x<mercury.position.x-100){
          camera.position.x+=80;
         }

    }

   if(infoVenus){
       if(camera.position.z>venus.position.z-100){
       camera.position.z-=80;
       camera.lookAt(venus.position);
       }
       else
         {
             document.getElementById("2").style.display = "block";

         }
          if(camera.position.x<mercury.position.x-100){
          camera.position.x+=80;
         }

   }

   if(infoEarth){
        if(camera.position.z>earth.position.z-300){
          camera.position.z-=80;
          camera.lookAt(earth.position);
          }
         else
         {
             document.getElementById("3").style.display = "block";

         }
          if(camera.position.x<earth.position.x-80){
          camera.position.x+=180;
         }
   }

上面的代码是行星的位置和旋转，当按下按钮时，摄像机会指向特定的行星并显示信息。

function showInfo(num){
    switch(num){
        case 1:
            infoMercury = true;
            info = true;
        break;
        case 2:
            infoVenus = true;
            info = true;
        break
        case 3:
            infoEarth = true;
            info = true;
        break;
        case 4:
            info = true;
        break;
        default:
        break;
    }

按下其中一个按钮时，它会将相机指向行星的位置。我一直在为每个行星位置创建按钮时遇到困难，因此当点击导航时它只执行一次任务。例如，如果我点击“水银”按钮，它会找到行星，显示信息，但是当选择另一个按钮时，导航就会找到行星。因此，前一个星球的信息仍然在屏幕上。

我们如何安排导航脚本的任何想法？

WebGl太阳能系统

0 个答案: