JAVASCRIPT create earth universe three.js - Net-Raft.com

Welcome aboard! We are happy you are here and wish you good net-raft!




Just a Web Code Solution
join us

create earth in universe with three.js


 2382

Show ResultJAVASCRIPT


7

// doesn't work in Safari
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>three.js Earth</title>
<script src="//cdnjs.cloudflare.com/ajax/libs/three.js/r73/three.min.js"></script>
<script src="//s3-us-west-2.amazonaws.com/s.cdpn.io/141228/OrbitControls.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/dat-gui/0.5.1/dat.gui.min.js"></script>
<style>
body {
margin: 0;
}
canvas {
display: block;
}
</style>
</head>
<body>
<script>
// Scene, Camera, Renderer
let renderer = new THREE.WebGLRenderer();
let scene = new THREE.Scene();
let aspect = window.innerWidth / window.innerHeight;
let camera = new THREE.PerspectiveCamera(45, aspect, 0.1, 1500);
let cameraRotation = 0;
let cameraRotationSpeed = 0.001;
let cameraAutoRotation = true;
let orbitControls = new THREE.OrbitControls(camera);

// Lights
let spotLight = new THREE.SpotLight(0xffffff, 1, 0, 10, 2);

// Texture Loader
let textureLoader = new THREE.TextureLoader();

// Planet Proto
let planetProto = {
sphere: function(size) {
let sphere = new THREE.SphereGeometry(size, 32, 32);

return sphere;
},
material: function(options) {
let material = new THREE.MeshPhongMaterial();
if (options) {
for (var property in options) {
material[property] = options[property];
}
}

return material;
},
glowMaterial: function(intensity, fade, color) {
// Custom glow shader from https://github.com/stemkoski/stemkoski.github.com/tree/master/Three.js
let glowMaterial = new THREE.ShaderMaterial({
uniforms: {
'c': {
type: 'f',
value: intensity
},
'p': {
type: 'f',
value: fade
},
glowColor: {
type: 'c',
value: new THREE.Color(color)
},
viewVector: {
type: 'v3',
value: camera.position
}
},
vertexShader: `
uniform vec3 viewVector;
uniform float c;
uniform float p;
varying float intensity;
void main() {
vec3 vNormal = normalize( normalMatrix * normal );
vec3 vNormel = normalize( normalMatrix * viewVector );
intensity = pow( c - dot(vNormal, vNormel), p );
gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
}`
,
fragmentShader: `
uniform vec3 glowColor;
varying float intensity;
void main()
{
vec3 glow = glowColor * intensity;
gl_FragColor = vec4( glow, 1.0 );
}`
,
side: THREE.BackSide,
blending: THREE.AdditiveBlending,
transparent: true
});

return glowMaterial;
},
texture: function(material, property, uri) {
let textureLoader = new THREE.TextureLoader();
textureLoader.crossOrigin = true;
textureLoader.load(
uri,
function(texture) {
material[property] = texture;
material.needsUpdate = true;
}
);
}
};

let createPlanet = function(options) {
// Create the planet's Surface
let surfaceGeometry = planetProto.sphere(options.surface.size);
let surfaceMaterial = planetProto.material(options.surface.material);
let surface = new THREE.Mesh(surfaceGeometry, surfaceMaterial);

// Create the planet's Atmosphere
let atmosphereGeometry = planetProto.sphere(options.surface.size + options.atmosphere.size);
let atmosphereMaterialDefaults = {
side: THREE.DoubleSide,
transparent: true
}
let atmosphereMaterialOptions = Object.assign(atmosphereMaterialDefaults, options.atmosphere.material);
let atmosphereMaterial = planetProto.material(atmosphereMaterialOptions);
let atmosphere = new THREE.Mesh(atmosphereGeometry, atmosphereMaterial);

// Create the planet's Atmospheric glow
let atmosphericGlowGeometry = planetProto.sphere(options.surface.size + options.atmosphere.size + options.atmosphere.glow.size);
let atmosphericGlowMaterial = planetProto.glowMaterial(options.atmosphere.glow.intensity, options.atmosphere.glow.fade, options.atmosphere.glow.color);
let atmosphericGlow = new THREE.Mesh(atmosphericGlowGeometry, atmosphericGlowMaterial);

// Nest the planet's Surface and Atmosphere into a planet object
let planet = new THREE.Object3D();
surface.name = 'surface';
atmosphere.name = 'atmosphere';
atmosphericGlow.name = 'atmosphericGlow';
planet.add(surface);
planet.add(atmosphere);
planet.add(atmosphericGlow);

// Load the Surface's textures
for (let textureProperty in options.surface.textures) {
planetProto.texture(
surfaceMaterial,
textureProperty,
options.surface.textures[textureProperty]
);
}

// Load the Atmosphere's texture
for (let textureProperty in options.atmosphere.textures) {
planetProto.texture(
atmosphereMaterial,
textureProperty,
options.atmosphere.textures[textureProperty]
);
}

return planet;
};

let earth = createPlanet({
surface: {
size: 0.5,
material: {
bumpScale: 0.05,
specular: new THREE.Color('grey'),
shininess: 10
},
textures: {
map: 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/141228/earthmap1k.jpg',
bumpMap: 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/141228/earthbump1k.jpg',
specularMap: 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/141228/earthspec1k.jpg'
}
},
atmosphere: {
size: 0.003,
material: {
opacity: 0.8
},
textures: {
map: 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/141228/earthcloudmap.jpg',
alphaMap: 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/141228/earthcloudmaptrans.jpg'
},
glow: {
size: 0.02,
intensity: 0.7,
fade: 7,
color: 0x93cfef
}
},
});

// Marker Proto
let markerProto = {
latLongToVector3: function latLongToVector3(latitude, longitude, radius, height) {
var phi = (latitude)*Math.PI/180;
var theta = (longitude-180)*Math.PI/180;

var x = -(radius+height) * Math.cos(phi) * Math.cos(theta);
var y = (radius+height) * Math.sin(phi);
var z = (radius+height) * Math.cos(phi) * Math.sin(theta);

return new THREE.Vector3(x,y,z);
},
marker: function marker(size, color, vector3Position) {
let markerGeometry = new THREE.SphereGeometry(size);
let markerMaterial = new THREE.MeshLambertMaterial({
color: color
});
let markerMesh = new THREE.Mesh(markerGeometry, markerMaterial);
markerMesh.position.copy(vector3Position);

return markerMesh;
}
}

// Place Marker
let placeMarker = function(object, options) {
let position = markerProto.latLongToVector3(options.latitude, options.longitude, options.radius, options.height);
let marker = markerProto.marker(options.size, options.color, position);
object.add(marker);
}

// Place Marker At Address
let placeMarkerAtAddress = function(address, color) {
let encodedLocation = address.replace(/\s/g, '+');
let httpRequest = new XMLHttpRequest();

httpRequest.open('GET', 'https://maps.googleapis.com/maps/api/geocode/json?address=' + encodedLocation);
httpRequest.send(null);
httpRequest.onreadystatechange = function() {
if (httpRequest.readyState == 4 && httpRequest.status == 200) {
let result = JSON.parse(httpRequest.responseText);

if (result.results.length > 0) {
let latitude = result.results[0].geometry.location.lat;
let longitude = result.results[0].geometry.location.lng;

placeMarker(earth.getObjectByName('surface'),{
latitude: latitude,
longitude: longitude,
radius: 0.5,
height: 0,
size: 0.01,
color: color,
});
}
}
};
}

// Galaxy
let galaxyGeometry = new THREE.SphereGeometry(100, 32, 32);
let galaxyMaterial = new THREE.MeshBasicMaterial({
side: THREE.BackSide
});
let galaxy = new THREE.Mesh(galaxyGeometry, galaxyMaterial);

// Load Galaxy Textures
textureLoader.crossOrigin = true;
textureLoader.load(
'https://s3-us-west-2.amazonaws.com/s.cdpn.io/141228/starfield.png',
function(texture) {
galaxyMaterial.map = texture;
scene.add(galaxy);
}
);

// Scene, Camera, Renderer Configuration
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

camera.position.set(1,1,1);
orbitControls.enabled = !cameraAutoRotation;

scene.add(camera);
scene.add(spotLight);
scene.add(earth);

// Light Configurations
spotLight.position.set(2, 0, 1);

// Mesh Configurations
earth.receiveShadow = true;
earth.castShadow = true;
earth.getObjectByName('surface').geometry.center();

// On window resize, adjust camera aspect ratio and renderer size
window.addEventListener('resize', function() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
});

// Main render function
let render = function() {
earth.getObjectByName('surface').rotation.y += 1/32 * 0.01;
earth.getObjectByName('atmosphere').rotation.y += 1/16 * 0.01;
if (cameraAutoRotation) {
cameraRotation += cameraRotationSpeed;
camera.position.y = 0;
camera.position.x = 2 * Math.sin(cameraRotation);
camera.position.z = 2 * Math.cos(cameraRotation);
camera.lookAt(earth.position);
}
requestAnimationFrame(render);
renderer.render(scene, camera);
};

render();

// dat.gui
var gui = new dat.GUI();
var guiCamera = gui.addFolder('Camera');
var guiSurface = gui.addFolder('Surface');
var guiMarkers = guiSurface.addFolder('Markers');
var guiAtmosphere = gui.addFolder('Atmosphere');
var guiAtmosphericGlow = guiAtmosphere.addFolder('Glow');

// dat.gui controls object
var cameraControls = new function() {
this.speed = cameraRotationSpeed;
this.orbitControls = !cameraAutoRotation;
}

var surfaceControls = new function() {
this.rotation = 0;
this.bumpScale = 0.05;
this.shininess = 10;
}

var markersControls = new function() {
this.address = '';
this.color = 0xff0000;
this.placeMarker= function() {
placeMarkerAtAddress(this.address, this.color);
}
}

var atmosphereControls = new function() {
this.opacity = 0.8;
}

var atmosphericGlowControls = new function() {
this.intensity = 0.7;
this.fade = 7;
this.color = 0x93cfef;
}

// dat.gui controls
guiCamera.add(cameraControls, 'speed', 0, 0.1).step(0.001).onChange(function(value) {
cameraRotationSpeed = value;
});
guiCamera.add(cameraControls, 'orbitControls').onChange(function(value) {
cameraAutoRotation = !value;
orbitControls.enabled = value;
});

guiSurface.add(surfaceControls, 'rotation', 0, 6).onChange(function(value) {
earth.getObjectByName('surface').rotation.y = value;
});
guiSurface.add(surfaceControls, 'bumpScale', 0, 1).step(0.01).onChange(function(value) {
earth.getObjectByName('surface').material.bumpScale = value;
});
guiSurface.add(surfaceControls, 'shininess', 0, 30).onChange(function(value) {
earth.getObjectByName('surface').material.shininess = value;
});

guiMarkers.add(markersControls, 'address');
guiMarkers.addColor(markersControls, 'color');
guiMarkers.add(markersControls, 'placeMarker');

guiAtmosphere.add(atmosphereControls, 'opacity', 0, 1).onChange(function(value) {
earth.getObjectByName('atmosphere').material.opacity = value;
});

guiAtmosphericGlow.add(atmosphericGlowControls, 'intensity', 0, 1).onChange(function(value) {
earth.getObjectByName('atmosphericGlow').material.uniforms['c'].value = value;
});
guiAtmosphericGlow.add(atmosphericGlowControls, 'fade', 0, 50).onChange(function(value) {
earth.getObjectByName('atmosphericGlow').material.uniforms['p'].value = value;
});
guiAtmosphericGlow.addColor(atmosphericGlowControls, 'color').onChange(function(value) {
earth.getObjectByName('atmosphericGlow').material.uniforms.glowColor.value.setHex(value);
});
</script>
</body>
</html>


By        
The power of the user (%)
11%



The most helpful JAVASCRIPT solutions

How to get client machine name or computer name with javascript ?How to get client machine name or computer name with javascript ?JAVASCRIPT

Click to see more ...

  20.2K     396

How can I get the last day and the next day in javascript ?How can I get the last day and the next day in javascript ?JAVASCRIPT

Click to see more ...

  5K     360

get client hostname javascriptget client hostname javascriptJAVASCRIPT

Click to see more ...

  4.7K     301

create 3d barrel using javascriptcreate 3d barrel using javascriptJAVASCRIPT

Click to see more ...

  3.4K     258

Create fireworks using javascriptCreate fireworks using javascriptJAVASCRIPT

Click to see more ...

  3K     204

create qr code javascriptcreate qr code javascriptJAVASCRIPT

Click to see more ...

  2.5K     205

detect ie javascriptdetect ie javascriptJAVASCRIPT

Click to see more ...

  2.8K     194

how to create foreach class using javascript ?how to create foreach class using javascript ?JAVASCRIPT

Click to see more ...

  2.2K     178

fire event when user is idle javascriptfire event when user is idle javascriptJAVASCRIPT

Click to see more ...

  2.5K     179

create earth in universe with three.jscreate earth in universe with three.jsJAVASCRIPT

Click to see more ...

  2.4K     177

Welcome aboard!
We are happy you are here and
wish you good net-raft!