three.js实现土星绕太阳体系

概况如下：

1、SphereGeometry实现自转的太阳，土星；

2、RingGeometry实现土星公转轨道；

3、ImageUtils加载球体贴图；

4、canvas中createRadialGradient实现太阳发光效果；

5、THREE.RingGeometry实现土星公转轨道。

效果图如下：

预览地址：three.js实现土星绕太阳体系

初始化场景、相机、渲染器，设置相机位置，初始化光源，光源采用点光源PointLight，设置光源位置为场景中心位置，并将光源加入场景中。

 // 初始化场景
 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, 300);
 var renderer = new THREE.WebGLRenderer({
       alpha: true,
       antialias: true
 });
 // 设置光照，第一个参数表示光颜色，第二个参数为光照强度，范围为0-1，默认值为1，
 var lights = new THREE.PointLight('#ffffff', 1);
 lights.position.set(0, 0, 0);
 scene.add(lights);

设置场景窗口尺寸，并且初始化控制器，窗口尺寸默认与浏览器窗口尺寸保持一致，最后将渲染器加载到dom中。

 // 设置窗口尺寸，第一个参数为宽度，第二个参数为高度
 renderer.setSize(dom.clientWidth, dom.clientHeight);
 // 初始化控制器
 var orbitcontrols = new THREE.OrbitControls(camera,renderer.domElement);
 // 将渲染器加载到dom中
 dom.appendChild(renderer.domElement);

定义太阳及其材质，太阳通过SphereGeometry来实现，通过ImageUtils来导入贴图。

 // 定义太阳材质，sunImgUrl表示太阳贴图地址
 var sunTexture = THREE.ImageUtils.loadTexture(sunImgUrl, {}, function () {
       renderer.render(scene, camera);
 });
 // 使用SphereGeometry实现太阳球体，sunSize表示球体半径
 var centerBall = new THREE.Mesh(new THREE.SphereGeometry(sunSize, 30, 50), new THREE.MeshBasicMaterial({
       map: sunTexture
 }));

太阳发光效果通过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)');
     gradient.addColorStop(0.4, 'rgba(' + color + ',.6)');
     gradient.addColorStop(1, 'rgba(0,0,0,0)');
     context.fillStyle = gradient;
     context.fillRect(0, 0, canvas.width, canvas.height);
     return canvas;
 };
 // 添加太阳发光效果
 var centerBallLite = new THREE.Sprite(new THREE.SpriteMaterial({
     map: new THREE.CanvasTexture(generateSprite(sunSpriteColor)),
     blending: THREE.AdditiveBlending
 }));
 centerBallLite.scale.x = centerBallLite.scale.y = centerBallLite.scale.z = sunScaleSize;
 scene.add(centerBallLite);
 scene.add(centerBall);

实现土星绕太阳公转体系，公转轨道通过RingGeometry来实现，公转轨道偏移通过position来实现。

 // 创建土星体系
 var createSsaturnLite = function () {
     // 添加土星体系
     saturnMesh = new THREE.Mesh(new THREE.SphereGeometry(1, 1, 1), new THREE.MeshLambertMaterial()); //材质设定
     // 土星对应元素
     // 土星公转轨道
     var track = new THREE.Mesh(new THREE.RingGeometry(saturnLiteRadius, saturnLiteRadius + 0.1, 50, 1), new THREE.MeshBasicMaterial());
     saturnLite = new THREE.Mesh(new THREE.SphereGeometry(saturnLiteSize, 30, 30), new THREE.MeshPhongMaterial({
         map: THREE.ImageUtils.loadTexture(imgUrl)
     }));
     saturnLite.position.set(saturnLiteRadius, 0, 0);
     saturnLite.rotation.x = 1.9;
     // 土星环对应元素
     // 土星环公转轨道
     var trackRing = new THREE.Mesh(new THREE.RingGeometry(saturnLiteSize + 3, saturnLiteSize + 8, 50, 1), new THREE.MeshBasicMaterial({
         map: THREE.ImageUtils.loadTexture(ringImgUrl),
         side: THREE.DoubleSide
     }));
     // 土星环轨道中心
     ringPoint = new THREE.Object3D();
     ringPoint.add(trackRing);
     ringPoint.position.set(saturnLiteRadius, 0, 0);
     ringPoint.rotation.x = 0.3;

     var earthPoint = new THREE.Object3D();
     earthPoint.add(saturnLite);
     earthPoint.add(track);
     earthPoint.add(ringPoint);
     saturnMesh.add(earthPoint);
     saturnMesh.rotation.set(rotation.x, rotation.y, rotation.z);
     scene.add(saturnMesh);
 }

将创建好的太阳，土星自转公转体系渲染到场景中，自转和公转通过定时修改position值来实现，动画使用requestAnimationFrame来实现。

 // 执行函数
 var render = function () {
     renderer.render(scene, camera);
     centerBall.rotation.y -= sunSpeed;
     saturnMesh.rotation.z -= saturnRotationSpeed;
     orbitcontrols.update();
     requestAnimationFrame(render);
 }