Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

assignment 5 #180

Open
wants to merge 11 commits into
base: main
Choose a base branch
from
Open

assignment 5 #180

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
b0d12cb
asst1
Ahmad56342 Sep 11, 2024
8932052
Trigger update
Ahmad56342 Sep 11, 2024
fb9a1a8
Ensure 01 directory and content are up to date
Ahmad56342 Sep 11, 2024
ef23937
Merge remote-tracking branch 'upstream/main'
Ahmad56342 Sep 19, 2024
ddbff2e
asst2
Ahmad56342 Sep 20, 2024
9a15662
Add index.html in the 05 folder
Ahmad56342 Nov 27, 2024
b62e578
Complete Assignment 5: Three.js Stereoscopic Car Models
Ahmad56342 Nov 27, 2024
fd0faa3
Add AR experience with Tinkercad model
Ahmad56342 Nov 27, 2024
27396d1
Update index.html
Ahmad56342 Nov 27, 2024
ef68f4f
Remove Assignment 5 folder to start over
Ahmad56342 Nov 27, 2024
832d3c0
Three.js car
Ahmad56342 Nov 27, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions 01/images/desktop.ini
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
[LocalizedFileNames]
rome_screenshot.jpg=@rome_screenshot,0
Binary file added 01/images/rome_screenshot.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
9 changes: 5 additions & 4 deletions 01/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,16 +48,17 @@ <h1>RO.ME "3 DREAMS OF BLACK"</h1>
<div class='demo'>

<!-- TODO: REPLACE WITH A SCREENSHOT OF RO.ME -->
<img id='screenshot' src='https://placehold.co/300x300'>
<img id='screenshot' src='images/rome_screenshot.jpg'>

<p id='description'>
<!-- TODO: FILL IN YOUR DESCRIPTION -->
RO.ME is a very cool webgl demo!
RO.ME is a very cool webgl demo! The demo allows you to interact with your surroundings and move the camera. Your cursor allows you to change the landscape and also allows you to move the birds.
</p>
<p id='technology'>
Technology: TODO! <!-- TODO: FILL IN THE TECHNOLOGIES USED -->
The technology used in the RO.ME demo are WebGl and Three.js <!-- TODO: FILL IN THE TECHNOLOGIES USED -->
</p>
<p id='comparison'>
Comparison: TODO! <!-- TODO: FILL IN THE COMPARISON -->
This web experience is really cool. <a href='https://www.airforce.com/intothestorm/' target='_blank.'> This is similar to the RO.ME demo because your interaction carries the experience forward but I believe that the interaction in this one is a lot more important and prominent. <!-- TODO: FILL IN THE COMPARISON -->
</p>


Expand Down
94 changes: 94 additions & 0 deletions 02/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,101 @@
overflow: hidden !important;
}
</style>
<script type="text/javascript" src="https://get.goxtk.com/xtk_edge.js"></script>
<script type="text/javascript" src="loader.js"></script>

</head>
<body>
<script>
const CUBE_SIDELENGTH = 10;
const GAP = 0;

const colors = {
'Digit1': [1, 1, 1], // White
'Digit2': [1, 0, 0], // Red
'Digit3': [0, 1, 0], // Green
'Digit4': [0, 0, 1], // Blue
'Digit5': [1, 1, 0], // Yellow
'Digit6': [1, 0.75, 0.8], // Pink
'Digit7': [0, 1, 1], // Cyan
'Digit0': [0, 0, 0] // Black
};

var renderer;
var c;
var r;
var rotateCamera = false;

window.onload = function() {
renderer = new X.renderer3D();
renderer.container = document.body;
renderer.init();

r = renderer;

c = new X.cube();
renderer.add(c);

renderer.render();

r.onRender = function() {
if (rotateCamera) {
r.camera.rotate([1, 0]);
}
};

};

window.onkeypress = function(e) {
if (!c) return;

// Movement handling based on key pressed
if (e.code == 'KeyD') {
c.transform.translateX(CUBE_SIDELENGTH + GAP); //right
} else if (e.code == 'KeyA') {
c.transform.translateX(-CUBE_SIDELENGTH - GAP); //left
} else if (e.code == 'KeyW') {
c.transform.translateZ(CUBE_SIDELENGTH + GAP); //up
} else if (e.code == 'KeyS') {
c.transform.translateZ(-CUBE_SIDELENGTH - GAP); //down
} else if (e.code == 'KeyQ') {
c.transform.translateY(CUBE_SIDELENGTH + GAP); //forward
} else if (e.code == 'KeyE') {
c.transform.translateY(-CUBE_SIDELENGTH - GAP); //backward
} else if (e.code == 'Space') {
var new_cube = new X.cube();
new_cube.color = c.color;
new_cube.transform.matrix = new Float32Array(c.transform.matrix);
new_cube.lengthX = new_cube.lengthY = new_cube.lengthZ = CUBE_SIDELENGTH;
renderer.add(new_cube);
}

if (e.code == 'KeyO') {
if (typeof download === 'function') {
download(); //download function
} else {
console.error('Download function is not available');
}
} else if (e.code == 'KeyL') {
if (typeof upload === 'function') {
upload("scene.json"); //upload function
} else {
console.error('Upload function is not available');
}
}
if (e.code == 'KeyB') {
rotateCamera = !rotateCamera; //rotate
console.log('Camera rotation', rotateCamera ? 'enabled' : 'disabled');
}

if (colors[e.code]) {
console.log('Changing color to:', colors[e.code]);
c.color = colors[e.code]; //cube color
}


renderer.render();
};
</script>
</body>
</html>
1 change: 1 addition & 0 deletions 02/scene.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
{"cubes":[[[0,1,0],{"0":1,"1":0,"2":0,"3":0,"4":0,"5":1,"6":0,"7":0,"8":0,"9":0,"10":1,"11":0,"12":50,"13":30,"14":30,"15":1}],[[1,0,0],{"0":1,"1":0,"2":0,"3":0,"4":0,"5":1,"6":0,"7":0,"8":0,"9":0,"10":1,"11":0,"12":10,"13":0,"14":0,"15":1}],[[1,0,0],{"0":1,"1":0,"2":0,"3":0,"4":0,"5":1,"6":0,"7":0,"8":0,"9":0,"10":1,"11":0,"12":0,"13":0,"14":0,"15":1}],[[1,0,0],{"0":1,"1":0,"2":0,"3":0,"4":0,"5":1,"6":0,"7":0,"8":0,"9":0,"10":1,"11":0,"12":-10,"13":0,"14":0,"15":1}],[[1,0,0],{"0":1,"1":0,"2":0,"3":0,"4":0,"5":1,"6":0,"7":0,"8":0,"9":0,"10":1,"11":0,"12":-10,"13":0,"14":10,"15":1}],[[1,0,0],{"0":1,"1":0,"2":0,"3":0,"4":0,"5":1,"6":0,"7":0,"8":0,"9":0,"10":1,"11":0,"12":0,"13":0,"14":10,"15":1}],[[1,0,0],{"0":1,"1":0,"2":0,"3":0,"4":0,"5":1,"6":0,"7":0,"8":0,"9":0,"10":1,"11":0,"12":10,"13":0,"14":10,"15":1}],[[1,0,0],{"0":1,"1":0,"2":0,"3":0,"4":0,"5":1,"6":0,"7":0,"8":0,"9":0,"10":1,"11":0,"12":10,"13":0,"14":20,"15":1}],[[1,0,0],{"0":1,"1":0,"2":0,"3":0,"4":0,"5":1,"6":0,"7":0,"8":0,"9":0,"10":1,"11":0,"12":0,"13":0,"14":20,"15":1}],[[1,0,0],{"0":1,"1":0,"2":0,"3":0,"4":0,"5":1,"6":0,"7":0,"8":0,"9":0,"10":1,"11":0,"12":-10,"13":0,"14":20,"15":1}],[[0,0,1],{"0":1,"1":0,"2":0,"3":0,"4":0,"5":1,"6":0,"7":0,"8":0,"9":0,"10":1,"11":0,"12":-10,"13":0,"14":30,"15":1}],[[0,0,1],{"0":1,"1":0,"2":0,"3":0,"4":0,"5":1,"6":0,"7":0,"8":0,"9":0,"10":1,"11":0,"12":0,"13":0,"14":30,"15":1}],[[0,0,1],{"0":1,"1":0,"2":0,"3":0,"4":0,"5":1,"6":0,"7":0,"8":0,"9":0,"10":1,"11":0,"12":10,"13":0,"14":30,"15":1}],[[0,0,1],{"0":1,"1":0,"2":0,"3":0,"4":0,"5":1,"6":0,"7":0,"8":0,"9":0,"10":1,"11":0,"12":20,"13":0,"14":30,"15":1}],[[0,0,1],{"0":1,"1":0,"2":0,"3":0,"4":0,"5":1,"6":0,"7":0,"8":0,"9":0,"10":1,"11":0,"12":20,"13":0,"14":20,"15":1}],[[0,0,1],{"0":1,"1":0,"2":0,"3":0,"4":0,"5":1,"6":0,"7":0,"8":0,"9":0,"10":1,"11":0,"12":20,"13":0,"14":10,"15":1}],[[0,0,1],{"0":1,"1":0,"2":0,"3":0,"4":0,"5":1,"6":0,"7":0,"8":0,"9":0,"10":1,"11":0,"12":20,"13":0,"14":0,"15":1}],[[0,0,1],{"0":1,"1":0,"2":0,"3":0,"4":0,"5":1,"6":0,"7":0,"8":0,"9":0,"10":1,"11":0,"12":20,"13":0,"14":-10,"15":1}],[[0,0,1],{"0":1,"1":0,"2":0,"3":0,"4":0,"5":1,"6":0,"7":0,"8":0,"9":0,"10":1,"11":0,"12":10,"13":0,"14":-10,"15":1}],[[0,0,1],{"0":1,"1":0,"2":0,"3":0,"4":0,"5":1,"6":0,"7":0,"8":0,"9":0,"10":1,"11":0,"12":0,"13":0,"14":-10,"15":1}],[[0,0,1],{"0":1,"1":0,"2":0,"3":0,"4":0,"5":1,"6":0,"7":0,"8":0,"9":0,"10":1,"11":0,"12":-10,"13":0,"14":-10,"15":1}],[[0,0,1],{"0":1,"1":0,"2":0,"3":0,"4":0,"5":1,"6":0,"7":0,"8":0,"9":0,"10":1,"11":0,"12":-20,"13":0,"14":-10,"15":1}],[[0,0,1],{"0":1,"1":0,"2":0,"3":0,"4":0,"5":1,"6":0,"7":0,"8":0,"9":0,"10":1,"11":0,"12":-20,"13":0,"14":0,"15":1}],[[0,0,1],{"0":1,"1":0,"2":0,"3":0,"4":0,"5":1,"6":0,"7":0,"8":0,"9":0,"10":1,"11":0,"12":-20,"13":0,"14":10,"15":1}],[[0,0,1],{"0":1,"1":0,"2":0,"3":0,"4":0,"5":1,"6":0,"7":0,"8":0,"9":0,"10":1,"11":0,"12":-20,"13":0,"14":20,"15":1}],[[0,0,1],{"0":1,"1":0,"2":0,"3":0,"4":0,"5":1,"6":0,"7":0,"8":0,"9":0,"10":1,"11":0,"12":-20,"13":0,"14":30,"15":1}],[[1,1,0],{"0":1,"1":0,"2":0,"3":0,"4":0,"5":1,"6":0,"7":0,"8":0,"9":0,"10":1,"11":0,"12":-20,"13":20,"14":0,"15":1}],[[1,1,0],{"0":1,"1":0,"2":0,"3":0,"4":0,"5":1,"6":0,"7":0,"8":0,"9":0,"10":1,"11":0,"12":-20,"13":20,"14":10,"15":1}],[[1,1,0],{"0":1,"1":0,"2":0,"3":0,"4":0,"5":1,"6":0,"7":0,"8":0,"9":0,"10":1,"11":0,"12":-20,"13":20,"14":20,"15":1}],[[1,1,0],{"0":1,"1":0,"2":0,"3":0,"4":0,"5":1,"6":0,"7":0,"8":0,"9":0,"10":1,"11":0,"12":-20,"13":20,"14":30,"15":1}],[[1,1,0],{"0":1,"1":0,"2":0,"3":0,"4":0,"5":1,"6":0,"7":0,"8":0,"9":0,"10":1,"11":0,"12":-20,"13":20,"14":-10,"15":1}],[[0,1,1],{"0":1,"1":0,"2":0,"3":0,"4":0,"5":1,"6":0,"7":0,"8":0,"9":0,"10":1,"11":0,"12":-20,"13":30,"14":-30,"15":1}],[[0,1,1],{"0":1,"1":0,"2":0,"3":0,"4":0,"5":1,"6":0,"7":0,"8":0,"9":0,"10":1,"11":0,"12":-10,"13":30,"14":-30,"15":1}],[[0,1,1],{"0":1,"1":0,"2":0,"3":0,"4":0,"5":1,"6":0,"7":0,"8":0,"9":0,"10":1,"11":0,"12":0,"13":30,"14":-30,"15":1}],[[0,1,1],{"0":1,"1":0,"2":0,"3":0,"4":0,"5":1,"6":0,"7":0,"8":0,"9":0,"10":1,"11":0,"12":10,"13":30,"14":-30,"15":1}],[[0,1,1],{"0":1,"1":0,"2":0,"3":0,"4":0,"5":1,"6":0,"7":0,"8":0,"9":0,"10":1,"11":0,"12":10,"13":30,"14":-30,"15":1}],[[0,1,1],{"0":1,"1":0,"2":0,"3":0,"4":0,"5":1,"6":0,"7":0,"8":0,"9":0,"10":1,"11":0,"12":20,"13":30,"14":-30,"15":1}],[[0,1,1],{"0":1,"1":0,"2":0,"3":0,"4":0,"5":1,"6":0,"7":0,"8":0,"9":0,"10":1,"11":0,"12":20,"13":30,"14":-30,"15":1}],[[0,1,1],{"0":1,"1":0,"2":0,"3":0,"4":0,"5":1,"6":0,"7":0,"8":0,"9":0,"10":1,"11":0,"12":30,"13":30,"14":-30,"15":1}],[[0,1,1],{"0":1,"1":0,"2":0,"3":0,"4":0,"5":1,"6":0,"7":0,"8":0,"9":0,"10":1,"11":0,"12":30,"13":60,"14":-30,"15":1}],[[0,1,1],{"0":1,"1":0,"2":0,"3":0,"4":0,"5":1,"6":0,"7":0,"8":0,"9":0,"10":1,"11":0,"12":30,"13":80,"14":-30,"15":1}],[[0,1,1],{"0":1,"1":0,"2":0,"3":0,"4":0,"5":1,"6":0,"7":0,"8":0,"9":0,"10":1,"11":0,"12":30,"13":100,"14":-30,"15":1}],[[0,1,1],{"0":1,"1":0,"2":0,"3":0,"4":0,"5":1,"6":0,"7":0,"8":0,"9":0,"10":1,"11":0,"12":30,"13":100,"14":-50,"15":1}],[[0,1,1],{"0":1,"1":0,"2":0,"3":0,"4":0,"5":1,"6":0,"7":0,"8":0,"9":0,"10":1,"11":0,"12":30,"13":80,"14":-50,"15":1}],[[0,1,1],{"0":1,"1":0,"2":0,"3":0,"4":0,"5":1,"6":0,"7":0,"8":0,"9":0,"10":1,"11":0,"12":30,"13":60,"14":-50,"15":1}],[[0,1,1],{"0":1,"1":0,"2":0,"3":0,"4":0,"5":1,"6":0,"7":0,"8":0,"9":0,"10":1,"11":0,"12":30,"13":40,"14":-50,"15":1}],[[0,1,1],{"0":1,"1":0,"2":0,"3":0,"4":0,"5":1,"6":0,"7":0,"8":0,"9":0,"10":1,"11":0,"12":30,"13":30,"14":-50,"15":1}],[[0,1,1],{"0":1,"1":0,"2":0,"3":0,"4":0,"5":1,"6":0,"7":0,"8":0,"9":0,"10":1,"11":0,"12":30,"13":30,"14":-40,"15":1}],[[1,0.75,0.8],{"0":1,"1":0,"2":0,"3":0,"4":0,"5":1,"6":0,"7":0,"8":0,"9":0,"10":1,"11":0,"12":60,"13":40,"14":0,"15":1}],[[1,0.75,0.8],{"0":1,"1":0,"2":0,"3":0,"4":0,"5":1,"6":0,"7":0,"8":0,"9":0,"10":1,"11":0,"12":70,"13":60,"14":0,"15":1}],[[1,0.75,0.8],{"0":1,"1":0,"2":0,"3":0,"4":0,"5":1,"6":0,"7":0,"8":0,"9":0,"10":1,"11":0,"12":70,"13":80,"14":0,"15":1}],[[1,0.75,0.8],{"0":1,"1":0,"2":0,"3":0,"4":0,"5":1,"6":0,"7":0,"8":0,"9":0,"10":1,"11":0,"12":70,"13":90,"14":0,"15":1}],[[1,0.75,0.8],{"0":1,"1":0,"2":0,"3":0,"4":0,"5":1,"6":0,"7":0,"8":0,"9":0,"10":1,"11":0,"12":70,"13":100,"14":0,"15":1}],[[1,0.75,0.8],{"0":1,"1":0,"2":0,"3":0,"4":0,"5":1,"6":0,"7":0,"8":0,"9":0,"10":1,"11":0,"12":70,"13":110,"14":0,"15":1}],[[1,0.75,0.8],{"0":1,"1":0,"2":0,"3":0,"4":0,"5":1,"6":0,"7":0,"8":0,"9":0,"10":1,"11":0,"12":70,"13":120,"14":0,"15":1}],[[0,1,0],{"0":1,"1":0,"2":0,"3":0,"4":0,"5":1,"6":0,"7":0,"8":0,"9":0,"10":1,"11":0,"12":50,"13":30,"14":40,"15":1}],[[0,1,0],{"0":1,"1":0,"2":0,"3":0,"4":0,"5":1,"6":0,"7":0,"8":0,"9":0,"10":1,"11":0,"12":50,"13":30,"14":20,"15":1}],[[0,1,0],{"0":1,"1":0,"2":0,"3":0,"4":0,"5":1,"6":0,"7":0,"8":0,"9":0,"10":1,"11":0,"12":50,"13":30,"14":10,"15":1}],[[0,1,0],{"0":1,"1":0,"2":0,"3":0,"4":0,"5":1,"6":0,"7":0,"8":0,"9":0,"10":1,"11":0,"12":50,"13":30,"14":10,"15":1}],[[0,1,0],{"0":1,"1":0,"2":0,"3":0,"4":0,"5":1,"6":0,"7":0,"8":0,"9":0,"10":1,"11":0,"12":50,"13":30,"14":10,"15":1}],[[0,1,0],{"0":1,"1":0,"2":0,"3":0,"4":0,"5":1,"6":0,"7":0,"8":0,"9":0,"10":1,"11":0,"12":50,"13":30,"14":10,"15":1}],[[0,1,0],{"0":1,"1":0,"2":0,"3":0,"4":0,"5":1,"6":0,"7":0,"8":0,"9":0,"10":1,"11":0,"12":50,"13":30,"14":10,"15":1}],[[0,1,0],{"0":1,"1":0,"2":0,"3":0,"4":0,"5":1,"6":0,"7":0,"8":0,"9":0,"10":1,"11":0,"12":50,"13":30,"14":10,"15":1}],[[0,1,0],{"0":1,"1":0,"2":0,"3":0,"4":0,"5":1,"6":0,"7":0,"8":0,"9":0,"10":1,"11":0,"12":50,"13":30,"14":10,"15":1}],[[0,1,0],{"0":1,"1":0,"2":0,"3":0,"4":0,"5":1,"6":0,"7":0,"8":0,"9":0,"10":1,"11":0,"12":50,"13":30,"14":10,"15":1}],[[0,1,0],{"0":1,"1":0,"2":0,"3":0,"4":0,"5":1,"6":0,"7":0,"8":0,"9":0,"10":1,"11":0,"12":50,"13":30,"14":10,"15":1}],[[0,1,0],{"0":1,"1":0,"2":0,"3":0,"4":0,"5":1,"6":0,"7":0,"8":0,"9":0,"10":1,"11":0,"12":50,"13":30,"14":10,"15":1}],[[0,1,0],{"0":1,"1":0,"2":0,"3":0,"4":0,"5":1,"6":0,"7":0,"8":0,"9":0,"10":1,"11":0,"12":50,"13":30,"14":0,"15":1}],[[0,1,0],{"0":1,"1":0,"2":0,"3":0,"4":0,"5":1,"6":0,"7":0,"8":0,"9":0,"10":1,"11":0,"12":50,"13":30,"14":-10,"15":1}],[[0,1,0],{"0":1,"1":0,"2":0,"3":0,"4":0,"5":1,"6":0,"7":0,"8":0,"9":0,"10":1,"11":0,"12":50,"13":30,"14":-20,"15":1}],[[0,1,0],{"0":1,"1":0,"2":0,"3":0,"4":0,"5":1,"6":0,"7":0,"8":0,"9":0,"10":1,"11":0,"12":50,"13":30,"14":-30,"15":1}],[[0,1,0],{"0":1,"1":0,"2":0,"3":0,"4":0,"5":1,"6":0,"7":0,"8":0,"9":0,"10":1,"11":0,"12":40,"13":30,"14":-40,"15":1}],[[0,1,0],{"0":1,"1":0,"2":0,"3":0,"4":0,"5":1,"6":0,"7":0,"8":0,"9":0,"10":1,"11":0,"12":50,"13":30,"14":-40,"15":1}],[[0,1,0],{"0":1,"1":0,"2":0,"3":0,"4":0,"5":1,"6":0,"7":0,"8":0,"9":0,"10":1,"11":0,"12":50,"13":30,"14":30,"15":1}]],"camera":{"0":-0.4763152003288269,"1":0.8283754587173462,"2":-0.29481518268585205,"3":0,"4":-0.7586764097213745,"5":-0.21771280467510223,"6":0.6140129566192627,"7":0,"8":0.444448322057724,"9":0.5161332488059998,"10":0.7321696877479553,"11":0,"12":0,"13":0,"14":-180,"15":1}}
17 changes: 17 additions & 0 deletions 05/ar.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
<html>
<script src="https://aframe.io/releases/1.3.0/aframe.min.js"></script>
<script src="https://raw.githack.com/AR-js-org/AR.js/dev/aframe/build/aframe-ar.js"></script>
<body style="margin : 0px; overflow: hidden;">
<a-scene embedded arjs>
<a-marker preset="hiro">
<a-entity
position="0 0 0"
rotation="0 0 0"
scale="0.01 0.01 0.01"
gltf-model="tinkerCar.glb"
></a-entity>
</a-marker>
<a-entity camera></a-entity>
</a-scene>
</body>
</html>
Binary file added 05/carAssignment5.blend
View file
Open in desktop
Binary file not shown.
Binary file added 05/carAssignment5.blend1
View file
Open in desktop
Binary file not shown.
Binary file added 05/carAssignment5.glb
View file
Open in desktop
Binary file not shown.
Binary file added 05/carAssignment5.stl
View file
Open in desktop
Binary file not shown.
Loading