This website is live at https://callacorder.com/nmix7110/Week16/final/index.html
The code below is the Javascript responsible for this website. It is split into two files: main.js and planet.js
<![CDATA[
/*main.js*/
import * as THREE from 'https://unpkg.com/three@0.126.1/build/three.module.js';
import {OrbitControls} from './node_modules/three/examples/jsm/controls/OrbitControls.js'
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth/ window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer({
canvas: document.querySelector('#bg')
});
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
camera.position.setZ(30);
camera.position.setX(60);
camera.position.setY(60);
renderer.render(scene, camera);
const geometry = new THREE.TorusGeometry(5, 0.5, 2, 100);
const material = new THREE.MeshStandardMaterial({color:0xfc8474});
const torus = new THREE.Mesh(geometry, material);
torus.rotation.x = 90;
scene.add(torus);
const pointLight = new THREE.PointLight(0xffffff);
pointLight.position.set(20,20,20);
const ambientLight = new THREE.AmbientLight(0xffffff);
scene.add(pointLight, ambientLight);
const controls = new OrbitControls(camera, renderer.domElement)
function addStar() {
const geometry = new THREE.SphereGeometry(0.25, 24, 24);
const material = new THREE.MeshStandardMaterial({color:0xffffff});
const star = new THREE.Mesh(geometry, material);
const [x,y,z] = Array(3).fill().map(() => THREE.MathUtils.randFloatSpread(500, 100, 1000));
star.position.set(x, y, z);
scene.add(star)
}
Array(200).fill().forEach(addStar)
const spaceTexture = new THREE.TextureLoader().load('space.jpg');
scene.background = spaceTexture;
const planetTexture = new THREE.TextureLoader().load('planet.jpg');
const normalTexture = new THREE.TextureLoader().load('normal.jpg');
const planet = new THREE.Mesh(
new THREE.SphereGeometry(3,32,32),
new THREE.MeshStandardMaterial( {map: planetTexture, normalMap: normalTexture})
);
scene.add(planet);
const planet2Texture = new THREE.TextureLoader().load('planet2.jpg');
const planet2 = new THREE.Mesh(
new THREE.SphereGeometry(5, 60, 60),
new THREE.MeshStandardMaterial({map: planet2Texture, normalMap: normalTexture})
);
scene.add(planet2);
const planet3Texture = new THREE.TextureLoader().load('planet3.jpg');
const planet3 = new THREE.Mesh(
new THREE.SphereGeometry(7, 40, 40),
new THREE.MeshStandardMaterial( {map: planet3Texture, normalMap: normalTexture})
);
planet3.position.x = -500;
scene.add(planet3);
const planet4Texture = new THREE.TextureLoader().load('planet4.jpg');
const planet4 = new THREE.Mesh(
new THREE.SphereGeometry(10, 40, 40),
new THREE.MeshStandardMaterial( {map: planet4Texture, normalMap: normalTexture})
);
planet4.position.y = -50;
planet4.position.x = 50;
scene.add(planet4);
const planet5Texture = new THREE.TextureLoader().load('planet5.jpg');
const planet5 = new THREE.Mesh(
new THREE.SphereGeometry(12, 40, 40),
new THREE.MeshStandardMaterial( {map: planet5Texture, normalMap: normalTexture})
);
planet5.position.y = 100;
planet5.position.z = -50;
scene.add(planet5);
const planet6Texture = new THREE.TextureLoader().load('planet6.jpg');
const planet6 = new THREE.Mesh(
new THREE.SphereGeometry(6, 40, 40),
new THREE.MeshStandardMaterial( {map: planet6Texture, normalMap: normalTexture})
);
planet6.position.y = -100;
planet6.position.z = 50;
scene.add(planet6);
const planet7Texture = new THREE.TextureLoader().load('planet7.jpg');
const planet7 = new THREE.Mesh(
new THREE.SphereGeometry(4, 40, 40),
new THREE.MeshStandardMaterial( {map: planet7Texture, normalMap: normalTexture})
);
planet7.position.y = 50;
planet7.position.z = 50;
scene.add(planet7);
const sunTexture = new THREE.TextureLoader().load('sun.jpg');
const sun = new THREE.Mesh(
new THREE.SphereGeometry(32,32,32),
new THREE.MeshBasicMaterial({map:sunTexture})
);
scene.add(sun);
function moveCamera(){
const t = document.body.getBoundingClientRect().top;
planet.rotation.x += 0.05;
planet.rotation.y += 0.075;
planet.rotation.z += 0.05;
camera.position.z = t * -0.1;
camera.position.x = t * -0.002;
camera.position.y = t * -0.002;
}
document.body.onscroll = moveCamera;
var s = 0;
function animate() {
requestAnimationFrame(animate);
s += 0.01;
torus.rotation.y += 0.001;
torus.rotation.z += 0.006;
planet.position.x = 100*Math.cos(s);
planet.position.z = 100*Math.sin(s) + 50;
torus.position.x = 100*Math.cos(s);
torus.position.z = 100*Math.sin(s) + 50;
planet2.position.x = 100*Math.cos((1.5 *s)) ;
planet2.position.z = 200*Math.sin((1.5*s));
planet3.position.x = (20 + 200*Math.cos(0.75*s)) % 360;
planet3.position.z = 150*Math.sin(.75*s) + 70;
planet4.position.x = 160*Math.cos(1.3*s);
planet4.position.z = 140*Math.sin(1.3*s);
planet5.position.x = 300*Math.cos(.6*s);
planet5.position.z = 250*Math.sin(.6*s);
planet6.position.x = 75*Math.cos(.95*s);
planet6.position.z = 150*Math.sin(.95*s);
planet7.position.x = 130*Math.cos(1.6*s);
planet7.position.z = 120*Math.sin(1.6*s);
sun.rotation.x += 0.0007;
sun.rotation.y += 0.001;
sun.rotation.z += 0.003;
controls.update();
renderer.render(scene, camera)
}
animate();
/*Planet.js*/
import * as THREE from 'https://unpkg.com/three@0.126.1/build/three.module.js';
import {OrbitControls} from './node_modules/three/examples/jsm/controls/OrbitControls.js'
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(55, window.innerWidth/window.innerHeight, 45, 30000);
camera.position.set(-900, -200, -900);
const renderer = new THREE.WebGLRenderer({
canvas: document.querySelector('#planet')
});
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
const controls = new OrbitControls(camera, renderer.domElement)
controls.addEventListener('change', renderer);
controls.minDistance = 500;
controls.maxDistance = 1500;
let materialArray1 = [];
var texture_ft = new THREE.TextureLoader().load('penguins/trouble_ft.jpg');
var texture_bk = new THREE.TextureLoader().load('penguins/trouble_bk.jpg');
var texture_up = new THREE.TextureLoader().load('penguins/trouble_up.jpg');
var texture_dn = new THREE.TextureLoader().load('penguins/trouble_dn.jpg');
var texture_rt = new THREE.TextureLoader().load('penguins/trouble_rt.jpg');
var texture_lf = new THREE.TextureLoader().load('penguins/trouble_lf.jpg');
materialArray1.push(new THREE.MeshBasicMaterial({map: texture_ft}));
materialArray1.push(new THREE.MeshBasicMaterial({map: texture_bk}));
materialArray1.push(new THREE.MeshBasicMaterial({map: texture_up}));
materialArray1.push(new THREE.MeshBasicMaterial({map: texture_dn}));
materialArray1.push(new THREE.MeshBasicMaterial({map: texture_rt}));
materialArray1.push(new THREE.MeshBasicMaterial({map: texture_lf}));
for( let i = 0; i < 6; i++) {
materialArray1[i].side = THREE.BackSide;
}
let materialArray2 = [];
var texture_ft = new THREE.TextureLoader().load('penguins/desertdawn_ft.jpg');
var texture_bk = new THREE.TextureLoader().load('penguins/desertdawn_bk.jpg');
var texture_up = new THREE.TextureLoader().load('penguins/desertdawn_up.jpg');
var texture_dn = new THREE.TextureLoader().load('penguins/desertdawn_dn.jpg');
var texture_rt = new THREE.TextureLoader().load('penguins/desertdawn_rt.jpg');
var texture_lf = new THREE.TextureLoader().load('penguins/desertdawn_lf.jpg');
materialArray2.push(new THREE.MeshBasicMaterial({map: texture_ft}));
materialArray2.push(new THREE.MeshBasicMaterial({map: texture_bk}));
materialArray2.push(new THREE.MeshBasicMaterial({map: texture_up}));
materialArray2.push(new THREE.MeshBasicMaterial({map: texture_dn}));
materialArray2.push(new THREE.MeshBasicMaterial({map: texture_rt}));
materialArray2.push(new THREE.MeshBasicMaterial({map: texture_lf}));
for( let i = 0; i < 6; i++) {
materialArray2[i].side = THREE.BackSide;
}
let materialArray3 = [];
var texture_ft = new THREE.TextureLoader().load('penguins/overcast_ft.jpg');
var texture_bk = new THREE.TextureLoader().load('penguins/overcast_bk.jpg');
var texture_up = new THREE.TextureLoader().load('penguins/overcast_up.jpg');
var texture_dn = new THREE.TextureLoader().load('penguins/overcast_dn.jpg');
var texture_rt = new THREE.TextureLoader().load('penguins/overcast_rt.jpg');
var texture_lf = new THREE.TextureLoader().load('penguins/overcast_lf.jpg');
materialArray3.push(new THREE.MeshBasicMaterial({map: texture_ft}));
materialArray3.push(new THREE.MeshBasicMaterial({map: texture_bk}));
materialArray3.push(new THREE.MeshBasicMaterial({map: texture_up}));
materialArray3.push(new THREE.MeshBasicMaterial({map: texture_dn}));
materialArray3.push(new THREE.MeshBasicMaterial({map: texture_rt}));
materialArray3.push(new THREE.MeshBasicMaterial({map: texture_lf}));
for( let i = 0; i < 6; i++) {
materialArray3[i].side = THREE.BackSide;
}
let materialArray4 = [];
var texture_ft = new THREE.TextureLoader().load('penguins/haze_ft.jpg');
var texture_bk = new THREE.TextureLoader().load('penguins/haze_bk.jpg');
var texture_up = new THREE.TextureLoader().load('penguins/haze_up.jpg');
var texture_dn = new THREE.TextureLoader().load('penguins/haze_dn.jpg');
var texture_rt = new THREE.TextureLoader().load('penguins/haze_rt.jpg');
var texture_lf = new THREE.TextureLoader().load('penguins/haze_lf.jpg');
materialArray4.push(new THREE.MeshBasicMaterial({map: texture_ft}));
materialArray4.push(new THREE.MeshBasicMaterial({map: texture_bk}));
materialArray4.push(new THREE.MeshBasicMaterial({map: texture_up}));
materialArray4.push(new THREE.MeshBasicMaterial({map: texture_dn}));
materialArray4.push(new THREE.MeshBasicMaterial({map: texture_rt}));
materialArray4.push(new THREE.MeshBasicMaterial({map: texture_lf}));
for( let i = 0; i < 6; i++) {
materialArray4[i].side = THREE.BackSide;
}
let materialArray5 = [];
var texture_ft = new THREE.TextureLoader().load('penguins/tears_ft.jpg');
var texture_bk = new THREE.TextureLoader().load('penguins/tears_bk.jpg');
var texture_up = new THREE.TextureLoader().load('penguins/tears_up.jpg');
var texture_dn = new THREE.TextureLoader().load('penguins/tears_dn.jpg');
var texture_rt = new THREE.TextureLoader().load('penguins/tears_rt.jpg');
var texture_lf = new THREE.TextureLoader().load('penguins/tears_lf.jpg');
materialArray5.push(new THREE.MeshBasicMaterial({map: texture_ft}));
materialArray5.push(new THREE.MeshBasicMaterial({map: texture_bk}));
materialArray5.push(new THREE.MeshBasicMaterial({map: texture_up}));
materialArray5.push(new THREE.MeshBasicMaterial({map: texture_dn}));
materialArray5.push(new THREE.MeshBasicMaterial({map: texture_rt}));
materialArray5.push(new THREE.MeshBasicMaterial({map: texture_lf}));
for( let i = 0; i < 6; i++) {
materialArray5[i].side = THREE.BackSide;
}
let materialArray6 = [];
var texture_ft = new THREE.TextureLoader().load('penguins/tropic_ft.jpg');
var texture_bk = new THREE.TextureLoader().load('penguins/tropic_bk.jpg');
var texture_up = new THREE.TextureLoader().load('penguins/tropic_up.jpg');
var texture_dn = new THREE.TextureLoader().load('penguins/tropic_dn.jpg');
var texture_rt = new THREE.TextureLoader().load('penguins/tropic_rt.jpg');
var texture_lf = new THREE.TextureLoader().load('penguins/tropic_lf.jpg');
materialArray6.push(new THREE.MeshBasicMaterial({map: texture_ft}));
materialArray6.push(new THREE.MeshBasicMaterial({map: texture_bk}));
materialArray6.push(new THREE.MeshBasicMaterial({map: texture_up}));
materialArray6.push(new THREE.MeshBasicMaterial({map: texture_dn}));
materialArray6.push(new THREE.MeshBasicMaterial({map: texture_rt}));
materialArray6.push(new THREE.MeshBasicMaterial({map: texture_lf}));
for( let i = 0; i < 6; i++) {
materialArray6[i].side = THREE.BackSide;
}
let materialArray7 = [];
var texture_ft = new THREE.TextureLoader().load('penguins/trance_ft.jpg');
var texture_bk = new THREE.TextureLoader().load('penguins/trance_bk.jpg');
var texture_up = new THREE.TextureLoader().load('penguins/trance_up.jpg');
var texture_dn = new THREE.TextureLoader().load('penguins/trance_dn.jpg');
var texture_rt = new THREE.TextureLoader().load('penguins/trance_rt.jpg');
var texture_lf = new THREE.TextureLoader().load('penguins/trance_lf.jpg');
materialArray7.push(new THREE.MeshBasicMaterial({map: texture_ft}));
materialArray7.push(new THREE.MeshBasicMaterial({map: texture_bk}));
materialArray7.push(new THREE.MeshBasicMaterial({map: texture_up}));
materialArray7.push(new THREE.MeshBasicMaterial({map: texture_dn}));
materialArray7.push(new THREE.MeshBasicMaterial({map: texture_rt}));
materialArray7.push(new THREE.MeshBasicMaterial({map: texture_lf}));
for( let i = 0; i < 6; i++) {
materialArray7[i].side = THREE.BackSide;
}
var materialArray = [];
var planet = Math.floor(Math.random() * 7);
console.log(planet);
switch(planet) {
case 0:
materialArray = materialArray1;
break;
case 1:
materialArray = materialArray2;
break;
case 2:
materialArray = materialArray3;
break;
case 3:
materialArray = materialArray4;
break;
case 4:
materialArray = materialArray5;
break;
case 5:
materialArray = materialArray6;
break;
case 6:
materialArray = materialArray7;
default:
materialArray = materialArray1;
}
let skyboxGeo = new THREE.BoxGeometry(10000,10000,10000);
let skybox = new THREE.Mesh(skyboxGeo, materialArray);
scene.add(skybox);
animate();
document.getElementById('button').onclick = randomPlanet;
function animate() {
requestAnimationFrame(animate);
renderer.render(scene, camera);
}
function randomPlanet() {
scene.remove(skybox)
var planet = Math.floor(Math.random() * 7);
console.log(planet);
switch(planet) {
case 0:
materialArray = materialArray1;
break;
case 1:
materialArray = materialArray2;
break;
case 2:
materialArray = materialArray3;
break;
case 3:
materialArray = materialArray4;
break;
case 4:
materialArray = materialArray5;
break;
case 5:
materialArray = materialArray6;
break;
case 6:
materialArray = materialArray7;
break;
default:
materialArray = materialArray1;
}
let skyboxGeo = new THREE.BoxGeometry(10000,10000,10000);
skybox = new THREE.Mesh(skyboxGeo, materialArray);
scene.add(skybox);
}
]]></plaintext></body></div>