added a new scene

Cresythe · Jan 3, 2024 · d9d13d8 · d9d13d8
1 parent 7a950ea
commit d9d13d8
Show file tree

Hide file tree

Showing 2 changed files with 85 additions and 1 deletion.
diff --git a/fogTesting.html b/fogTesting.html
@@ -0,0 +1,83 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta charset="utf-8">
+		<title>Lights testing three.js app</title>
+		<style>
+			body { margin: 0; }
+		</style>
+	</head>
+	<body>
+		<script async src="https://unpkg.com/[email protected]/dist/es-module-shims.js"></script>
+
+		<script type="importmap">
+  		{
+    		"imports": {
+      			"three": "https://unpkg.com/[email protected]/build/three.module.js",
+      			"three/addons/": "https://unpkg.com/[email protected]/examples/jsm/"
+    		}
+ 		}
+		</script>
+
+
+		<script type="module">
+			import * as THREE from 'three';
+            import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
+
+            const scene = new THREE.Scene(); 
+            //for foreground fog
+            scene.fog = new THREE.Fog(0xFB6522, 10, 15);
+            scene.fog = true;  
+            const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
+            camera.position.set( -13, 0, 100); 
+            //renderer for the scene
+            const renderer = new THREE.WebGLRenderer();
+			renderer.shadowMap.enabled = true;
+			renderer.shadowMap.type = THREE.PCFSoftShadowMap;
+			renderer.outputEncoding = THREE.sRGBEncoding;
+
+			renderer.setSize( window.innerWidth, window.innerHeight); 
+            document.body.appendChild( renderer.domElement); 
+
+            //controls for camera
+            const controls = new OrbitControls(camera, renderer.domElement); 
+            controls.minDistance = 20; 
+			controls.maxDistance = 300; 
+			controls.MaxPolarAngle = Math.PI/2; 
+			controls.target.set(0, 0, 0); 
+			controls.update(); 
+
+            //Ambient Light
+			let ambientLight = new THREE.AmbientLight(0x404040); 
+			ambientLight.intensity = .05; 
+			ambientLight.isAmbientLight = true; 
+
+			scene.add(ambientLight);
+
+            //Plane
+            let PlaneGeo = new THREE.PlaneGeometry(2000,2000);
+
+
+			window.addEventListener( 'resize', onWindowResize );
+
+			function onWindowResize() {
+
+				camera.aspect = window.innerWidth / window.innerHeight;
+				camera.updateProjectionMatrix();
+
+				renderer.setSize( window.innerWidth, window.innerHeight );
+
+			}
+
+			function animate() {
+				requestAnimationFrame(animate);
+				const time = performance.now() / 3000;
+
+
+
+				renderer.render(scene, camera);
+			}
+			animate();
+		</script>
+	</body>
+</html>
diff --git a/index.html b/index.html
@@ -16,11 +16,12 @@
 
 <body>
     <header>
-        <h1>Welcome to Statistical Death.</h1>
+        <h1>Welcome to Something.Nope</h1>
     </header>
     <ul>
         <li><a href="testing.html">Testing page</a></li>
         <li><a href="plane_testing_lighting.html">Lights and camera testing</a></li>
+        <li><a href="fogTesting.html">Fog Testing with Lights</a></li> 
     </ul>
 </body>
 </html>