three.jsに触れてみた。その2
再度触れてみた訳です。(卒論に使うかもですから・・・)
とりあえずおさらい。
前回
こんな感じのを作った、というかコピペしてできましたん。
それを今回は月を増やしてさらにそれっぽくしよう!という事です。
改良!?
じゃーん。
こんなんになりましたー。
んで早速ソースコードはこんな感じ・・・
//レンダラの初期化等 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
需要は無いと思うし、正直貼るべきでは無いと思うがあえてはる。
まー特に難しいことはしてない。ただ月が地球の周りをぐるぐるするだけ。
いたってシンプル。
今後学校のイベントで使える可能性もあるので、一応とっておく。
そんな感じ。明日から学校だけんども、ぼちぼち頑張るとします。
まーハッピーな毎日が送れるといいですが・・・
それでは。