bostongfx · Naomi-star · Sep 20, 2024 · Sep 30, 2024 · Oct 2, 2024 · Oct 2, 2024
diff --git a/.hintrc b/.hintrc
@@ -0,0 +1,25 @@
+{
+  "extends": [
+    "development"
+  ],
+  "hints": {
+    "axe/text-alternatives": [
+      "default",
+      {
+        "document-title": "off"
+      }
+    ],
+    "axe/language": [
+      "default",
+      {
+        "html-has-lang": "off"
+      }
+    ],
+    "meta-viewport": "off"
+  },
+  "browserslist": [
+    "defaults",
+    "not ie 11",
+    "not ios_saf <= 16.1"
+  ]
+}
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+    "liveServer.settings.port": 5501
+}
diff --git a/02/index.html b/02/index.html
@@ -1,5 +1,6 @@
 <html>
   <head>
+    <script type="text/javascript" src="https://get.goXTK.com/xtk_edge.js"></script>
     <title>CS460.org Assignment 2</title>
     <style>
       body {
@@ -10,7 +11,136 @@
         overflow: hidden !important; 
       }
     </style>
+
+    <script>
+
+        window.onload = function() {
+
+        // create and initialize a 3D renderer
+        r = new X.renderer3D();
+        r.init();
+
+        // create a cube
+        cube = new X.cube();
+
+        // setting the edge length can also be skipped since 20 is the default
+        cube.lengthX = cube.lengthY = cube.lengthZ = 20;
+
+        // can also be skipped since [0,0,0] is the default center
+        cube.center = [0, 0, 0];
+
+        // [1,1,1] (== white) is also the default so this can be skipped aswell
+        cube.color = [1, 0, 0];
+
+        r.add(cube); // add the cube to the renderer
+        r.render(); // ..and render it
+
+        cube2 = new X.cube();
+        cube2.lengthX = cube2.lengthY = cube2.lengthZ = 20;
+        cube2.center = [25, 0, 0];
+        cube2.color = [1, 0, 0];
+        r.add(cube2);
+
+        cube3 = new X.cube();
+        cube3.lengthX = cube3.lengthY = cube3.lengthZ = 20;
+        cube3.center = [50, 0, 0];
+        cube3.color = [1, 0, 0];
+        r.add(cube3);
+
+        cube4 = new X.cube();
+        cube4.lengthX = cube4.lengthY = cube4.lengthZ = 20;
+        cube4.center = [0, 0, 25];
+        cube4.color = [1, 0, 0];
+        r.add(cube4);
+
+        cube5 = new X.cube();
+        cube5.lengthX = cube5.lengthY = cube5.lengthZ = 20;
+        cube5.center = [25, 0, 25];
+        cube5.color = [1, 0, 0];
+        r.add(cube5);
+
+        cube6 = new X.cube();
+        cube6.lengthX = cube6.lengthY = cube6.lengthZ = 20;
+        cube6.center = [50, 0, 25];
+        cube6.color = [1, 0, 0];
+        r.add(cube6);
+
+        cube7 = new X.cube();
+        cube7.lengthX = cube7.lengthY = cube7.lengthZ = 20;
+        cube7.center = [0, 0, -25];
+        cube7.color = [1, 0, 0];
+        r.add(cube7);
+
+        cube8 = new X.cube();
+        cube8.lengthX = cube8.lengthY = cube8.lengthZ = 20;
+        cube8.center = [25, 0, -25];
+        cube8.color = [1, 0, 0];
+        r.add(cube8);
+
+        cube9 = new X.cube();
+        cube9.lengthX = cube9.lengthY = cube9.lengthZ = 20;
+        cube9.center = [50, 0, -25];
+        cube9.color = [1, 0, 0];
+        r.add(cube9);
+
+        cube10 = new X.cube();
+        cube10.lengthX = cube10.lengthY = cube10.lengthZ = 20;
+        cube10.center = [25, 0, 50];
+        cube10.color = [0.6, 0.3, 0];
+        r.add(cube10);
+
+        cube11 = new X.cube();
+        cube11.lengthX = cube11.lengthY = cube11.lengthZ = 20;
+        cube11.center = [0, 0, 75];
+        cube11.color = [0.6, 0.3, 0];
+        r.add(cube11);
+        };
+
+        window.onkeypress = function(e) {
+          var CUBE_SIDELENGTH = 10 , GAP = 2 ;
+          if (e.code == 'KeyD') {
+            cube.transform.translateX(-CUBE_SIDELENGTH - GAP);
+          } else if (e.code == 'KeyA') {
+            cube.transform.translateX(CUBE_SIDELENGTH + GAP);
+          } else if (e.code == 'KeyW') {
+            cube.transform.translateZ(CUBE_SIDELENGTH + GAP);
+          } else if (e.code == 'KeyS') {
+            cube.transform.translateZ(-CUBE_SIDELENGTH - GAP);
+          } else if (e.code == 'KeyQ') {
+            cube.transform.translateY(CUBE_SIDELENGTH + GAP);
+          } else if (e.code == 'KeyE') {
+            cube.transform.translateY(-CUBE_SIDELENGTH - GAP);
+          } else if (e.code == 'Digit1') {
+            cube.color= [1 , 1 , 1];
+          } else if (e.code == 'Digit2') {
+            cube.color= [1 , 0 , 0];
+          } else if (e.code == 'Digit3') {
+            cube.color= [0 , 1 , 0];
+          } else if (e.code == 'Digit4') {
+            cube.color= [0 , 0 , 1];
+          } else if (e.code == 'Digit5') {
+            cube.color= [1 , 1 , 0];
+          } else if (e.code == 'Digit6') {
+            cube.color= [1 , 0 , 1];
+          } else if (e.code == 'Digit7') {
+            cube.color= [0 , 1 , 1];
+          } else if (e.code == 'Digit8') {
+            cube.color= [0 , 0 , 0];
+          } else if (e.code == 'Space') {
+            new_cube = new X.cube();
+            new_cube.color = cube.color;
+            new_cube.transform.matrix = new Float32Array(cube.transform.matrix);
+            new_cube.lengthX = new_cube.lengthY = new_cube.lengthZ = CUBE_SIDELENGTH;
+            r.add(new_cube);
+          }
+        }
+
+
+    </script>
   </head>
   <body>
   </body>
 </html>
+
+
+
diff --git a/03/index.html b/03/index.html
@@ -26,12 +26,128 @@
       import * as THREE from 'three';
       import { OrbitControls } from 'three/addons/controls/OrbitControls.js';      
 
-      var renderer, controls, scene, camera;
+      var renderer, controls, scene, camera, torusKnot_pink, geometry_pink, material_pink, LASTOBJECT = null, DELTA;
 
       window.onload = function() {
 
         // Three.js code goes here
+        scene = new THREE.Scene();
+
+        // setup the camera
+        var fov = 75;
+        var ratio = window.innerWidth / window.innerHeight;
+        var zNear = 1;
+        var zFar = 10000;
+        camera = new THREE.PerspectiveCamera( fov, ratio, zNear, zFar );
+        camera.position.set(0, 0, 100);
+
+        // create renderer and setup the canvas
+        renderer = new THREE.WebGLRenderer({ antialias: true });
+        renderer.setSize( window.innerWidth, window.innerHeight );
+        document.body.appendChild( renderer.domElement );
+
+
+
+        renderer.domElement.onmousedown = function( e ){
+          controls.enabled = false; 
 
+          console.log('Yay! We clicked!');
+
+          var pixel_coords = new THREE.Vector2( e.clientX, e.clientY );
+          console.log('Pixel coords', pixel_coords);
+
+          var vp_coords = new THREE.Vector2( 
+                      ( pixel_coords.x / window.innerWidth ) * 2 - 1,  //X
+                      -( pixel_coords.y / window.innerHeight ) * 2 + 1) // Y
+
+          console.log('Viewport coords', vp_coords);
+
+          var vp_coords_near = new THREE.Vector3( vp_coords.x, vp_coords.y, 0);
+          var raycaster = new THREE.Raycaster();
+          raycaster.setFromCamera(vp_coords_near, camera);
+          var intersects = raycaster.intersectObject(invisible_plane);
+
+          console.log('Ray to Invisible Plane', intersects[0].point);
+
+
+
+          if (!e.shiftKey){
+              return;  // jumps only if shift is pressed
+          }
+
+          if (e.shiftKey){
+            // configure hot pink torusKnot
+            geometry_pink = new THREE.TorusKnotGeometry( 10, 3, 100, 16 ); 
+            material_pink = new THREE.MeshBasicMaterial( { color: 0xFF69B4, wireframe: true  } ); 
+            torusKnot_pink = new THREE.Mesh( geometry_pink, material_pink ); 
+            scene.add( torusKnot_pink );   
+            // place hot pink torusKnots
+            torusKnot_pink.position.set(intersects[0].point.x, intersects[0].point.y, intersects[0].point.z);   
+          }
+
+          };
+
+          renderer.domElement.onmouseup = function( e ){
+            controls.enabled = true;
+          };
+
+          renderer.domElement.onmousemove = function( e ){
+
+
+            LASTOBJECT = torusKnot_pink; // just an idea.... e.onmousedown == true && e.onmouseup == false
+
+            if ( e.onmousedown == true && e.onmouseup == false){
+              DELTA = e.movementY;
+              LASTOBJECT.scale.set(LASTOBJECT.scale.x + DELTA,
+                                   LASTOBJECT.scale.y + DELTA,
+                                   LASTOBJECT.scale.z + DELTA);
+                                   if (LASTOBJECT.scale.x < 0){
+                                      LASTOBJECT.material.color.set({color : 0x7CFC00})
+                                    }
+            }
+            console.log('Are we good?', LASTOBJECT)
+
+
+
+
+
+          }
+
+        // setup lights
+        var ambientLight = new THREE.AmbientLight();
+        scene.add( ambientLight );
+
+        var light = new THREE.DirectionalLight( 0xffffff, 5.0 );
+        light.position.set( 10, 100, 10 );
+        scene.add( light );
+
+        // configure purple torusKnot
+        var geometry = new THREE.TorusKnotGeometry( 10, 3, 100, 16 ); 
+        var material = new THREE.MeshBasicMaterial( { color: 0xAB00FF, wireframe: true } ); 
+        var torusKnot = new THREE.Mesh( geometry, material ); 
+        scene.add( torusKnot ); 
+
+
+        //
+        // The invisible plane
+        //
+        geometry = new THREE.PlaneGeometry( 10000, 10000 );
+        material = new THREE.MeshBasicMaterial( {
+          visible: false
+        });
+
+        var invisible_plane = new THREE.Mesh( geometry, material );
+
+        scene.add( invisible_plane );
+        //
+        //
+        //
+
+
+
+        // interaction
+        controls = new OrbitControls( camera, renderer.domElement );
+
         // call animation/rendering loop
         animate();
 
@@ -42,10 +158,11 @@
         requestAnimationFrame( animate );
 
         // and here..
+        controls.update();
+        renderer.render( scene, camera );
 
       };
     </script>
   </head>
   <body></body>
 </html>
-