<body>
<script src="https://threejs.org/build/three.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.5/dat.gui.min.js'></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/simplex-noise/2.3.0/simplex-noise.min.js"></script>
<style>
html,
body,
canvas { margin: 0;
width: 100%;
height: 100%;
display: block;
position: absolute;
top: 0;
left: 0;
}
</style>
<script>
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 99999999);
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
var oControls = new THREE.OrbitControls(camera, renderer.domElement);
scene.add(new THREE.AmbientLight(0xffffff, 0.4))
function createCanvasMaterial(color, size) { var matCanvas = document.createElement('canvas'); matCanvas.width = matCanvas.height = size;
var matContext = matCanvas.getContext('2d');
var texture = new THREE.Texture(matCanvas);
var center = size / 2;
matContext.beginPath();
matContext.arc(center, center, size / 2, 0, 2 * Math.PI, false);
matContext.closePath();
matContext.fillStyle = color;
matContext.fill();
texture.needsUpdate = true;
return texture;
}
function deg(i) { return i * Math.PI / 180
}
function RGB(r, g, b) { function colorcheck(c) { if (c > 255) { c = 255
}
if (c < 0) { c = 0
}
return c
}
r = colorcheck(r)
g = colorcheck(g)
b = colorcheck(b)
return 'rgb(' + r + ',' + g + ',' + b + ')'}
function rgb2hex(rgb) { rgb = rgb.match(/^rgba?[\s+]?\([\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?/i);
return (rgb && rgb.length === 4) ? "#" +
("0" + parseInt(rgb[1], 10).toString(16)).slice(-2) + ("0" + parseInt(rgb[2], 10).toString(16)).slice(-2) + ("0" + parseInt(rgb[3], 10).toString(16)).slice(-2) : '';}
function rotateAround(point, center, angle) { angle = (angle) * (Math.PI / 180);
var rotatedX = Math.cos(angle) * (point.x - center.x) -
Math.sin(angle) * (point.y - center.y) +
center.x;
var rotatedY = Math.sin(angle) * (point.x - center.x) + Math.cos(angle) * (point.y - center.y) + center.y;
return { x: rotatedX,
y: rotatedY
}
}
function rotateAround3d(point, center, angle) { angle = (angle) * (Math.PI / 180);
var rotatedX = Math.cos(angle) * (point.x - center.x) -
Math.sin(angle) * (point.y - center.y) +
center.x;
var rotatedY = Math.sin(angle) * (point.x - center.x) + Math.cos(angle) * (point.y - center.y) + center.y;
return { x: rotatedX,
y: rotatedY
}
}
function rgb2color(r, g, b) { return dec2hex(rgb2hex(RGB(r, g, b)))
}
function dec2hex(i) { var result = "0x"
result = result + i.slice(1)
return result
}
function randint(min, max) { return Math.floor(Math.random() * max) + min
}
function randoffset(num, off) { return randint(num - off, off * 2)
}
var light = new THREE.PointLight('yellow', 3, 3000);light.position.set(0, 0, 0);
scene.add(light);
var geometry = new THREE.TetrahedronGeometry(200, 5);
var c = 0
console.log(255 / geometry.faces.length)
for (var i = 0; i < geometry.faces.length; i++) {
var face = geometry.faces[i];
color = rgb2color(255, randint(0, 150), 0)
c += 255 / geometry.faces.length
face.color.setHex(color);
}
var noise = 5
for (var i = 0; i < geometry.vertices.length; i++) { var v = geometry.vertices[i];
v.x += -noise / 2 + Math.random() * noise;
v.y += -noise / 2 + Math.random() * noise;
v.z += -noise / 2 + Math.random() * noise;
}
var sun = new THREE.Mesh(geometry, new THREE.MeshBasicMaterial({ vertexColors: THREE.FaceColors
}));
scene.add(sun);
function newPlanet(dfc, size, isGas) { var segments = 100
gr = {} gr.dfc = dfc
gr.size = size
gr.color = {} gr.color.land = {} gr.color.land.r = randint(0, 255)
gr.color.land.g = randint(0, 255)
gr.color.land.b = randint(0, 255)
gr.color.water = {} if (isGas) { gr.color.water.r = gr.color.land.r
gr.color.water.g = gr.color.land.g
gr.color.water.b = gr.color.land.b
segments = 32
} else { gr.color.water.r = randint(0, 255)
gr.color.water.g = randint(0, 255)
gr.color.water.b = randint(0, 255)
}
var simplex = new SimplexNoise();
var diff = segments / 4
var geometry = new THREE.SphereGeometry(size, segments, segments);
for (var i = 0; i < geometry.faces.length; i += 2) {
var face = geometry.faces[i];
var choices = []
var x = i % segments
var y = Math.floor(i / segments)
var colorChoice
if (simplex.noise2D(x / 30, y / 30) >= 0.1) { colorChoice = 'land'
} else { colorChoice = 'water'
}
var color
if (colorChoice == 'land') { color = rgb2color(gr.color.land.r, gr.color.land.g, gr.color.land.b)
} else { color = rgb2color(gr.color.water.r, gr.color.water.g, gr.color.water.b)
}
var face2 = geometry.faces[i + 1]
face.color.setHex(color);
face2.color.setHex(color);
face.colorChoice = colorChoice
face2.colorChoice = colorChoice;
}
gr.mesh = new THREE.Mesh(geometry, new THREE.MeshPhongMaterial({ vertexColors: THREE.FaceColors
}));
gr.mesh.position.z = dfc
point = { x: gr.mesh.position.x,
y: gr.mesh.position.z
}
center = { x: 0,
y: 0
}
r = rotateAround(point, center, randint(0, 360))
gr.mesh.position.x = r.x
gr.mesh.position.z = r.y
gr.axisRotation = randoffset(20, 10)
gr.mesh.rotation.x = deg(gr.axisRotation)
gr.mesh.rotation.z = deg(gr.axisRotation)
scene.add(gr.mesh)
if (isGas) { gr.isRing = Math.random() >= 0.3
}
if (gr.isRing) { gr.ring = {} gr.ring.count = 150,
gr.ring.particles = new THREE.Geometry(),
gr.ring.material = new THREE.PointsMaterial({ size: 10,
map: createCanvasMaterial(rgb2hex(RGB(randint(0, 255), randint(0, 255), randint(0, 255))), 256),
transparent: true,
depthWrite: false
});
for (var p = 0; p < gr.ring.count; p++) {
var pX = randoffset(size * 1.5, 10),
pY = randoffset(0, 10),
pZ = 0
point = { x: pX,
y: 0
}
center = { x: 0,
y: 0
}
r = rotateAround(point, center, randint(0, 360))
pX = r.x
pY = r.y
var particle = new THREE.Vector3(pX, pY, pZ)
gr.ring.particles.vertices.push(particle);
gr.ring.rdeg = randint(25, 50) / 100
}
gr.ring.system = new THREE.Points(
gr.ring.particles,
gr.ring.material);
scene.add(gr.ring.system);
gr.ring.system.rotation.x = deg(randint(0, 360))
gr.ring.system.rotation.y = deg(randint(0, 360))
} else { gr.moonCount = randint(0, 10)
gr.moons = []
for (var i = 0; i < gr.moonCount; i++) { gr.moons.push(newMoon(gr.size, gr.mesh.position, dfc, gr.moonCount))
}
}
return gr
}
function newMoon(size, position, dfc, num) { gl = {} gl.size = (size / 2) / (num)
gl.dfc = dfc
gl.size = randoffset(gl.size, size / 10)
var geometry = new THREE.TetrahedronGeometry(gl.size, randint(2, 1));
var color = randint(100, 100)
gl.color = color
var material = new THREE.MeshPhongMaterial({ color: rgb2hex(RGB(color, color, color))
})
gl.mesh = new THREE.Mesh(geometry, material)
scene.add(gl.mesh)
gl.mesh.position.x = (size * 2) + position.x + gl.size
gl.mesh.position.y = position.y
gl.mesh.position.z = position.z
pi2 = Math.PI * 2
gl.rdeg = randint(25, 50) / 100
gl.rang = randint(-pi2, pi2 * 2) / 10
return gl
}
planets = []
prev = 200
var mindfc
var astPlace = randint(3, 4)
var astDist
for (var i = 0; i < 10; i++) { if (i != astPlace) { sizeD = Math.abs(prev - 100) / 20
size = randint(sizeD, 50)
dfc = size + prev
dfc += randint(50, 50)
if (i == 0) { mindfc = dfc
}
var gasplanet = false
if (i > astPlace) { gasplanet = true
}
planets.push(newPlanet(dfc, size, gasplanet))
prev = dfc + size
} else { prev += 100
astDist = prev - 50
}
}
var astCount = 600,
asteroids = new THREE.Geometry(),
aMaterial = new THREE.PointsMaterial({ size: 10,
map: createCanvasMaterial('#' + 808080, 256), transparent: true,
depthWrite: false
});
for (var p = 0; p < astCount; p++) {
var pX = randoffset(astDist, 20),
pY = randoffset(0, 20),
pZ = 0
point = { x: pX,
y: 0
}
center = { x: 0,
y: 0
}
r = rotateAround(point, center, randint(0, 360))
pX = r.x
pZ = r.y
var particle = new THREE.Vector3(pX, pY, pZ)
asteroids.vertices.push(particle);
}
var astSystem = new THREE.Points(
asteroids,
aMaterial);
scene.add(astSystem);
var starCount = 500,
stars = new THREE.Geometry(),
sMaterial = new THREE.PointsMaterial({ color: 0xFFFFFF,
size: 40
});
for (var p = 0; p < starCount; p++) {
var pX = randint(5000, 5000),
pY,
pZ
point = { x: pX,
y: 0
}
center = { x: 0,
y: 0
}
r = rotateAround(point, center, randint(0, 360))
pX = r.x
pY = r.y
point = { x: pX,
y: 0
}
center = { x: 0,
y: 0
}
r = rotateAround(point, center, randint(0, 360))
pX = r.x
pZ = r.y
var particle = new THREE.Vector3(pX, pY, pZ)
stars.vertices.push(particle);
}
var starSystem = new THREE.Points(
stars,
sMaterial);
scene.add(starSystem);
camera.position.x = 2000;
camera.position.y = 500
camera.position.z = 0;
lookAt = new THREE.Vector3(0, 0, 0)
camera.lookAt(lookAt)
oControls.target.set(0, 0, 0);
oControls.enablePan = false;
oControls.minDistance = 300;
oControls.maxDistance = 5000;
oControls.update()
var render = function() { requestAnimationFrame(render);
mainloop()
renderer.render(scene, camera);
};
function sunrotate(p) { var rdeg = 100 / (p.dfc + 30 - mindfc)
rdeg /= 3
point = { x: p.mesh.position.x,
y: p.mesh.position.z
}
center = { x: 0,
y: 0
}
r = rotateAround(point, center, rdeg)
p.mesh.position.x = r.x
p.mesh.position.z = r.y
point = { x: p.mesh.position.x,
y: p.mesh.position.y
}
r = rotateAround(point, center, (rdeg / Math.PI) / 2)
p.mesh.position.x = r.x
p.mesh.position.y = r.y
return p
}
function mainloop() { for (var i = 0; i < planets.length; i++) {
planet = planets[i]
planet = sunrotate(planet)
planet.mesh.rotation.y += deg(1)
if (planet.isRing) { planet.ring.system.rotation.z -= deg(planet.ring.rdeg)
planet.ring.system.position.x = planet.mesh.position.x
planet.ring.system.position.y = planet.mesh.position.y
planet.ring.system.position.z = planet.mesh.position.z
} else { for (var l = 0; l < planet.moons.length; l++) { moon = planet.moons[l]
moon = sunrotate(moon)
point = { x: moon.mesh.position.x,
y: moon.mesh.position.z
}
center = { x: planet.mesh.position.x,
y: planet.mesh.position.z
}
r = rotateAround(point, center, moon.rdeg)
moon.mesh.position.x = r.x
moon.mesh.position.z = r.y
point = { x: moon.mesh.position.x,
y: moon.mesh.position.y
}
center = { x: planet.mesh.position.x,
y: planet.mesh.position.y
}
r = rotateAround(point, center, moon.rang)
moon.mesh.position.x = r.x
moon.mesh.position.y = r.y
moon.mesh.rotation.x += deg(1)
moon.mesh.rotation.y += deg(1)
}
}
}
astSystem.rotation.y -= deg(0.05)
}
render();
window.addEventListener('resize', onWindowResize, false);
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
}
</script>
</body>
+ 
+ 
+ 
= 
File