3D星球动画html,基于Three.js实现的3D土星（星球）动画

JavaScript

语言：

JaveScriptBabelCoffeeScript

确定

function getMat(color) {

// our material is a phong material, with no shininess (highlight) and a black specular

return new THREE.MeshPhongMaterial({

color: color,

shininess: 0,

specular: 0x000000,

shading: THREE.FlatShading // THREE.SmoothShading

});

}

// colors

var Colors = {

green: 0x8fc999,

blue: 0x5fc4d0,

orange: 0xee5624,

yellow: 0xfaff70,

}

var colorsLength = Object.keys(Colors).length;

function getRandomColor() {

var colIndx = Math.floor(Math.random() * colorsLength);

var colorStr = Object.keys(Colors)[colIndx];

return Colors[colorStr];

}

// parameters to customize the planet

var parameters = {

minRadius: 30,

maxRadius: 50,

minSpeed: .015,

maxSpeed: .025,

particles: 300,

minSize: .1,

maxSize: 2,

}

// For a THREEJS project we need at least

// a scene

// a renderer

// a camera

// a light (1 or many)

// a mesh (an object to display)

var scene, renderer, camera, saturn, light;

var WIDTH = window.innerWidth,

HEIGHT = window.innerHeight;

var controls;

// initialise the world

function initWorld() {

//

// THE SCENE

//

scene = new THREE.Scene();

//

// THE CAMERA

//

// Perspective or Orthographic

// Field of view : I use 75, play with it

// Aspect ratio : width / height of the screen

// near and far plane : I usually set them at .1 and 2000

/*

camera = new THREE.PerspectiveCamera(

fieldOfView,

aspectRatio,

nearPlane,

farPlane

);

*/

camera = new THREE.PerspectiveCamera(75, WIDTH / HEIGHT, .1, 2000);

camera.position.z = 100;

//

// THE RENDERER

//

renderer = new THREE.WebGLRenderer({

alpha: true,

antialias: true

});

renderer.setSize(WIDTH, HEIGHT);

renderer.shadowMapEnabled = true;

// Make the renderer use the #world div to render le scene

container