<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;
}
ボタンの 1 つを押すと、カメラが惑星の位置に向けられます。惑星の場所ごとにボタンを作成するのに苦労しているため、ナビゲーションをクリックするとタスクが 1 回しか実行されません。たとえば、「水星」ボタンをクリックすると、惑星が見つかり、情報が表示されますが、別のボタンを選択すると、ナビゲーションが惑星を見つけます。したがって、前の惑星の情報が画面に残ります。
ナビゲーション用のスクリプトをどのように配置できるかについてのアイデアはありますか?