Viewing Program

Program Data

Program thumbnail for "{props.program.title}"

Title	Terratrice Homepage WIP
ID	4758481897439232
Created	9 months ago, 1711066092189
Updated	9 months ago, 1711388001119
Code	<!DOCTYPE html> <!-- --> <html id="html"> <head> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Workbench"> <meta charset="utf-8"> <title>Terratrice Homepage WIP</title> <style> body { margin: 0; color: white; background: black; overflow-x: hidden; } canvas { position: absolute; top: 0; left: 0; z-index: -1; } #title-text { text-align: center; margin-top: 375px; position: relative; font-family: "Workbench", monospace; font-size: 64px; } </style> </head> <body> <div id="main-header"> <div id="title-text">Team Terratrice</div> </div> <div class="page"> <div class="paragraph"> <h1>test</h1><h1>test</h1><h1>test</h1><h1>test</h1> <h1>test</h1><h1>test</h1><h1>test</h1><h1>test</h1> <h1>test</h1><h1>test</h1><h1>test</h1><h1>test</h1> <h1>test</h1><h1>test</h1><h1>test</h1><h1>test</h1> </div> </div> <div id="footer"> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r124/three.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/three-addons@1.2.0/build/three-addons.min.js"></script> <script type> { const scene = new THREE.Scene(); const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 ); const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true, }); renderer.setPixelRatio(window.devicePixelRatio); renderer.setSize( window.innerWidth, window.innerHeight ); document.body.appendChild( renderer.domElement ); const mainLight = new THREE.DirectionalLight(0xffffff, 2); mainLight.position.set(0, 200, -120); const imageLoader = new THREE.TextureLoader(); const planetSurface = new THREE.IcosahedronGeometry( 2, 12 ); const surfaceMat = new THREE.MeshStandardMaterial( { map: imageLoader.load("https://upload.wikimedia.org/wikipedia/commons/4/40/Solarsystemscope_texture_2k_venus_surface.jpg"), } ); const planet = new THREE.Mesh( planetSurface, surfaceMat ); const planetAtmosphere = new THREE.IcosahedronGeometry( 2.05, 12 ); const atmosphereMat = new THREE.MeshStandardMaterial( { map: imageLoader.load("https://upload.wikimedia.org/wikipedia/commons/6/63/Solarsystemscope_texture_2k_venus_atmosphere.jpg"), opacity: 0.5, transparent: true, } ); const atmosphere = new THREE.Mesh( planetAtmosphere, atmosphereMat ); // starfield function generatePos(particleCount) { const arr = new Float32Array(particleCount * 3); for (let i = 0; i < particleCount; i++) { arr[i] = (Math.random() - 0.5) * 20; } return arr; }; const stars = new THREE.BufferGeometry(); stars.setAttribute( "position", new THREE.BufferAttribute(generatePos(500), 3) ); const starMat = new THREE.PointsMaterial({ size: 0.05 }); const starField = new THREE.Points(stars, starMat); // final setup planet.position.y = -1.5; atmosphere.position.y = -1.5; scene.add(mainLight); scene.add(planet ); scene.add(atmosphere); scene.add(starField); camera.position.z = 5; var page = document.getElementById("html"); var titleText = document.getElementById("title-text"); var title = "Team Terratrice"; var titleIndex = 0; var titleInterval = window.setInterval(function(){ titleText.textContent = title.substr(0, ~~titleIndex) + (titleIndex%2 === 1 ? " ":"_"); titleIndex += 1; if(titleIndex > title.length){ window.clearInterval(titleInterval); } }, 1000/10); function animate() { requestAnimationFrame( animate ); var scrollPos = page.scrollTop; planet.rotation.x = scrollPos / 1000; planet.rotation.y += 0.0005; starField.rotation.y += 0.0005; starField.rotation.x = scrollPos / 500; //planet.position.y = (-scrollPos / 500) - 1.5; //atmosphere.position.y = (-scrollPos / 500) - 1.5; mainLight.position.z = -150 + scrollPos/2; renderer.render( scene, camera ); } animate(); } </script> <script></script> </body> </html>
Folds
Fork	false
Key	ag5zfmtoYW4tYWNhZGVteXIXCxIKU2NyYXRjaHBhZBiAgKu5hvq5CAw
Votes	3
Spin-Offs	0
Type	WEBPAGE
Width	400
Height	600
User Flagged	false
Origin Scratchpad	null
Hidden From Hotlist	false
Restricted Posting	true
By Child	false
Author Nick	WalkWorthy
Author Name	PowerCoder
Author ID	kaid_572162445297461577426497
Author Profile Access	COACH

Archive Data

Added	9 months ago, 1711388020700
Updated	9 months ago, 1711388020700
Source Deleted	unknown