three.jsに触れてみた。その２

再度触れてみた訳です。（卒論に使うかもですから・・・）

とりあえずおさらい。

前回

こんな感じのを作った、というかコピペしてできましたん。
それを今回は月を増やしてさらにそれっぽくしよう！という事です。

改良！?

じゃーん。

こんなんになりましたー。

んで早速ソースコードはこんな感じ・・・

//レンダラの初期化等
var renderer = new THREE.WebGLRenderer({ antialias:true });
renderer.setSize(900, 500);
renderer.setClearColorHex(0x000000, 1);
document.body.appendChild(renderer.domElement);
 //シーンの作成
var scene = new THREE.Scene();
 //カメラの作成
var camera = new THREE.PerspectiveCamera(15, 900 / 500);     
camera.position = new THREE.Vector3(0, 2, 8);      
camera.lookAt(new THREE.Vector3(0, 0, 0));      
scene.add(camera);
 //ライトの作成
var light = new THREE.DirectionalLight(0xcccccc);
light.position = new THREE.Vector3(0.577, 0.577, 0.577);
scene.add(light);
var ambient = new THREE.AmbientLight(0x333333);
scene.add(ambient);
 
//地球の作成      
var geometry = new THREE.SphereGeometry(1, 32, 16);
var earth_material = new THREE.MeshPhongMaterial({
  color: 0xffffff, ambient: 0xffffff,
  specular: 0xcccccc, shininess:50, metal:true,
  map: THREE.ImageUtils.loadTexture('./img/earth.jpg') });
var earth_mesh = new THREE.Mesh(geometry, earth_material);
scene.add(earth_mesh);

//月の作成
var moon = new THREE.SphereGeometry(0.1, 32, 16);
var moon_material = new THREE.MeshPhongMaterial({
  color: 0xffffff, ambient: 0xffffff,
  specular: 0xcccccc, shininess:50, metal:true,
  map: THREE.ImageUtils.loadTexture('./img/moon.jpg') });
var moon_mesh = new THREE.Mesh(moon, moon_material);
scene.add(moon_mesh);
 
//レンダリング
var baseTime = +new Date;
function render() {
  requestAnimationFrame(render);
//月の位置を三角関数で算出。（汚い・・・）
  moon_mesh.position = new THREE.Vector3(Math.sin((+new Date - baseTime)/100 * (Math.PI / 180)) * 1.4,0,
                                               Math.cos((+new Date - baseTime)/100 * (Math.PI / 180)) * 1.4);
//月と地球の自転
  moon_mesh.rotation.y = 0.15 * (+new Date - baseTime)/1000;
  earth_mesh.rotation.y = 0.3 * (+new Date - baseTime) / 10000;
  renderer.render(scene, camera);
};
render();

果てしなく汚い・・・orz
需要は無いと思うし、正直貼るべきでは無いと思うがあえてはる。
まー特に難しいことはしてない。ただ月が地球の周りをぐるぐるするだけ。
いたってシンプル。
今後学校のイベントで使える可能性もあるので、一応とっておく。

そんな感じ。明日から学校だけんども、ぼちぼち頑張るとします。
まーハッピーな毎日が送れるといいですが・・・

それでは。