Three.js earth

Developer
Uriuriuriu
Size
3,423 Kb
Views
4,048
  1. Three.js earth Previews
  2. Three.js earth HTML Codes
  3. Three.js earth CSS Codes
  4. Three.js earth JS Codes

How do I make an three.js earth?

What is a three.js earth? How do you make a three.js earth? This script and codes were developed by Uriuriuriu on 10 January 2023, Tuesday.

Three.js earth Previews
IQ Test

Three.js earth - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>three.js earth</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/three.js/r58/three.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Three.js earth - Script Codes CSS Codes

body { background-color: #1f9ede; margin: 0; padding: 0; width: 100%; height: 100%;
}
* { margin: 0; padding: 0; width: 100%; height: 100%;
}

Three.js earth - Script Codes JS Codes

var _scene, _camera, _light, _renderer, _windowHalfX, _windowHalfY;
var _mouseX = _mouseY = 0;
// init function
var createWorld = function(){ //threejs - demo - https://threejs.org/examples/webgl_particles_random.html var ele = document.createElement('div'); document.body.appendChild(ele); _windowHalfX = window.innerWidth / 2; _windowHalfY = window.innerHeight / 2; _camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 10000) _camera.position.z = 5250; // first view position, going zoom _scene = new THREE.Scene(); _scene.fog = new THREE.FogExp2(0x0f8ece, 0.0002); //color of fog - objects are all color _light = new THREE.DirectionalLight(0xffffff, 1); _scene.add(_light); _renderer = new THREE.WebGLRenderer(); _renderer.setSize(window.innerWidth, window.innerHeight); ele.appendChild(_renderer.domElement); _renderer.render(_scene, _camera);
}
// add element
var addParticles = function(pre_sizeAr){ var geometry = new THREE.Geometry(); for (i = 0; i < 150; i ++){ var vertex = new THREE.Vector3(getRandOffsetNum(), getRandOffsetNum(), getRandOffsetNum()); geometry.vertices.push(vertex); } var textur = THREE.ImageUtils.loadTexture("https://dl.dropboxusercontent.com/u/90712768/img/circle_white.png"); for(var i = 0; i < pre_sizeAr.length; i++){ var material = new THREE.ParticleBasicMaterial({ color: 0xffffff, size: pre_sizeAr[i]*5, map: textur, blending: THREE.NormalBlending, transparent: true, }); var particles = new THREE.ParticleSystem(geometry, material); particles.rotation.set(Math.random() * 6, Math.random() * 6, Math.random() * 6); _scene.add(particles); }
}
var addOctahedronGeometry = function(pre_sizeAr){ for(var i = 0; i < pre_sizeAr.length; i++){ var cutNum =Math.floor(Math.random() * 3); var octa = new THREE.Mesh( new THREE.OctahedronGeometry( pre_sizeAr[i]*25,cutNum), new THREE.MeshBasicMaterial ( { color: 0xe44a81, ambient: 0xffffff, specular: 0xcccccc, shininess:1000, transparent :true, opacity :0.999 }) ); octa.position.x = getRandOffsetNum(); octa.position.y = getRandOffsetNum(); octa.position.z = getRandOffsetNum(); _scene.add( octa ); var octaWire = new THREE.Mesh( new THREE.OctahedronGeometry( pre_sizeAr[i]*25,cutNum), new THREE.MeshBasicMaterial( { color: 0xffffff ,wireframe: true} ) ); octaWire.position = octa.position; _scene.add( octaWire ); }
}
var addSphere = function(){ var cubeR = 120; var geometry = new THREE.SphereGeometry(cubeR, cubeR, cubeR); var textur = THREE.ImageUtils.loadTexture("https://dl.dropboxusercontent.com/u/90712768/img/earth.jpg"); var material = new THREE.MeshPhongMaterial ({ fog:false, color: 0xe44a81, ambient: 0xffffff, specular: 0xcccccc, shininess:1000, bumpMap:textur, bumpScale: 3 }); var mesh = new THREE.Mesh(geometry, material); _scene.add(mesh);
};
var addWorldSphere = function(r) { var geometry = new THREE.SphereGeometry(r, 50, 50); var material = new THREE.MeshBasicMaterial({color: 0x0f8ece, wireframe: true, fog:false}); var sphere = new THREE.Mesh(geometry, material); _scene.add(sphere);
};
var getRandOffsetNum = function(){ var num = Math.random() * 1800 + 250; if(Math.random() < 0.6){ num *= -1; } return num;
}
// render task
var render = function() { requestAnimationFrame(render); _camera.position.x += ((_mouseX*4) - _camera.position.x) * .05; _camera.position.y += (( _mouseY*(-3)) - _camera.position.y) * .05; var posZ = _camera.position.z + (( _mouseY*(-3)) - _camera.position.z) * .05; if(posZ < 220) posZ = 220 + (220 - posZ); _camera.position.z = posZ; _light.position.set(_camera.position.x, _camera.position.y * 1.5, _camera.position.z); _camera.lookAt(new THREE.Vector3(0,0,0)); for (var i = 0; i < _scene.children.length; i++){ var object = _scene.children[i]; if (object instanceof THREE.ParticleSystem){ object.rotation.y += .0005; } } _renderer.render(_scene, _camera);
}
// main
createWorld();
addWorldSphere(3000);
addParticles([10,8,10,20,2,8]);
addOctahedronGeometry([10,8,10,20,10,8,10,20,2,8]);
addSphere();
render();
// event
window.addEventListener('resize', onWindowResize, false);
function onWindowResize(){ _windowHalfX = window.innerWidth / 2; _windowHalfY = window.innerHeight / 2; _camera.aspect = window.innerWidth / window.innerHeight; _camera.updateProjectionMatrix(); _renderer.setSize(window.innerWidth, window.innerHeight);
}
window.addEventListener('mousemove', onWindowMouseMove, false);
function onWindowMouseMove(event){ _mouseX = event.clientX - _windowHalfX; _mouseY = event.clientY - _windowHalfY;
}
Three.js earth - Script Codes
Three.js earth - Script Codes
Home Page Home
Developer Uriuriuriu
Username uriuriuriu
Uploaded January 10, 2023
Rating 3.5
Size 3,423 Kb
Views 4,048
Do you need developer help for Three.js earth?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Uriuriuriu (uriuriuriu) Script Codes
Name
Css background animation
Shuffle text word separator
AngularJS - first step -
Three.js ver.1 rotate camera
Glitch Video
Css action sideBar
SANGETUKI separator
Glitchicken
TV effect
Canvas Gaussian Blur
Create amazing web content with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!