After being inspired to do a space themed threeJs final, I learnt how to add in textures, control different functions and modify them to do what I want them to do as well as take something and put my own spin on it.
After deciding that I wanted my main focus to be on Earth and finding that just using the snippets felt like I wasn’t learning code and what threeJs can do, I decided to push it a little further. I did this by adding two meshes, one a jpg and one a png on top of each other to create layers. From there I wanted to have them spin at different speeds to make it clear that they were two different elements. I decided to have Earth spin slower than the clouds but still visible that it is rotating. Having the different meshes rotate at different speeds created a visually appealing loop.
The next element I wanted to add were some stars which I created using the particles snippet. However, instead of having them spin around screen, I wanted them to stay in one spot and then I wanted them to twinkle. In the particles snippet you can have the particles change colour but I decided that having one colour worked well and then having the particles slightly smaller and then fade in and out of brightness created a nice twinkle effect and that added another layer to the final output and tied the space theme together.
I wanted to add in one more element as it was becoming more obvious that this was based in space with a black background, stars and Earth, I thought that having a moon would also be a cool idea. It took a while to play with the code to get the positioning of the moon correct but once it was it was easy to create the rotation.
A lot of the struggles I had with this program Tim was able to help me with. I struggled with adding two meshes on top of each other but Tim suggested making the cloud layer slightly bigger would fix the problem and it did just that. He also came up with the math code to create the brightening and fading for my stars. Thank you Tim.
You can view it here – //threejsplaygnd.brangerbriz.com/s/?id=8238 and I believe I managed to get the moon working.
Understanding the code –
Below is the code. There are image which has my notes explaining what it does and then my actual code and the images I used.
Code –
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″>
<style>
body {
background-color: #ffffff;
margin: 0;
overflow: hidden;
}
</style>
</head>
<body>
http://threejsplaygnd.brangerbriz.net/js/three.min.js
http://threejsplaygnd.brangerbriz.net/js/Detector.js
<script>
if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
var camera, scene, renderer;
var geometry, material, mesh; //the different variables that are used. These also control the differnt aspects so I can do different things with them individually
var cloud_geometry, cloud_material, cloud_mesh;
var moon_geometry, moon_material, moon_mesh;
function setup() {
var W = window.innerWidth, H = window.innerHeight;
renderer = new THREE.WebGLRenderer();
renderer.setSize( W, H );
document.body.appendChild( renderer.domElement );
camera = new THREE.PerspectiveCamera( 50, W/H, 1, 10000 );
camera.position.z = 500;
scene = new THREE.Scene();
//moon
map = THREE.ImageUtils.loadTexture(‘https://lh3.googleusercontent.com/proxy/Knq3LMr0rgQKzbVDRM_S-f9jUzEqHN8tOWQU59BJNjoIjfYNeTE4mlaMb3wH1ZuVXQfjMoj_vVUtKenJmodYos-h’); //this loads the image using the imageURL
moon_geometry = new THREE.SphereGeometry(150, 100, 100); //this controls the size
moon_material = new THREE.MeshBasicMaterial({shading: THREE.FlatShading, color: 0xdcdcdc, map: map}); //this controls the colour, shading, transparency and opacity (if stated) of the shape
moon_mesh = new THREE.Mesh(moon_geometry, moon_material);
map.wrapS = map.wrapT = THREE.RepeatWrapping;
map.repeat.set( 1, 1 );
moon_mesh.scale.x = moon_mesh.scale.y = moon_mesh.scale.z = 0.39; //this controls the size
moon_mesh.position.y = 150.23; //this controls the X and Y locations
moon_mesh.position.x = 180.23;
scene.add(moon_mesh); //this loads everything
//Clouds
map = THREE.ImageUtils.loadTexture(‘https://upload.wikimedia.org/wikipedia/commons/d/df/Earth-clouds.png’); //this loads in the image url to use as a texture for the shape
cloud_geometry = new THREE.SphereGeometry(150, 100, 100);
cloud_material = new THREE.MeshBasicMaterial({shading: THREE.FlatShading, color: 0xdcdcdc, map: map, transparent: true, opacity: 1});
cloud_mesh = new THREE.Mesh(cloud_geometry, cloud_material);
map.wrapS = map.wrapT = THREE.RepeatWrapping;
map.repeat.set( 1, 1 );
cloud_mesh.scale.x = cloud_mesh.scale.y = cloud_mesh.scale.z = 1.01;
scene.add(cloud_mesh);
//Earth
map = THREE.ImageUtils.loadTexture(‘https://steamuserimages-a.akamaihd.net/ugc/545263034473954343/68F4AB04814E6E57B78A848CEF3852476F0B00A8/?imw=637&imh=358&ima=fit&impolicy=Letterbox&imcolor=%23000000&letterbox=true’);
geometry = new THREE.SphereGeometry(150, 100, 100);
material = new THREE.MeshBasicMaterial({shading: THREE.FlatShading, color: 0xdcdcdc, map: map});
mesh = new THREE.Mesh(geometry, material);
map.wrapS = map.wrapT = THREE.RepeatWrapping;
map.repeat.set( 1, 1 );
scene.add(mesh);
//Stars
geometry = new THREE.Geometry();
for ( i = 0; i < 5000; i ++ ) {
var vertex = new THREE.Vector3();
vertex.x = 1000 * Math.random() – 500;
vertex.y = 1000 * Math.random() – 500;
vertex.z = 1000 * Math.random() – 500;
geometry.vertices.push( vertex );
}
material = new THREE.ParticleBasicMaterial( { size: 3, sizeAttenuation: false, transparent: true } );//this mentions the size of the star pixels
material.color.setHex( 0xff00ff );
particles = new THREE.ParticleSystem( geometry, material );
particles.sortParticles = true;
scene.add( particles );
//Background
bg = document.body.style;
bg.background = ‘#000000’;
}
function draw() {
requestAnimationFrame( draw );
//rotation cntrols the speed and the angle of which is rotates
cloud_mesh.rotation.x = Date.now() * 0.0000;
cloud_mesh.rotation.y = Date.now() * 0.0003;
cloud_mesh.rotation.z = Date.now() * 0.00000;
mesh.rotation.x = Date.now() * 0.0000;
mesh.rotation.y = Date.now() * 0.0001;
mesh.rotation.z = Date.now() * 0.0000;
moon_mesh.rotation.x = Date.now() * 0.0000;
moon_mesh.rotation.y = Date.now() * 0.0001;
moon_mesh.rotation.z = Date.now() * 0.0000;
var time = Date.now() * 0.0003; //size of pixel stars
h = (((Math.sin( Date.now() * 0.002 ))+0.75)/4)+.2; //controls the speed at which the star pixels fade and brighten
console.log(h);
material.color.setHSL( 0.5, 1, h ); //colour of pixel stars
renderer.render( scene, camera );
}
setup();
draw();
</script>
</body>
</html>
Images –
The cloud image won’t show on a white page but you can click here to see the image or go here to the website – https://commons.wikimedia.org/wiki/File:Earth-clouds.png
Earth website – https://steamcommunity.com/sharedfiles/filedetails/?id=348783119
Moon can be seen here – http://solarviews.com/cap/moon/moonmap.htm
Video –
;)
Coding for Creative Practice 
