DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ceshititle>
<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>
<div id="WebGL-output">
div>
<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轴方向。