Skip to content

Commit

Permalink
works for two
Browse files Browse the repository at this point in the history
  • Loading branch information
@romyilano
romyilano committed Aug 14, 2024
1 parent 92c170a commit 0380ec5
Show file tree
Hide file tree
Showing 2 changed files with 81 additions and 73 deletions.
126 changes: 53 additions & 73 deletions index.html
View file
Original file line number Diff line number Diff line change
@@ -1,79 +1,59 @@
<!DOCTYPE html>
<html>
<head>
<script src="https://aframe.io/releases/1.6.0/aframe.min.js">
</script>
<script src="js/pinch-handler.js"></script>
<script src="js/main.js"></script>
<link rel="stylesheet" href="css/styles.css">
<head>
<script src="https://aframe.io/releases/1.6.0/aframe.min.js"></script>
<script src="js/pinch-handler.js"></script>
<script src="js/main.js"></script>
<link rel="stylesheet" href="css/styles.css">
<script src="https://unpkg.com/[email protected]/dist/aframe-event-set-component.min.js"></script>
</head>
<body>
</head>
<body>
<a-scene pinch-handler>
<a-assets>
<img id="skyTexture1"
src="img/sudoRoom_hardware_hack_1.jpg"/>
<!-- kara walker - another hardware hack night -->
<img id="skyTexture2"
src="https://cdn.glitch.global/4f84b3a7-2196-4e68-9b5d-8d8f7c229bc8/KaraWalkerSFMoma360.jpg?v=17222a19263454"
/>
<!-- another hardware hack night -->
<img
id="skyTexture3"
src="https://cdn.glitch.global/c70b1072-7801-4a12-b3cf-3bb5e174019e/SudoROom.JPG?v=1722469205013"
/>
</a-assets>

<a-sky id="skybox"
src="#skyTexture1"
rotation="0 0 0"></a-sky>

<a-text
font="kelsonsans"
value="SudoRoom & Fix-It Clinic"
width="6"
position="-2.5 1 -1.5"
rotation="0 15 0"
></a-text>

<a-entity
id="size"
position="-2.0 0.5 -1.5"
rotation="0 15 0"
animation="property: scale; to: 2 2 2; dir: alternate; loop: true"
text="color: white; align: center; value: Hardware Hack Night; width: 1.5"
>
</a-entity>
<a-entity id="portal-group" position="0 1.5 -1">
<a-entity
id="portal"
geometry="primitive: circle; radius: 0.5"
material="color: blue; opacity: 0.5"
position="0 1.5 -3"
event-set__enter="_event: mouseenter; material.opacity: 0.8"
event-set__leave="_event: mouseleave; material.opacity: 0.5"
event-set__click="_event: click; _target: #skybox; src: #skyTexture2"
>
<a-text
value="Stare here to transport"
align="center"
position="0 0.6 0"
scale="0.5 0.5 0.5"
></a-text>
<a-assets>
<img id="skyTexture1" src="img/sudoRoom_hardware_hack_1.jpg"/>
<img id="skyTexture2" src="https://cdn.glitch.global/4f84b3a7-2196-4e68-9b5d-8d8f7c229bc8/KaraWalkerSFMoma360.jpg?v=17222a19263454"/>
<img id="skyTexture3" src="https://cdn.glitch.global/c70b1072-7801-4a12-b3cf-3bb5e174019e/SudoROom.JPG?v=1722469205013"/>
</a-assets>

<a-sky id="skybox" src="#skyTexture1" rotation="0 0 0"></a-sky>

<a-text font="kelsonsans" value="SudoRoom & Fix-It Clinic" width="6" position="-2.5 1 -1.5" rotation="0 15 0"></a-text>

<a-entity id="size" position="-2.0 0.5 -1.5" rotation="0 15 0"
animation="property: scale; to: 2 2 2; dir: alternate; loop: true"
text="color: white; align: center; value: Hardware Hack Night; width: 1.5">
</a-entity>
</a-entity>
<a-entity id="portal2" class="portal" position="0 1.5 -3" visible="false"
geometry="primitive: circle; radius: 0.5"
material="color: green; opacity: 0.5"
event-set__enter="_event: mouseenter; material.opacity: 0.8"
event-set__leave="_event: mouseleave; material.opacity: 0.5">
<a-text value="Stare here to transport" align="center" position="0 0.6 0" scale="0.5 0.5 0.5"></a-text>
</a-entity>

<a-entity position="0 1.8 2">
<a-entity camera look-controls wasd-controls>
<a-cursor></a-cursor>

<a-entity id="portal1" class="portal" geometry="primitive: circle; radius: 0.5"
material="color: blue; opacity: 0.5" position="0 1.5 -3"
event-set__enter="_event: mouseenter; material.opacity: 0.8"
event-set__leave="_event: mouseleave; material.opacity: 0.5">
<a-text value="Stare here to transport" align="center" position="0 0.6 0" scale="0.5 0.5 0.5"></a-text>
</a-entity>

<a-entity id="portal2" class="portal" geometry="primitive: circle; radius: 0.5"
material="color: green; opacity: 0.5" position="2 1.5 -3" visible="false"
event-set__enter="_event: mouseenter; material.opacity: 0.8"
event-set__leave="_event: mouseleave; material.opacity: 0.5">
<a-text value="Stare here to transport" align="center" position="0 0.6 0" scale="0.5 0.5 0.5"></a-text>
</a-entity>

<a-entity id="portal3" class="portal" geometry="primitive: circle; radius: 0.5"
material="color: red; opacity: 0.5" position="-2 1.5 -3" visible="false"
event-set__enter="_event: mouseenter; material.opacity: 0.8"
event-set__leave="_event: mouseleave; material.opacity: 0.5">
<a-text value="Stare here to transport" align="center" position="0 0.6 0" scale="0.5 0.5 0.5"></a-text>
</a-entity>

<a-entity position="0 1.8 2">
<a-entity camera look-controls wasd-controls>
<a-cursor></a-cursor>
</a-entity>
</a-entity>
</a-entity>
</a-scene>
</body>
</html>

<script>
// JavaScript code will be added here
</script>
</body>
</html>
28 changes: 28 additions & 0 deletions js/main.js
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,34 @@
// You can add any additional JavaScript here
// For example, you might want to add event listeners or other functionality
document.addEventListener('DOMContentLoaded', function() {
const skybox = document.querySelector('#skybox');
const portal1 = document.querySelector('#portal1');
const portal2 = document.querySelector('#portal2');
const portal3 = document.querySelector('#portal3');

const skyboxTextures = ['#skyTexture1', '#skyTexture2', '#skyTexture3'];
let currentTextureIndex = 0;

function changeScene(nextTextureIndex) {
currentTextureIndex = nextTextureIndex;
skybox.setAttribute('src', skyboxTextures[currentTextureIndex]);

// Update portal visibility
portal1.setAttribute('visible', currentTextureIndex === 0);
portal2.setAttribute('visible', currentTextureIndex === 1);
portal3.setAttribute('visible', currentTextureIndex === 2);
}

function setupPortalListener(portal, nextTextureIndex) {
portal.addEventListener('click', () => changeScene(nextTextureIndex));
}

// Set up portal listeners
setupPortalListener(portal1, 1); // First portal takes us to skyTexture2
setupPortalListener(portal2, 2); // Second portal takes us to skyTexture3
setupPortalListener(portal3, 1); // Third portal takes us back to skyTexture2

// Log to console when scene is loaded
console.log('VR Scene loaded');
});

Expand Down

0 comments on commit 0380ec5

Please sign in to comment.