【three.js练习程序】创建太阳系
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ceshi</title> <script type="text/javascript" src=".\build\three.js"></script> <script src=".\examples\js\controls\TrackballControls.js"></script> <script src=".\examples\js\controls\DragControls.js"></script> <style> body { margin: 0; overflow: hidden; } </style> </head> <body> <!-- 作为Three.js渲染器输出元素 --> <div id="WebGL-output"> </div> <!-- 第一个 Three.js 样例代码 --> <script type="text/javascript"> var dis = [0.38, 0.72, 1, 1.52, 5.2, 9.54, 19.218, 30.06]; //太阳距离 var radius = [2440, 6052, 6378, 3397, 71472, 60268, 25559, 24764]; //行星半径 var camera, scene, renderer; var sphere = new Array(8); var startStep = [0,0,0,0,0,0,0,0]; var step = [87.7, 224.70, 365.25, 686.98, 4332.71, 10759.5, 30685, 60190]; //公转参数 var stepZi = [58.65,-243.01,1,1.026,0.426,0.41,0.426,0.658]; //自转参数 var controls; var objects = []; var fov = 45; var near = 0.1; var far = 10000000; init(); render(); function init() { scene = new THREE.Scene(); //创建场景 camera = new THREE.PerspectiveCamera(fov, window.innerWidth / window.innerHeight, near, far); //创建摄像机 camera.position.x = 100; camera.position.y = 100; camera.position.z = 100; camera.lookAt(scene.position); renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true }); //创建一个WebGL渲染器并设置其大小 renderer.setClearColor(new THREE.Color("#000000")); renderer.shadowMapEnabled = true; renderer.setSize(window.innerWidth, window.innerHeight); var ambientLight = new THREE.AmbientLight("#ffffff"); //加入场景光 scene.add(ambientLight); var axes = new THREE.AxisHelper(200); //创建三轴表示 scene.add(axes); controls = new THREE.TrackballControls(camera); //创建场景旋转缩放事件 controls.rotateSpeed = 2.5; controls.zoomSpeed = 1.2; controls.panSpeed = 0.8; controls.noZoom = false; controls.noPan = false; controls.staticMoving = true; controls.dynamicDampingFactor = 0.3; var pointColor = "#ffffff"; // 增加方向光光源，模拟太阳 var spotLight = new THREE.DirectionalLight(pointColor); spotLight.position.set(0, 0, 0); scene.add(spotLight); //增加太阳炫光 var textureFlare0 = THREE.ImageUtils.loadTexture("./examples/textures/lensflare/lensflare0.png"); var textureFlare3 = THREE.ImageUtils.loadTexture("./examples/textures/lensflare/lensflare3.png"); var flareColor = new THREE.Color(0xffffff); var lensFlare = new THREE.LensFlare(textureFlare0, 350, 0.0, THREE.AdditiveBlending, flareColor); lensFlare.add(textureFlare3, 60, 0.6, THREE.AdditiveBlending); lensFlare.add(textureFlare3, 70, 0.7, THREE.AdditiveBlending); lensFlare.add(textureFlare3, 120, 0.9, THREE.AdditiveBlending); lensFlare.add(textureFlare3, 70, 1.0, THREE.AdditiveBlending); lensFlare.position.copy(spotLight.position); scene.add(lensFlare); //生成八大行星 for (var i = 0; i < 8; i++) { sphere = createMesh(new THREE.SphereGeometry(radius[i] / 100, 100, 100), "./planet/planet2/" + (i + 1) + ".jpg"); sphere.position.x = dis[i] * 500; sphere.position.y = 0; sphere.position.z = dis[i] * 500; scene.add(sphere); objects.push(sphere); } window.addEventListener('resize', onWindowResize, false); } function createMesh(geom, imageFile) { var texture = THREE.ImageUtils.loadTexture(imageFile); var mat = new THREE.MeshPhongMaterial({ map: texture }); var mesh = new THREE.Mesh(geom, mat); return mesh; } function onWindowResize() { camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); renderer.setSize(window.innerWidth, window.innerHeight); } function render() { requestAnimationFrame(render); for (var i = 0; i < 8; i++) { objects[i].position.x = dis[i] * 500 * Math.cos(startStep[i]); objects[i].position.z = dis[i] * 500 * Math.sin(startStep[i]); startStep[i] -= 3.1415926535897932384626433832795 * 2 / step[i]; if (startStep[i] <= -6.28) { startStep[i] = 0; } objects[i].rotation.y = objects[i].rotation.y + 1 / (stepZi[i]*3.1415926535897932384626433832795 * 2); if(objects[i].rotation.y >=6.28) { objects[i].rotation.y = 0; } } controls.update(); sphere.material.map.needsUpdate = true; renderer.render(scene, camera); } document.getElementById("WebGL-output").appendChild(renderer.domElement); </script> </body> </html>
没考虑各大行星自转轴指向的问题，都是默认指向y轴方向。
