Update index.html

harrycollin · Jun 11, 2021 · 50e4aa5 · 50e4aa5
1 parent f7efeb3
commit 50e4aa5
Showing 1 changed file with 79 additions and 37 deletions.
diff --git a/index.html b/index.html
@@ -10,25 +10,76 @@
 	<body>
 		<script src="js/three.js"></script>
 		<script type="module">
-			const scene = new THREE.Scene();
-			const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
 
-            // const cubeGeometry = new THREE.BoxGeometry();
-            // const cubeMaterial = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
-            // const cube = new THREE.Mesh( cubeGeometry, cubeMaterial );
-            // scene.add( cube );
+            import { TrackballControls } from 'https://cdn.skypack.dev/three@0.129/examples/jsm/controls/TrackballControls.js';
 
-            camera.position.z = 30;
+			const scene = new THREE.Scene();
+            const camera = new THREE.OrthographicCamera(
+                window.innerWidth / -2,
+                window.innerWidth / 2,
+                window.innerHeight / 2,
+                window.innerHeight / -2,
+                -1000,
+                1000
+            )
+            camera.zoom = 20;
+            camera.updateProjectionMatrix();            
 
 			const renderer = new THREE.WebGLRenderer();
 			renderer.setSize( window.innerWidth, window.innerHeight );
 			document.body.appendChild( renderer.domElement );
 
             const material = new THREE.PointsMaterial( { 
                 color: 'white',
-                size: 0.01 
+                size: 0.5,
+                sizeAttenuation: false
             });
 
+            //Controls
+            const controls = new TrackballControls( camera, renderer.domElement );
+
+            controls.rotateSpeed = 1.0;
+            controls.zoomSpeed = 1.2;
+            controls.panSpeed = 0.8;
+
+            controls.noZoom = true;
+            controls.noPan = false;
+
+            controls.staticMoving = true;
+            controls.dynamicDampingFactor = 0.3;
+
+            controls.keys = [65, 83, 68];
+
+            const zoomDirection = new THREE.Vector3();
+            const minZoom = 1;
+            const maxZoom = 1000000;
+
+            function mousewheel(event) {
+                event.preventDefault();
+
+                const amount = event.deltaY / 100;
+                const zoom = camera.zoom - amount;
+
+                if (zoom >= minZoom && zoom <= maxZoom) {
+                    const size = new THREE.Vector2();
+                    renderer.getSize(size);
+
+                    // zoom in to cursor, but zoom out to center of page
+                    const mX = amount > 0 ? 0 : (event.clientX / size.x) * 2 - 1;
+                    const mY = amount > 0 ? 0 : -(event.clientY / size.y) * 2 + 1;
+                    zoomDirection.set(mX, mY, 0.0000001)
+                        .unproject(camera)
+                        .sub(camera.position)
+                        .multiplyScalar(amount / zoom);
+
+                    camera.position.subVectors(camera.position, zoomDirection);
+                    controls.target.subVectors(controls.target, zoomDirection);
+                    camera.zoom = zoom;
+                    camera.updateProjectionMatrix();
+                }
+            }
+            renderer.domElement.addEventListener('wheel', mousewheel, false);
+
             // Variables
             const geometry = new THREE.BufferGeometry();
             const vertices = []
@@ -49,12 +100,11 @@
 				renderer.render( scene, camera );
 			};
 
-            // Function to generate random number 
-            function randomNumber(min, max) { 
+            const randomNumber = (min, max) => { 
                 return Math.random() * (max - min) + min;
             } 
 
-            function getPointInBetweenByPerc(pointA, pointB, percentage) {
+            const getPointInBetweenByPerc = (pointA, pointB, percentage) => {
                 var dir = pointB.clone().sub(pointA);
                 var len = dir.length();
                 dir = dir.normalize().multiplyScalar(len*percentage);
@@ -66,50 +116,42 @@
             }
 
             // Plot original points
-            const r = 20
-
-            const c = new THREE.Vector3(0.0, 1.0 * r);
-            const b = new THREE.Vector3(0.866, -0.5).multiplyScalar(r);
-            const a = new THREE.Vector3(-0.866, -0.5).multiplyScalar(r);
-
-            createPoint(a.x, a.y);
-            createPoint(b.x, b.y);
-            createPoint(c.x, c.y);
-            updateGeometry();
+            const points = [];
+            const radius = 20;
+            const segments = 3;
+            const thetaStart = Math.PI / 2;
+            const thetaLength = Math.PI * 2;
+
+            for(let i = 0; i <= segments; i++){
+                const segment = thetaStart + i / segments * thetaLength;
+                const x = Math.cos(segment) * radius;
+                const y = Math.sin(segment) * radius;
+                points.push(new THREE.Vector3(x, y, 0))
+                createPoint(x, y);
+            }
 
+            updateGeometry();
             scene.add(particles);
 			animate();
 
             // Can be anything
             const startPoint = new THREE.Vector3(233983, 4324234);
             let prevPoint = startPoint;
 
-            for(let i = 0; i < 1000000; i++){
+            for(let i = 0; i < 5000000; i++){
 
-                if(i % 1000 == 0){
+                if(i % 100000 == 0){
                     await sleep(10);
                     updateGeometry();
                 }
 
-                const roll = Math.floor(randomNumber(1, 6));
-
-                let x;
-
-                if(roll <= 2){
-                    x = a;
-                }else if(roll <= 4){
-                    x = b;
-                }else if(roll <= 6){
-                    x = c;
-                }
-
-                const p = getPointInBetweenByPerc(x, prevPoint, 0.5);
+                const roll = Math.floor(randomNumber(0, points.length - 1));
+                const p = getPointInBetweenByPerc(points[roll], prevPoint, 0.5);
                 prevPoint = p;
                 createPoint(p.x, p.y);
             }
 
             updateGeometry();
-
 		</script>
 	</body>
 </html>