In our last tutorial, we set up our node js server. In this tutorial, we build on it and learn how to send messages to and from our server, for this we are using node js and socket IO. The first thing we want to do is install socket.io, we do this using our computer’s…
Setting up and Testing AFrame With Node JS
So a big struggle for me and many others is when programming with AFrame you cant load assets from your computer, stuff like images or 3d models. You can only get assets if they are hosted on a website. While this is easily fixed by developing on Git-Hub, Glitch, Nocities, or Surge, (All recommended by…
How to make a VR red dot gun sight in unity
So you want to make a VR shooter and you realized that generic gun sights don’t work that well in VR. The red dot sight is much better for VR since it is a lot easier to use especially if you are like me an have a Windows MR headset where you sometimes have to deal with twitchy…
How To Set Up Unity For Mixed Reality Development
So you not only want to escape reality, you want to make your own reality. I know how you feel. To get started you are going to need the latest version of unity found here, and the Mixed Reality Toolkit by Microsoft found here. Now you can also make Hollow lens experiences with this toolkit…
How to use a camera’s output as a texture in AFrame
Here is a quick example so you can see what I mean: ^you can move with wasd^ loosely based on this example here. Code here: <script src=”https://aframe.io/releases/0.8.0/aframe.min.js”></script> <script> AFRAME.registerComponent(‘spectator’,{ ‘schema’: { canvas: { type: ‘string’,…
How to get input from VR controllers in Aframe
Hi everyone, just putting out a quick article on this because I could not find anything on how to use the joystick or touchpad on my Windows Mixed Reality controllers, so I thought I would just show you how I did It. And just a quick disclaimer that this should work for Oculus Rift and…
Deep Dive: The Basics of How To Use Aframe Entities
The <a-entity> tag is the basic building block of Aframe, therefore it is important to understand how it works. The <a-entity> tag (can I just say entity?) is what you are going to use to put anything into your scene, from the basic cube all the way to a cursor. The first thing we want…
Deep Dive: How Aframe Is structured
Aframe Is an easy, effective, and free way to program Web VR. It is based on three.js, but it is its own language programmed in a completely different way, though you can still access all the three.js functionality. The beauty of AFrame is you can make a fully interactive VR room compatible with any internet…
How To Teleport In The Mobile Version of Aframe
So far I have not seen teleportation used in any mobile VR experiences, and I don’t see why. We should be using it more, I don’t know about you but I prefer being able to control my own moment instead of being along for the ride. But that’s why I made this tutorial about my favorite method: Waypoints They are my…
How To Make And Use Aframe Components
What is a component? And why would you want to make one? A component is something that even without realizing it you use every time you code in HTML. Let me give you a few examples from Aframe: id=”thisId” or location=”0 1.6 0″ or even wasd-controls. These are all components. So why would you want to…