console
var renderer, camera, scene;
var Earth, satellites = [];
function initThree() {
var dom = document.getElementById("box");
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(20, dom.clientWidth / dom.clientHeight, 1, 1000);
camera.position.set(0, 0, 400);
renderer = new THREE.WebGLRenderer({
alpha: true,
antialias: true
});
renderer.setSize(dom.clientWidth, dom.clientHeight);
dom.appendChild(renderer.domElement);
var sunTexture = THREE.ImageUtils.loadTexture('../../js/resource/img/map_world.png', {}, function () {
renderer.render(scene, camera);
});
Earth = new THREE.Mesh(new THREE.SphereGeometry(20, 30, 30), new THREE.MeshBasicMaterial({
map: sunTexture
}));
var satellite = new THREE.Sprite(new THREE.SpriteMaterial({
map: new THREE.CanvasTexture(generateSprite('196,233,255')),
blending: THREE.AdditiveBlending
}));
satellite.scale.x = satellite.scale.y = satellite.scale.z = 60;
scene.add(satellite);
scene.add(Earth);
satellites.push(initSatellite(5, 28, {x: -Math.PI * 0.35, y: Math.PI * 0.25, z: 0}, 0.021, scene));
satellites.push(initSatellite(5, 25, {x: -Math.PI * 0.35, y: -Math.PI * 0.2, z: 0}, 0.022, scene));
satellites.push(initSatellite(5, 29, {x: -Math.PI * 0.35, y: Math.PI * 0.05, z: 0}, 0.023, scene));
render();
}
var initSatellite = function (satelliteSize, satelliteRadius, rotation, speed, scene) {
var track = new THREE.Mesh(new THREE.RingGeometry(satelliteRadius, satelliteRadius + 0.05, 50, 1), new THREE.MeshBasicMaterial());
var centerMesh = new THREE.Mesh(new THREE.SphereGeometry(1, 1, 1), new THREE.MeshLambertMaterial());
var satellite = new THREE.Sprite(new THREE.SpriteMaterial({
map: new THREE.CanvasTexture(generateSprite('196,233,255')),
blending: THREE.AdditiveBlending
}));
satellite.scale.x = satellite.scale.y = satellite.scale.z = satelliteSize;
satellite.position.set(satelliteRadius, 0, 0);
var pivotPoint = new THREE.Object3D();
pivotPoint.add(satellite);
pivotPoint.add(track);
centerMesh.add(pivotPoint);
centerMesh.rotation.set(rotation.x, rotation.y, rotation.z);
scene.add(centerMesh);
return {satellite: centerMesh, speed: speed};
};
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;
};
function render() {
renderer.render(scene, camera);
Earth.rotation.y -= 0.01;
for (var i = 0; i < satellites.length; i++) {
satellites[i].satellite.rotation.z -= satellites[i].speed;
}
requestAnimationFrame(render);
}
<script src="https://cdn.bootcdn.net/ajax/libs/three.js/r128/three.js"></script>
<div id="box"></div>
html, body {
width: 100%;
height: 100%;
margin: 0;
background-color: black;
}
div#box {
width: 100%;
height: 100%;
}