finding the key - malwine(using web technologies: html, dom, js, three.js, webvr, webgl) you can...
TRANSCRIPT
![Page 1: Finding the key - Malwine(Using web technologies: HTML, DOM, JS, three.js, WebVR, WebGL) You can think of A-Frame as a theatre play or a movie: You’ll have a scene, some light, a](https://reader035.vdocument.in/reader035/viewer/2022071001/5fbdc8233e12c1243d483e26/html5/thumbnails/1.jpg)
Finding the key
(to WebVR)
![Page 2: Finding the key - Malwine(Using web technologies: HTML, DOM, JS, three.js, WebVR, WebGL) You can think of A-Frame as a theatre play or a movie: You’ll have a scene, some light, a](https://reader035.vdocument.in/reader035/viewer/2022071001/5fbdc8233e12c1243d483e26/html5/thumbnails/2.jpg)
About meMicrosoft
#sketchnotes
(at Jeffconf Hamburg)
I like WebVR!Malwine
@malweene
![Page 3: Finding the key - Malwine(Using web technologies: HTML, DOM, JS, three.js, WebVR, WebGL) You can think of A-Frame as a theatre play or a movie: You’ll have a scene, some light, a](https://reader035.vdocument.in/reader035/viewer/2022071001/5fbdc8233e12c1243d483e26/html5/thumbnails/3.jpg)
Some history
• Graduated High School 2012 📚📜💯
• 2012: Computer Science: attempt 1= fail ❌
• 2014: Computer Science: attempt 2 = yay ✅
• 2016: Programmer at Microsoft &💻
![Page 4: Finding the key - Malwine(Using web technologies: HTML, DOM, JS, three.js, WebVR, WebGL) You can think of A-Frame as a theatre play or a movie: You’ll have a scene, some light, a](https://reader035.vdocument.in/reader035/viewer/2022071001/5fbdc8233e12c1243d483e26/html5/thumbnails/4.jpg)
Me 2012
can not program
has no support
decides (a bit random) to study computer science
has zero computer knowledge
![Page 5: Finding the key - Malwine(Using web technologies: HTML, DOM, JS, three.js, WebVR, WebGL) You can think of A-Frame as a theatre play or a movie: You’ll have a scene, some light, a](https://reader035.vdocument.in/reader035/viewer/2022071001/5fbdc8233e12c1243d483e26/html5/thumbnails/5.jpg)
The closed doorsTech WorldSports Music
closed
![Page 6: Finding the key - Malwine(Using web technologies: HTML, DOM, JS, three.js, WebVR, WebGL) You can think of A-Frame as a theatre play or a movie: You’ll have a scene, some light, a](https://reader035.vdocument.in/reader035/viewer/2022071001/5fbdc8233e12c1243d483e26/html5/thumbnails/6.jpg)
The closed doorsTech WorldSports Music
???
![Page 7: Finding the key - Malwine(Using web technologies: HTML, DOM, JS, three.js, WebVR, WebGL) You can think of A-Frame as a theatre play or a movie: You’ll have a scene, some light, a](https://reader035.vdocument.in/reader035/viewer/2022071001/5fbdc8233e12c1243d483e26/html5/thumbnails/7.jpg)
The closed doorsTech WorldSports Music
closed
![Page 8: Finding the key - Malwine(Using web technologies: HTML, DOM, JS, three.js, WebVR, WebGL) You can think of A-Frame as a theatre play or a movie: You’ll have a scene, some light, a](https://reader035.vdocument.in/reader035/viewer/2022071001/5fbdc8233e12c1243d483e26/html5/thumbnails/8.jpg)
The closed doorsTech WorldSports Music
closed
![Page 9: Finding the key - Malwine(Using web technologies: HTML, DOM, JS, three.js, WebVR, WebGL) You can think of A-Frame as a theatre play or a movie: You’ll have a scene, some light, a](https://reader035.vdocument.in/reader035/viewer/2022071001/5fbdc8233e12c1243d483e26/html5/thumbnails/9.jpg)
LeaveStay
The crucial moment
![Page 10: Finding the key - Malwine(Using web technologies: HTML, DOM, JS, three.js, WebVR, WebGL) You can think of A-Frame as a theatre play or a movie: You’ll have a scene, some light, a](https://reader035.vdocument.in/reader035/viewer/2022071001/5fbdc8233e12c1243d483e26/html5/thumbnails/10.jpg)
🍀
![Page 11: Finding the key - Malwine(Using web technologies: HTML, DOM, JS, three.js, WebVR, WebGL) You can think of A-Frame as a theatre play or a movie: You’ll have a scene, some light, a](https://reader035.vdocument.in/reader035/viewer/2022071001/5fbdc8233e12c1243d483e26/html5/thumbnails/11.jpg)
A little wonder happens…Tech WorldSports Music
closed
Hey, do you want to try
Ruby?
![Page 12: Finding the key - Malwine(Using web technologies: HTML, DOM, JS, three.js, WebVR, WebGL) You can think of A-Frame as a theatre play or a movie: You’ll have a scene, some light, a](https://reader035.vdocument.in/reader035/viewer/2022071001/5fbdc8233e12c1243d483e26/html5/thumbnails/12.jpg)
RailsGirls Workshop 2013
![Page 13: Finding the key - Malwine(Using web technologies: HTML, DOM, JS, three.js, WebVR, WebGL) You can think of A-Frame as a theatre play or a movie: You’ll have a scene, some light, a](https://reader035.vdocument.in/reader035/viewer/2022071001/5fbdc8233e12c1243d483e26/html5/thumbnails/13.jpg)
This door opens!Tech WorldSports Music
😱
![Page 14: Finding the key - Malwine(Using web technologies: HTML, DOM, JS, three.js, WebVR, WebGL) You can think of A-Frame as a theatre play or a movie: You’ll have a scene, some light, a](https://reader035.vdocument.in/reader035/viewer/2022071001/5fbdc8233e12c1243d483e26/html5/thumbnails/14.jpg)
WOW!
Inside tech community
💛 Cool people
Motivation!!
Programming is fun 💛
Meetups Conferences 💛
InclusivenessMentoring 💛
Knowledge sharing 💛
JobsVR
RubyJavaScript
#sketchnotesYay!
Welcome!
![Page 15: Finding the key - Malwine(Using web technologies: HTML, DOM, JS, three.js, WebVR, WebGL) You can think of A-Frame as a theatre play or a movie: You’ll have a scene, some light, a](https://reader035.vdocument.in/reader035/viewer/2022071001/5fbdc8233e12c1243d483e26/html5/thumbnails/15.jpg)
Who provides keys:
![Page 16: Finding the key - Malwine(Using web technologies: HTML, DOM, JS, three.js, WebVR, WebGL) You can think of A-Frame as a theatre play or a movie: You’ll have a scene, some light, a](https://reader035.vdocument.in/reader035/viewer/2022071001/5fbdc8233e12c1243d483e26/html5/thumbnails/16.jpg)
• Rails Girls
• Open Tech School
• NodeSchool
• ClojureBridge
• Crypto Party
Key initiatives
![Page 17: Finding the key - Malwine(Using web technologies: HTML, DOM, JS, three.js, WebVR, WebGL) You can think of A-Frame as a theatre play or a movie: You’ll have a scene, some light, a](https://reader035.vdocument.in/reader035/viewer/2022071001/5fbdc8233e12c1243d483e26/html5/thumbnails/17.jpg)
Virtual Reality
![Page 18: Finding the key - Malwine(Using web technologies: HTML, DOM, JS, three.js, WebVR, WebGL) You can think of A-Frame as a theatre play or a movie: You’ll have a scene, some light, a](https://reader035.vdocument.in/reader035/viewer/2022071001/5fbdc8233e12c1243d483e26/html5/thumbnails/18.jpg)
Virtual RealityPoll
Tried VR before? Coded VR before? Wanted to get into VR?
![Page 19: Finding the key - Malwine(Using web technologies: HTML, DOM, JS, three.js, WebVR, WebGL) You can think of A-Frame as a theatre play or a movie: You’ll have a scene, some light, a](https://reader035.vdocument.in/reader035/viewer/2022071001/5fbdc8233e12c1243d483e26/html5/thumbnails/19.jpg)
The closed doorsVirtualRealityWeb Games
Requirements: • C++, Java • C# and Unity • WebGL • three.js
![Page 20: Finding the key - Malwine(Using web technologies: HTML, DOM, JS, three.js, WebVR, WebGL) You can think of A-Frame as a theatre play or a movie: You’ll have a scene, some light, a](https://reader035.vdocument.in/reader035/viewer/2022071001/5fbdc8233e12c1243d483e26/html5/thumbnails/20.jpg)
• C# and Unity • C++ • Blender • WebGL • three.js
Entry requirements:
![Page 21: Finding the key - Malwine(Using web technologies: HTML, DOM, JS, three.js, WebVR, WebGL) You can think of A-Frame as a theatre play or a movie: You’ll have a scene, some light, a](https://reader035.vdocument.in/reader035/viewer/2022071001/5fbdc8233e12c1243d483e26/html5/thumbnails/21.jpg)
• C# and Unity • C++ • Blender • WebGL • three.js
• modelling • lighting • baking • shaders • frame rates
Entry requirements:
![Page 22: Finding the key - Malwine(Using web technologies: HTML, DOM, JS, three.js, WebVR, WebGL) You can think of A-Frame as a theatre play or a movie: You’ll have a scene, some light, a](https://reader035.vdocument.in/reader035/viewer/2022071001/5fbdc8233e12c1243d483e26/html5/thumbnails/22.jpg)
The closed doorsVirtualRealityWeb Games
Requirements: • C++ • Unity • WebGL • three.js
😾 ⚡
😢
![Page 23: Finding the key - Malwine(Using web technologies: HTML, DOM, JS, three.js, WebVR, WebGL) You can think of A-Frame as a theatre play or a movie: You’ll have a scene, some light, a](https://reader035.vdocument.in/reader035/viewer/2022071001/5fbdc8233e12c1243d483e26/html5/thumbnails/23.jpg)
But, there is a key!
![Page 24: Finding the key - Malwine(Using web technologies: HTML, DOM, JS, three.js, WebVR, WebGL) You can think of A-Frame as a theatre play or a movie: You’ll have a scene, some light, a](https://reader035.vdocument.in/reader035/viewer/2022071001/5fbdc8233e12c1243d483e26/html5/thumbnails/24.jpg)
The VR key
A-Frame
![Page 25: Finding the key - Malwine(Using web technologies: HTML, DOM, JS, three.js, WebVR, WebGL) You can think of A-Frame as a theatre play or a movie: You’ll have a scene, some light, a](https://reader035.vdocument.in/reader035/viewer/2022071001/5fbdc8233e12c1243d483e26/html5/thumbnails/25.jpg)
Virtual RealityImmerse in a computer generated
simulated realistic experience
![Page 26: Finding the key - Malwine(Using web technologies: HTML, DOM, JS, three.js, WebVR, WebGL) You can think of A-Frame as a theatre play or a movie: You’ll have a scene, some light, a](https://reader035.vdocument.in/reader035/viewer/2022071001/5fbdc8233e12c1243d483e26/html5/thumbnails/26.jpg)
What can we do with VR?• Gaming? Interactive experiences?
![Page 27: Finding the key - Malwine(Using web technologies: HTML, DOM, JS, three.js, WebVR, WebGL) You can think of A-Frame as a theatre play or a movie: You’ll have a scene, some light, a](https://reader035.vdocument.in/reader035/viewer/2022071001/5fbdc8233e12c1243d483e26/html5/thumbnails/27.jpg)
What can we do with VR?• Gaming? Interactive experiences?
• Medical Industry
• Trainings
• Education
• Architecture & Real Estate
![Page 28: Finding the key - Malwine(Using web technologies: HTML, DOM, JS, three.js, WebVR, WebGL) You can think of A-Frame as a theatre play or a movie: You’ll have a scene, some light, a](https://reader035.vdocument.in/reader035/viewer/2022071001/5fbdc8233e12c1243d483e26/html5/thumbnails/28.jpg)
My passion about VR is the power that immersion has in terms of life. Diversity inclusion is driven by empathy and compassion. How can I be more inclusive if I can’t understand or empathise with how it’s like to be “the only one”.
Erin Teague@ErinTeague Youtube VR
Quoted from Physics Girl Video
![Page 29: Finding the key - Malwine(Using web technologies: HTML, DOM, JS, three.js, WebVR, WebGL) You can think of A-Frame as a theatre play or a movie: You’ll have a scene, some light, a](https://reader035.vdocument.in/reader035/viewer/2022071001/5fbdc8233e12c1243d483e26/html5/thumbnails/29.jpg)
Virtual Reality as a new medium to encourage empathy and compassion
![Page 30: Finding the key - Malwine(Using web technologies: HTML, DOM, JS, three.js, WebVR, WebGL) You can think of A-Frame as a theatre play or a movie: You’ll have a scene, some light, a](https://reader035.vdocument.in/reader035/viewer/2022071001/5fbdc8233e12c1243d483e26/html5/thumbnails/30.jpg)
Virtual Reality as a new medium for art, activism and journalism
![Page 31: Finding the key - Malwine(Using web technologies: HTML, DOM, JS, three.js, WebVR, WebGL) You can think of A-Frame as a theatre play or a movie: You’ll have a scene, some light, a](https://reader035.vdocument.in/reader035/viewer/2022071001/5fbdc8233e12c1243d483e26/html5/thumbnails/31.jpg)
And again: Access matters!
![Page 32: Finding the key - Malwine(Using web technologies: HTML, DOM, JS, three.js, WebVR, WebGL) You can think of A-Frame as a theatre play or a movie: You’ll have a scene, some light, a](https://reader035.vdocument.in/reader035/viewer/2022071001/5fbdc8233e12c1243d483e26/html5/thumbnails/32.jpg)
Web VR (Web XR)
• WebVR: JavaScript API for creating immersive 3D/VR experiences in the browser
• More information: webvr.info webvr.rocks
Device that everybody has
5 $ Cardboard VR Glasses
![Page 33: Finding the key - Malwine(Using web technologies: HTML, DOM, JS, three.js, WebVR, WebGL) You can think of A-Frame as a theatre play or a movie: You’ll have a scene, some light, a](https://reader035.vdocument.in/reader035/viewer/2022071001/5fbdc8233e12c1243d483e26/html5/thumbnails/33.jpg)
The VR key
A-Frame
![Page 34: Finding the key - Malwine(Using web technologies: HTML, DOM, JS, three.js, WebVR, WebGL) You can think of A-Frame as a theatre play or a movie: You’ll have a scene, some light, a](https://reader035.vdocument.in/reader035/viewer/2022071001/5fbdc8233e12c1243d483e26/html5/thumbnails/34.jpg)
A-FrameWeb framework for building virtual reality experiences
(Using web technologies: HTML, DOM, JS, three.js, WebVR, WebGL)
![Page 35: Finding the key - Malwine(Using web technologies: HTML, DOM, JS, three.js, WebVR, WebGL) You can think of A-Frame as a theatre play or a movie: You’ll have a scene, some light, a](https://reader035.vdocument.in/reader035/viewer/2022071001/5fbdc8233e12c1243d483e26/html5/thumbnails/35.jpg)
You can think of A-Frame as a theatre play or a movie:
You’ll have a scene, some light, a camera and
then you’ll have objects you put in the scene.
Martin Splitt@g33konaut
Archilogic & 3d.io
Quoted from Modern Web Podcast
![Page 36: Finding the key - Malwine(Using web technologies: HTML, DOM, JS, three.js, WebVR, WebGL) You can think of A-Frame as a theatre play or a movie: You’ll have a scene, some light, a](https://reader035.vdocument.in/reader035/viewer/2022071001/5fbdc8233e12c1243d483e26/html5/thumbnails/36.jpg)
Out of the box• Scene • Light • Camera • Primitives, like boxes, spheres, planes, etc.
• Entity-Component-System
• A-Frame works with React, Vue.js, Angular, d3.js, and jQuery
![Page 37: Finding the key - Malwine(Using web technologies: HTML, DOM, JS, three.js, WebVR, WebGL) You can think of A-Frame as a theatre play or a movie: You’ll have a scene, some light, a](https://reader035.vdocument.in/reader035/viewer/2022071001/5fbdc8233e12c1243d483e26/html5/thumbnails/37.jpg)
Example
![Page 38: Finding the key - Malwine(Using web technologies: HTML, DOM, JS, three.js, WebVR, WebGL) You can think of A-Frame as a theatre play or a movie: You’ll have a scene, some light, a](https://reader035.vdocument.in/reader035/viewer/2022071001/5fbdc8233e12c1243d483e26/html5/thumbnails/38.jpg)
<!DOCTYPE html>
<html>
<head>
<script src="https://aframe.io/releases/0.7.0/aframe.min.js"></script>
</head>
<body>
<a-scene>
<a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9"></a-box>
<a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E"></a-sphere>
<a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D"></a-cylinder>
<a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane>
<a-sky color="#ECECEC"></a-sky>
</a-scene>
</body>
</html>
![Page 39: Finding the key - Malwine(Using web technologies: HTML, DOM, JS, three.js, WebVR, WebGL) You can think of A-Frame as a theatre play or a movie: You’ll have a scene, some light, a](https://reader035.vdocument.in/reader035/viewer/2022071001/5fbdc8233e12c1243d483e26/html5/thumbnails/39.jpg)
<!DOCTYPE html>
<html>
<head>
<script src="https://aframe.io/releases/0.7.0/aframe.min.js"></script>
</head>
<body>
<a-scene>
<a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9"></a-box>
<a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E"></a-sphere>
<a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D"></a-cylinder>
<a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane>
<a-sky color="#ECECEC"></a-sky>
</a-scene>
</body>
</html>
![Page 40: Finding the key - Malwine(Using web technologies: HTML, DOM, JS, three.js, WebVR, WebGL) You can think of A-Frame as a theatre play or a movie: You’ll have a scene, some light, a](https://reader035.vdocument.in/reader035/viewer/2022071001/5fbdc8233e12c1243d483e26/html5/thumbnails/40.jpg)
<!DOCTYPE html>
<html>
<head>
<script src="https://aframe.io/releases/0.7.0/aframe.min.js"></script>
</head>
<body>
<a-scene>
<a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9"></a-box>
<a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E"></a-sphere>
<a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D"></a-cylinder>
<a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane>
<a-sky color="#ECECEC"></a-sky>
</a-scene>
</body>
</html>
![Page 41: Finding the key - Malwine(Using web technologies: HTML, DOM, JS, three.js, WebVR, WebGL) You can think of A-Frame as a theatre play or a movie: You’ll have a scene, some light, a](https://reader035.vdocument.in/reader035/viewer/2022071001/5fbdc8233e12c1243d483e26/html5/thumbnails/41.jpg)
<!DOCTYPE html>
<html>
<head>
<script src="https://aframe.io/releases/0.7.0/aframe.min.js"></script>
</head>
<body>
<a-scene>
<a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9"></a-box>
<a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E"></a-sphere>
<a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D"></a-cylinder>
<a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane>
<a-sky color="#ECECEC"></a-sky>
</a-scene>
</body>
</html>
![Page 42: Finding the key - Malwine(Using web technologies: HTML, DOM, JS, three.js, WebVR, WebGL) You can think of A-Frame as a theatre play or a movie: You’ll have a scene, some light, a](https://reader035.vdocument.in/reader035/viewer/2022071001/5fbdc8233e12c1243d483e26/html5/thumbnails/42.jpg)
<!DOCTYPE html>
<html>
<head>
<script src="https://aframe.io/releases/0.7.0/aframe.min.js"></script>
</head>
<body>
<a-scene>
< a-box position="-1 0.5 -3" rotation="0 45 0" color=“#4CC3D9" >< /a-box >
<a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E"></a-sphere>
<a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D"></a-cylinder>
<a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane>
<a-sky color="#ECECEC"></a-sky>
</a-scene>
</body>
</html>
Custom Element
![Page 43: Finding the key - Malwine(Using web technologies: HTML, DOM, JS, three.js, WebVR, WebGL) You can think of A-Frame as a theatre play or a movie: You’ll have a scene, some light, a](https://reader035.vdocument.in/reader035/viewer/2022071001/5fbdc8233e12c1243d483e26/html5/thumbnails/43.jpg)
<a-entity
geometry="primitive: box; width: 3”
position="-1 0.5 -3"
rotation="0 45 0"
material="color: #4CC3D9">
</a-entity>
Entity-Component-System
![Page 44: Finding the key - Malwine(Using web technologies: HTML, DOM, JS, three.js, WebVR, WebGL) You can think of A-Frame as a theatre play or a movie: You’ll have a scene, some light, a](https://reader035.vdocument.in/reader035/viewer/2022071001/5fbdc8233e12c1243d483e26/html5/thumbnails/44.jpg)
var sceneEl = document.querySelector('a-scene');
AFRAME.registerComponent('do-something-once-loaded', {
init: function () {
// This will be called after the entity has properly attached and loaded.
console.log('I am ready!');
}
});
var entityEl = document.createElement('a-entity');
entityEl.setAttribute('do-something-once-loaded', '');
sceneEl.appendChild(entityEl);
How to hook in with
JavaScript?
![Page 45: Finding the key - Malwine(Using web technologies: HTML, DOM, JS, three.js, WebVR, WebGL) You can think of A-Frame as a theatre play or a movie: You’ll have a scene, some light, a](https://reader035.vdocument.in/reader035/viewer/2022071001/5fbdc8233e12c1243d483e26/html5/thumbnails/45.jpg)
<!DOCTYPE html>
<html>
<head>
<script src="https://aframe.io/releases/0.7.0/aframe.min.js"></script>
</head>
<body>
<a-scene>
<a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9"></a-box>
<a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E"></a-sphere>
<a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D"></a-cylinder>
<a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane>
<a-sky color="#ECECEC"></a-sky>
</a-scene>
</body>
</html>
This is everything
you need to know!
![Page 46: Finding the key - Malwine(Using web technologies: HTML, DOM, JS, three.js, WebVR, WebGL) You can think of A-Frame as a theatre play or a movie: You’ll have a scene, some light, a](https://reader035.vdocument.in/reader035/viewer/2022071001/5fbdc8233e12c1243d483e26/html5/thumbnails/46.jpg)
Why is A-Frame great?Easy to get started, designed for easy access
A-Frame School with glitch.com
Examples, Documentation, Slack & Community
A-Frame Inspector
Community components e.g. physics, environment, controller support, particles, waves, animation
Super neat for prototyping
![Page 47: Finding the key - Malwine(Using web technologies: HTML, DOM, JS, three.js, WebVR, WebGL) You can think of A-Frame as a theatre play or a movie: You’ll have a scene, some light, a](https://reader035.vdocument.in/reader035/viewer/2022071001/5fbdc8233e12c1243d483e26/html5/thumbnails/47.jpg)
My A-Frame ProjectAn exhibition: A-Frame, React and Redux
wit-exhibition.github.io (in German, might be translated soon)
![Page 49: Finding the key - Malwine(Using web technologies: HTML, DOM, JS, three.js, WebVR, WebGL) You can think of A-Frame as a theatre play or a movie: You’ll have a scene, some light, a](https://reader035.vdocument.in/reader035/viewer/2022071001/5fbdc8233e12c1243d483e26/html5/thumbnails/49.jpg)
This door opens!Virtual RealitySports Music
![Page 50: Finding the key - Malwine(Using web technologies: HTML, DOM, JS, three.js, WebVR, WebGL) You can think of A-Frame as a theatre play or a movie: You’ll have a scene, some light, a](https://reader035.vdocument.in/reader035/viewer/2022071001/5fbdc8233e12c1243d483e26/html5/thumbnails/50.jpg)
You can do it!• You can provide keys!
• You can open doors for other people!
• You might change someones life for the better!
![Page 51: Finding the key - Malwine(Using web technologies: HTML, DOM, JS, three.js, WebVR, WebGL) You can think of A-Frame as a theatre play or a movie: You’ll have a scene, some light, a](https://reader035.vdocument.in/reader035/viewer/2022071001/5fbdc8233e12c1243d483e26/html5/thumbnails/51.jpg)
Thank you!