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

/*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); }