From f40f5d83e75f16c81bd7f7f0c5936d42cb9ccd5b Mon Sep 17 00:00:00 2001
From: Naomi Ehimen Adebo-young <70056240+Naomi-star@users.noreply.github.com>
Date: Thu, 19 Sep 2024 23:24:53 -0400
Subject: [PATCH 1/5] asst2
---
.vscode/settings.json | 3 +
02/index.html | 130 ++++++++++++++++++++++++++++++++++++++++++
2 files changed, 133 insertions(+)
create mode 100644 .vscode/settings.json
diff --git a/.vscode/settings.json b/.vscode/settings.json
new file mode 100644
index 00000000..6f3a2913
--- /dev/null
+++ b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+ "liveServer.settings.port": 5501
+}
\ No newline at end of file
diff --git a/02/index.html b/02/index.html
index 7274c2b5..0618e72d 100644
--- a/02/index.html
+++ b/02/index.html
@@ -1,5 +1,6 @@
+
CS460.org Assignment 2
+
+
+
+
+
From 3dd902cdd11e51d9a40772ba31567f6f1003dee6 Mon Sep 17 00:00:00 2001
From: Naomi Ehimen Adebo-young <70056240+Naomi-star@users.noreply.github.com>
Date: Tue, 1 Oct 2024 22:59:55 -0400
Subject: [PATCH 2/5] assignment_3
---
.hintrc | 25 +++++++++++
03/index.html | 121 +++++++++++++++++++++++++++++++++++++++++++++++++-
2 files changed, 144 insertions(+), 2 deletions(-)
create mode 100644 .hintrc
diff --git a/.hintrc b/.hintrc
new file mode 100644
index 00000000..ec1d9a47
--- /dev/null
+++ 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"
+ ]
+}
\ No newline at end of file
diff --git a/03/index.html b/03/index.html
index 8693c011..95fd34d5 100644
--- 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 } );
+ 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 } );
+ 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 );
};