three.js analog implementation extrasolar planet system

Summarized as follows:

1, SphereGeometryto achieve the rotation of the sun;

2, RingGeometryto achieve orbit the solar systems;

3, ImageUtilsloading the planetary spheres and maps;

4, canvasthe createRadialGradientimplemented solar lighting effect;

5, THREE.Spriteelves realize planets.

The effect is as follows:

 Preview Address: Three.js analog implementation extrasolar planet system

Initialize the scene, the camera, the renderer, set the camera position.

1  // Initialization Scene 
2  var SCENE = new new THREE.Scene ();
 . 3  // initialize the camera, the first parameter is a vertical view of the camera field of view cone angle, the second parameter is aspect ratio of the camera view frustum, 
4  / / The third parameter is the proximal face of the camera frustum, the fourth parameter is the distal face of the camera frustum 
. 5  var camera = new new THREE.PerspectiveCamera (20 is, dom.clientWidth / dom.clientHeight,. 1, 100000 );
 6  // set the camera positions, respectively corresponding to the parameters x, y, z position 
. 7 camera.position.set (0, 0, 500 );
 . 8  var the renderer = new new THREE.WebGLRenderer ({
 . 9        Alpha: to true ,
 10        antialias:threaten 
11 });

Setting the Scene window size, and initialize the controller, the default window size of the browser window size remains the same, the final renderer will be loaded into the dom.

1  // set the window size, the width of the first parameter, the second parameter is the height of 
2  renderer.setSize (dom.clientWidth, dom.clientHeight);
 . 3  // initialization controller 
. 4  var orbitcontrols = new new THREE.OrbitControls (Camera , renderer.domElement);
 . 5  // rendering is loaded into the dom 
. 6 dom.appendChild (renderer.domElement);

Sun and its definition of material through the sun SphereGeometryto achieve, by ImageUtilsimporting textures to.

1  // defines Material sun 
2  var sunTexture = THREE.ImageUtils.loadTexture ( './ Image / sun_bg.jpg', {}, function () {
 . 3      renderer.render (SCENE, Camera);
 . 4  });
 . 5  // material setting sun and solar 
. 6 centerBall = new new THREE.Mesh ( new new THREE.SphereGeometry (30, 30, 30), new new THREE.MeshBasicMaterial ({
 . 7      Map: sunTexture
 . 8  }));
 . 9 scene.add (centerBall);

Sun light effects by Spriteintroducing canvasrendering createRadialGradientachieved.

1  / * *
 2  * achieve emission sphere
 . 3  * @param Color color r, g, and b values, such as: "123,123,123";
 . 4  * @Returns the Element {} returns the canvas element
 . 5   * / 
. 6  var generateSprite = function (Color) {
 . 7      var Canvas = document.createElement ( 'Canvas' );
 . 8      canvas.width = 16 ;
 . 9      canvas.height = 16 ;
 10      var context = canvas.getContext ( '2D' );
 . 11      var gradient = context.createRadialGradient (Canvas .width / 2, canvas.height / 2, 0, canvas.width / 2 , 
 12 is     canvas.height / 2, canvas.width / 2);
13     gradient.addColorStop(0, 'rgba(' + color + ',1)');
14     gradient.addColorStop(0.2, 'rgba(' + color + ',1)');
15     gradient.addColorStop(0.4, 'rgba(' + color + ',.6)');
16     gradient.addColorStop(1, 'rgba(0,0,0,0)');
17     context.fillStyle = gradient;
18     context.fillRect(0, 0, canvas.width, canvas.height);
19     return canvas;
20 };
21 // 添加太阳发光效果
22 var centerBallLite = new THREE.Sprite(new THREE.SpriteMaterial({
23     map: new THREE.CanvasTexture(generateSprite(sunSpriteColor)),
24     blending: THREE.AdditiveBlending
25 }));
26 centerBallLite.scale.x = centerBallLite.scale.y = centerBallLite.scale.z = sunScaleSize;
27 scene.add(centerBallLite);

Solar system planets orbits by RingGeometryachieved by revolving track shift positionachieved through the planetary system THREE.Spriteis achieved.

/ * * 
 * Return planetary orbit assembly 
 size * @param starLiteSize planet 
 rotation radius of the planetary * @param starLiteRadius 
 x * @param rotation of the planetary assembly, y, z directions of the three rotation angle 
 * @param speed planetary motion speed 
 * @param imgUrl planetary textures 
 * @param scene scene 
 * @returns {{satellite: THREE.Mesh, speed: *}} satellite combination objects; speed 
* / 
var initSatellite = function (starLiteSize, starLiteRadius, rotation, speed, for imgUrl , SCENE) {
 var Track = new new THREE.Mesh ( new new THREE.RingGeometry (starLiteRadius, starLiteRadius + 0.05, 50,. 1), new new THREE.MeshBasicMaterial ());
 var centerMesh = new new THREE.Mesh (new THREE.SphereGeometry(1, 1, 1), new THREE.MeshLambertMaterial()); //材质设定
var starLite = new THREE.Sprite(new THREE.SpriteMaterial({
     map: THREE.ImageUtils.loadTexture(imgUrl)
}));
starLite.scale.x = starLite.scale.y = starLite.scale.z = starLiteSize;
starLite.position.set(starLiteRadius, 0, 0);
var pivotPoint = new THREE.Object3D();
pivotPoint.add(starLite);
pivotPoint.add(track);
centerMesh.add(pivotPoint);
centerMesh.rotation.set(rotation.x, rotation.y, rotation.z);
scene.add(centerMesh);
   return {starLite: centerMesh, speed: speed};
};

It will render to create a good scene in the sun and planetary rotation and revolution system, rotation and revolution by modifying the timing positionto achieve value, use animation requestAnimationFrameto achieve.

 1 // 执行函数
 2 var render = function () {
 3     renderer.render(scene, camera);
 4     centerBall.rotation.y -= 0.01;
 5     for (var i = 0; i < starLites.length; i++) {
 6         starLites[i].starLite.rotation.z -= starLites[i].speed;
 7     }
 8     orbitcontrols.update();
 9     requestAnimationFrame(render);
10 }