【星辰大海】flytu.net进阶计划（二）3D太阳系立体运动
【星辰大海】flytu.net进阶计划（一）2D地月系圆周运动
【星辰大海】flytu.net进阶计划（二）3D太阳系立体运动
【星辰大海】flytu.net进阶计划（三）注册登陆互动
设计知识：WebGL、Three.js、太阳系星体参数
想完全自己实现还有点不现实啊！先借助Three.JS弄个Demo：日-地-月系:在线演示
<!doctype html> <html> <head> <title> Testing</title> <script src = "Three.js"> </script> <script> function solarSys(){ document.getElementById("test").innerHTML = "Testing"; var geo = new THREE.SphereGeometry(0.5,25,25); var mater = new THREE.MeshBasicMaterial({color:0xff0000,wireframe:true}); var sun = new THREE.Mesh(geo,mater); //不会改参数，只好笨笨的再来一遍，Three.js没有找到好的文档 geo = new THREE.SphereGeometry(0.25,25,25); mater = new THREE.MeshBasicMaterial({color:0x0000ff,wireframe:true}); var eath = new THREE.Mesh(geo,mater); eath.position.set(3,0,0); geo = new THREE.SphereGeometry(0.05,25,25); mater = new THREE.MeshBasicMaterial({color:0xa9a9a9,wireframe:true}); var moon = new THREE.Mesh(geo,mater); moon.position.set(0.4,0,0); eath.add(moon); //地球公转轨道 var sys = new THREE.Object3D() sys.add(eath); var renderer = new THREE.WebGLRenderer(); renderer.setSize(1440,800); var canvas = document.getElementById("canvas"); canvas.appendChild(renderer.domElement); var scene = new THREE.Scene(); scene.add(sun); scene.add(sys); var camera = new THREE.PerspectiveCamera(45,1440/800,0.1,100); camera.position.set(0,1,10); //每次刷新都会创建一个animate？总感觉函数这样套着来内存会爆:) function animate(){
//这个是WebGL带的还是Three.js的？不知道支不支持延迟参数 requestAnimationFrame(animate); sun.rotateX(Math.PI/180); eath.rotateY(Math.PI/120); eath.rotateZ(Math.PI/120) moon.rotateY(Math.PI/160); sys.rotateY(Math.PI/900); renderer.render(scene,camera); } animate(); } </script> </head> <body onload = "solarSys()"> <h1 id = "test"> test</h1> <span id = "canvas" width = "1440" height = "800"> </span> </body> </html>
