Skip to content

Instantly share code, notes, and snippets.

@Soonogo

Soonogo/index.html

Created February 14, 2023 09:24
Show Gist options
  • Save Soonogo/6649f8958618e717ac9a5f8a1b902691 to your computer and use it in GitHub Desktop.
Save Soonogo/6649f8958618e717ac9a5f8a1b902691 to your computer and use it in GitHub Desktop.
Download ZIP
Three js - Interactive solar system
Raw
index.html
<style>
@import url('https://fonts.googleapis.com/css?family=Raleway:100,100i,200,300,400,500,600,700,800');
</style>
<div id="container">
<img id ="border" src="https://image.ibb.co/gFxj6F/border.png">
<div id="welcome">
<p id="firstSentence">Welcome to my <span id="universe">universe</span></p>
<p id="lastSentence">Click on the <span id="sun">sun</span> to get started</p>
</div>
<div id="content">
<h2 id="contentTitle"></h2>
<p id="subtitle"></p>
<p id="description"></p>
</div>
<div ><a id="social" target="_blank" href ="https://twitter.com/nskargovskii">follow : @nskargovskii</a></div>
</div>
Raw
script.js
var container, stats;
var camera, controls, scene, renderer;
var info;
var cube;
var sphereTab = [];
var objects = [];
var parent2;
var sun;
var sun2;
var sun3;
var currentcolor;
var cubeNul;
var earthPivot;
var earthPivot3;
var mesh;
var planetViewed = 0;
init();
animate();
$(window).on('load', function() {
TweenMax.to($('#welcome'), 1, {
css: {
opacity: 1
},
ease: Quad.easeInOut,
});
TweenMax.to($('#social'), 0.5, {
css: {
bottom:'20px'
},delay:0.5,
ease: Quad.easeInOut,
});
TweenMax.to($('#border'), 0.5, {
css: {
height: '200px',
},
delay: 0.5,
ease: Quad.easeInOut,
});
});
function hideWelcome() {
TweenMax.to($('#welcome'), 0.5, {
css: {
opacity: 0
},
ease: Quad.easeInOut
});
TweenMax.to($('#welcome'), 0.5, {
css: {
display: 'none'
},
delay: 1,
ease: Quad.easeInOut
});
}
function init() {
camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.z = 68;
controls = new THREE.OrbitControls(camera);
controls.maxDistance = 300;
controls.minDistance = 30;
scene = new THREE.Scene();
var geoSphere = new THREE.SphereGeometry(Math.random() * 1, 20, 20);
for (var i = 0; i < 500; i++) {
// randRadius = Math.random()*30+10;
lumiereS = new THREE.MeshPhongMaterial({
emissive: '#fff'
});
sphereTab.push(new THREE.Mesh(new THREE.SphereGeometry(Math.random() * 1, 20, 20), lumiereS));
}
var posX = -3000;
var posY = -3000;
for (var i = 0; i < sphereTab.length; i++) {
sphereTab[i].position.set(Math.random() * 600 - 300, Math.random() * 600 - 300, Math.random() * 600 - 300);
scene.add(sphereTab[i]);
}
//////Sun////////
var pinkMat = new THREE.MeshPhongMaterial({
color: 0xF66120,
emissive: 0xF66120,
specular: 0xFFED22,
shininess: 10,
shading: THREE.FlatShading,
transparent: 1,
opacity: 1
});
var pinkMat2 = new THREE.MeshPhongMaterial({
color: 0xF66120,
emissive: 0xF66120,
specular: 0xFFED22,
shininess: 10,
shading: THREE.FlatShading,
transparent: 1,
opacity: 1
});
var geometry = new THREE.IcosahedronGeometry(3, 1);
var geometry2 = new THREE.IcosahedronGeometry(2.5, 1);
var geometry4 = new THREE.IcosahedronGeometry(3, 1);
// material
var material = new THREE.MeshPhongMaterial({
color: 0xffc12d,
emissive: 0xffc12d,
shading: THREE.FlatShading
});
var material2 = new THREE.MeshPhongMaterial({
color: 0x26D7E7,
emissive: 0x26D7E7,
shading: THREE.FlatShading
});
var material4 = new THREE.MeshPhongMaterial({
color: 0xacacac,
emissive: 0xacacac,
shading: THREE.FlatShading
});
sun = new THREE.Mesh(new THREE.IcosahedronGeometry(10, 1), pinkMat);
scene.add(sun);
objects.push(sun);
sun2 = new THREE.Mesh(new THREE.IcosahedronGeometry(10, 1), pinkMat2);
sun2.rotation.x = 1;
scene.add(sun2);
objects.push(sun2);
sun3 = new THREE.Mesh(new THREE.IcosahedronGeometry(10, 1), pinkMat2);
sun3.rotation.x = 1;
scene.add(sun2);
objects.push(sun3);
earthPivot3 = new THREE.Object3D();
sun.add(earthPivot3);
var radius = 16;
var tubeRadius = 0.03;
var radialSegments = 8 * 10;
var tubularSegments = 6 * 15;
var arc = Math.PI * 3;
var geometry3 = new THREE.TorusGeometry(radius, tubeRadius, radialSegments, tubularSegments, arc);
var material3 = new THREE.MeshLambertMaterial({
color: 0xffffff,
emissive: 0xffffff,
shading: THREE.FlatShading,
});
mesh = new THREE.Mesh(geometry3, material3);
earthPivot3.add(mesh);
/// planet blue ///
earthPivot = new THREE.Object3D();
sun.add(earthPivot);
var earth = new THREE.Mesh(geometry, material);
earth.position.x = 15;
earthPivot.add(earth);
objects.push(earth);
///// planet green ////
earthPivot2 = new THREE.Object3D();
sun.add(earthPivot2);
var earth2 = new THREE.Mesh(geometry2, material2);
earth2.position.x = 20;
earthPivot2.add(earth2);
objects.push(earth2);
////planet violet ///
earthPivot4 = new THREE.Object3D();
sun.add(earthPivot4);
var earth3 = new THREE.Mesh(geometry4, material4);
earth3.position.x = 26;
earthPivot4.add(earth3);
objects.push(earth3);
// lights
light = new THREE.DirectionalLight(0x4f4f4f);
light.position.set(4, 4, 4);
scene.add(light);
light = new THREE.DirectionalLight(0x4f4f4f);
light.position.set(-4, -4, -4);
scene.add(light);
//render
renderer = new THREE.WebGLRenderer({
antialias: true
});
renderer.sortObjects = false;
renderer.setClearColor(0x131A3D, 1);
renderer.setSize(window.innerWidth, window.innerHeight);
stats = new Stats();
container = document.getElementById('container');
container.appendChild(renderer.domElement);
window.addEventListener('resize', onWindowResize, false);
info = document.getElementById('contentTitle');
subtitle = document.getElementById('subtitle');
description = document.getElementById('description')
var univers = document.getElementById('univers');
}
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
render();
}
function setFromCamera(raycaster, coords, origin) {
raycaster.ray.origin.copy(camera.position);
raycaster.ray.direction.set(coords.x, coords.y, 0.5).unproject(camera).sub(camera.position).normalize();
}
function onMouseDown(event) {
raycaster = new THREE.Raycaster();
mouse = new THREE.Vector2();
mouse.x = (event.clientX / renderer.domElement.width) * 2 - 1;
mouse.y = -(event.clientY / renderer.domElement.height) * 2 + 1;
setFromCamera(raycaster, mouse, camera);
var intersects = raycaster.intersectObjects(objects);
currentcolor = intersects[0].object.material.color.getHex();
if (intersects.length > 0) {
console.log(currentcolor);
switch (intersects[0].object.geometry.type) {
case 'IcosahedronGeometry':
if (currentcolor == 0xF66120) {
if (planetViewed == 0) {
hideWelcome();
planetViewed = 1;
TweenMax.from($('#content'), 0.5, {
css: {
left: '-500px'
},
delay:0.5,
ease: Quad.easeInOut
});
TweenMax.from($('#border'), 0.5, {
css: {
height: '0px'
},
delay: 1,
ease: Quad.easeInOut,
});
info.innerHTML = " <span>Sunny</span> Icosahedron,";
description.innerHTML = "Alive for <span>204895</span> years<br/><br/><div>Click on the other planets to learn more ...<div>";
}
if (planetViewed == 2 || planetViewed==3 || planetViewed==4) {
planetViewed = 1;
TweenMax.from($('#content'), 0.5, {
css: {
left: '-500px'
},
ease: Quad.easeInOut
});
TweenMax.to($('#border'), 0.2, {
css: {
height: '200px'
},delay:1,
ease: Quad.easeInOut,
});
TweenMax.from($('#border'), 0.5, {
css: {
height: '0px'
},
delay: 0.5,
ease: Quad.easeInOut,
});
info.innerHTML = " <span>Sunny</span> Icosahedron,";
description.innerHTML = "Alive for <span>204895</span> years<br/><br/><div>Click on the other planets to learn more ...<div>";
}
}
if (currentcolor == 0x26D7E7) {
if (planetViewed == 1 || planetViewed==3 || planetViewed==4) {
planetViewed = 2;
info.innerHTML = " <span id='couleur'>Blue</span> Icosahedron,";
document.getElementById('couleur').style.color="#26d7e7";
description.innerHTML = "<br/><br/><div>Click on the other planets to learn more ...<div>";
TweenMax.from($('#content'), 0.5, {
css: {
left: '-500px'
},
ease: Quad.easeInOut
});
TweenMax.to($('#border'), 0.2, {
css: {
height: '200px'
},delay:1,
ease: Quad.easeInOut,
});
TweenMax.from($('#border'), 0.5, {
css: {
height: '0px'
},
delay: 0.5,
ease: Quad.easeInOut,
});
}
}
if (currentcolor == 0xffc12d) {
if (planetViewed == 1 || planetViewed==2 || planetViewed==4) {
planetViewed = 3;
info.innerHTML = '<span id="couleur">Yellow</span> Icosahedron';
description.innerHTML = "<br/><br/><div>Click on the other planets to learn more ...<div>";
document.getElementById('couleur').style.color="#ffc12d";
TweenMax.from($('#content'), 0.5, {
css: {
left: '-500px'
},
ease: Quad.easeInOut
});
TweenMax.to($('#border'), 0.2, {
css: {
height: '200px'
},delay:1,
ease: Quad.easeInOut,
});
TweenMax.from($('#border'), 0.5, {
css: {
height: '0px'
},
delay: 0.5,
ease: Quad.easeInOut,
});
}
}
if (currentcolor == 0xacacac) {
if (planetViewed == 1 || planetViewed==2 || planetViewed==3) {
planetViewed = 4;
info.innerHTML = '<span id="couleur">Grey</span> Icosahedron';
document.getElementById('couleur').style.color="#acacac";
description.innerHTML = "<br/><br/><div>Click on the other planets to learn more ...<div>";
TweenMax.from($('#content'), 0.5, {
css: {
left: '-500px'
},
ease: Quad.easeInOut
});
TweenMax.to($('#border'), 0.1, {
css: {
height: '200px'
},delay:1,
ease: Quad.easeInOut,
});
TweenMax.from($('#border'), 0.5, {
css: {
height: '0px'
},
delay: 0.5,
ease: Quad.easeInOut,
});
}
}
break;
}
}
console.log('Down');
}
document.addEventListener('mousedown', onMouseDown, false);
function animate() {
;
var timer = 0.00001 * Date.now();
for (var i = 0, il = sphereTab.length; i < il; i++) {
var sfere = sphereTab[i];
sfere.position.x = 400 * Math.sin(timer + i);
// sfere.position.z= 500 * Math.sin( timer + i * 1.1 );
sfere.position.z = 400 * Math.sin(timer + i * 1.1);
}
sun.rotation.x += 0.008;
sun2.rotation.y += 0.008;
sun3.rotation.z += 0.008;
earthPivot.rotation.z += 0.006;
earthPivot2.rotation.z += 0.01;
earthPivot3.rotation.y += 0.007;
earthPivot4.rotation.z+=0.008;
requestAnimationFrame(animate);
controls.update();
render();
}
function render() {
// }
renderer.render(scene, camera)
}
Raw
scripts
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/84/three.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/stats.js/r16/Stats.min.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/264161/OrbitControls.js"></script>
Raw
style.less
a{position:absolute;
text-decoration:none;
color:white;
font-weight:100;
left:50px;
bottom:-20px;
transition : 0.3s;
}
a:hover{
font-weight:300;
}
body {
color: #000;
font-family:Raleway;
font-weight: 100;
font-size:15px;
font-weight: bold;
height:100%;
width:100%;
margin:0;
overflow:hidden;
}
#content {
position: absolute;
}
body{
#container{
img{
position: absolute;
left: 50px;
z-index: 2;
width:2px;
height:0px;
top:50%;
margin-top:-100px;
}
#welcome{
opacity: 0;
width:900px;
padding-left: 20px;
color:white;
font-size:18pt;
position :absolute;
top:50%;
margin-top:-35px;
left:50px;
#lastSentence{
font-family: 'Raleway';
margin: 0;
font-weight: 400;
font-size: 14pt;
}
#firstSentence{
font-weight: 500;
font-size: 22pt;
margin: 0;
margin-bottom: 8px;
margin-top:2px;
}
#universe{
text-transform: uppercase;
font-family: 'Raleway';
font-weight: 800;
}
}
#content{
top:50%;
margin-top:-70px;
width:500px;
left : 70px;
h2{
margin:0;
}
span{
font-family: Raleway;
font-weight:600;
}
#contentTitle{
font-family: Raleway;
color:white;
opacity: 1;
font-weight: 200;
letter-spacing: 1.5px;
font-size: 26pt;
span{
color:#F66120;
}
div{
font-size: 12pt;
display: inline-block;
}
}
#subtitle{
letter-spacing: 1.5px;
margin:0;
font-size: 16pt;
font-family: Raleway;
font-weight:200;
color:white;
}
#description{
color:white;
letter-spacing: 1.5px;
font-family: Raleway;
font-weight: 200;
font-size: 16pt;
span{
color:#F66120;
}
div{
color:#acacac;
font-size: 10pt;
}
a{
color:white;
line-height: 10px;
transition: 0.3s;
}
a:hover{
line-height: 11px;
font-weight: 500;
}
}
}
}
}
Raw
three-js-interactive-solar-system.markdown
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment