<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>three.js从入门到精通系列教程043 - 创建行星按行星轨道围绕太阳公转</title>
<script src="ThreeJS/three.js"></script>
<script src="ThreeJS/jquery.js"></script>
</head>
<body>
<center id="myContainer"></center>
<script>
//创建渲染器
var myRenderer = new THREE.WebGLRenderer({ antialias: true });
myRenderer.setSize(window.innerWidth, window.innerHeight);
myRenderer.setClearColor('black', 1.0);
$("#myContainer").append(myRenderer.domElement);
var myCamera = new THREE.PerspectiveCamera(20,
window.innerWidth / window.innerHeight, 1, 1000);
myCamera.position.set(0, 0, 400);
var myScene = new THREE.Scene();
var myMap = THREE.ImageUtils.loadTexture("images/img052.jpg");
myScene.background = myMap;
//创建旋转系统
var myRotation = { x: -Math.PI * 0.42, y: Math.PI * 0.09, z: 0 };
var myStarRadius = 10;
var myTrackRadius = 80;
//创建太阳系统
var myMesh = new THREE.Mesh(new THREE.SphereGeometry(2, 2, 2),
new THREE.MeshLambertMaterial());
//创建行星轨道
var myTrack = new THREE.Mesh(
new THREE.RingGeometry(myTrackRadius, myTrackRadius + 2, 50, 1),
new THREE.MeshBasicMaterial());
//创建行星
var myStar = new THREE.Mesh(
new THREE.SphereGeometry(myStarRadius, 30, 30),
new THREE.MeshBasicMaterial({
map: THREE.ImageUtils.loadTexture('images/img077.png')
}));
myStar.position.set(myTrackRadius, 0, 0);
myStar.rotation.x = 1.9;
//创建行星环
var myStarRing = new THREE.Mesh(
new THREE.RingGeometry(myStarRadius + 3, myStarRadius + 8, 50, 1),
new THREE.MeshBasicMaterial({
map: THREE.ImageUtils.loadTexture('images/img077.png'),
side: THREE.DoubleSide
}));
//创建行星环旋转中心
myStarCenter = new THREE.Object3D();
myStarCenter.add(myStarRing);
myStarCenter.position.set(myTrackRadius, 0, 0);
myStarCenter.rotation.x = 0.3;
//创建太阳系中心
var myCenter = new THREE.Object3D();
myCenter.add(myStar);
myCenter.add(myTrack);
myCenter.add(myStarCenter);
myMesh.add(myCenter);
myMesh.rotation.set(myRotation.x, myRotation.y, myRotation.z);
myScene.add(myMesh);
//渲染旋转系统
animate();
function animate() {
myRenderer.render(myScene, myCamera);
myMesh.rotation.z -= 0.01;
requestAnimationFrame(animate);
}
</script>
</body>
</html>
