概况如下：
1、 SphereGeometry 实现自转的太阳；
2、 RingGeometry 实现太阳系星系的公转轨道；
3、 ImageUtils 加载球体和各行星贴图；
4、 canvas 中 createRadialGradient 实现太阳发光效果；
5、 THREE.Sprite 精灵实现太阳系行星。
效果图如下：
预览地址： three.js模拟实现太阳系行星体系
初始化场景、相机、渲染器，设置相机位置。
// 初始化场景
var scene = new THREE.Scene();
// 初始化相机，第一个参数为摄像机视锥体垂直视野角度，第二个参数为摄像机视锥体长宽比，
// 第三个参数为摄像机视锥体近端面，第四个参数为摄像机视锥体远端面
var camera = new THREE.PerspectiveCamera(20, dom.clientWidth / dom.clientHeight, 1, 100000);
// 设置相机位置，对应参数分别表示x，y，z位置
camera.position.set(0, 0, 500);
var renderer = new THREE.WebGLRenderer({
alpha: true,
antialias: true
});设置场景窗口尺寸，并且初始化控制器，窗口尺寸默认与浏览器窗口尺寸保持一致，最后将渲染器加载到dom中。
// 设置窗口尺寸，第一个参数为宽度，第二个参数为高度
renderer.setSize(dom.clientWidth, dom.clientHeight);
// 初始化控制器
var orbitcontrols = new THREE.OrbitControls(camera,renderer.domElement);
// 将渲染器加载到dom中
dom.appendChild(renderer.domElement);定义太阳及其材质，太阳通过 SphereGeometry 来实现，通过 ImageUtils 来导入贴图。
// 定义太阳材质
var sunTexture = THREE.ImageUtils.loadTexture('./image/sun_bg.jpg', {}, function () {
renderer.render(scene, camera);
});
// 太阳以及太阳材质设定
centerBall = new THREE.Mesh(new THREE.SphereGeometry(30, 30, 30), new THREE.MeshBasicMaterial({
map: sunTexture
}));
scene.add(centerBall);太阳发光效果通过 Sprite 引入 canvas 渲染的 createRadialGradient 来实现。
/**
* 实现球体发光
* @param color 颜色的r,g和b值,比如：“123,123,123”;
* @returns {Element} 返回canvas对象
*/
var generateSprite = function (color) {
var canvas = document.createElement('canvas');
canvas.width = 16;
canvas.height = 16;
var context = canvas.getContext('2d');
var gradient = context.createRadialGradient(canvas.width / 2, canvas.height / 2, 0, canvas.width / 2,
canvas.height / 2, canvas.width / 2);
gradient.addColorStop(0, 'rgba(' + color + ',1)');
gradient.addColorStop(0.2, 'rgba(' + color + ',1)');
