3D/AR/VR Resources for A-Frame/three.js

Hey all,

I’ve been searching for a bit for quality learning resources to learn at least the basics of three.js, and I haven’t come across anything relatively comprehensive or very fleshed-out yet. (I’ll settle for A-Frame resources if you’ve found anything for that instead…) I’ve come across a couple of written tutorials, but I think I learn a lot better through videos–but if you have written resources, I’d love to investigate those as well! I saw Udacity’s VR Nanodegree, but I’m not interested in shelling out a bunch of money or learning Unity–I’d prefer to stick with a JS environment for now.


1 Like

Ack it’s bugging me so much that I can’t find the VR stuff I came across before. I don’t think I’ve seen a lot of video tutorials up yet since it’s fairly new? Hopefully next year we’ll see a lot more of them!

These ones are the ones I’ve been meaning to read though (mostly three.js):

  1. https://www.sitepoint.com/bringing-vr-to-web-google-cardboard-three-js/
  2. https://aerotwist.com/tutorials/getting-started-with-three-js/
1 Like

I’m also interested in this sort of thing. You can port Unreal and Unity games to HTML5/WebGL using emscripten, but the games turn into a bloated monstrosity that take forever to load, so I’ve been looking at more vanilla JS approaches. One that has jumped out at me is the Babylon.js engine. Unfortunately, their documentation isn’t a whole lot better than Three.js, but they do have an eight hour training video (that I haven’t had time to watch just yet): https://mva.microsoft.com/en-US/training-courses/introduction-to-webgl-3d-with-html5-and-babylon-js-8421?l=PjfDpUKz_4304984382

In a lot of the videos that I’ve seen, they had Babylon.js demo’s running a solid 55-60 fps, which is pretty much as good as you can do in a web browser. Unfortunately, you really want 90 fps for virtual reality, but Google has said that they want VR on Chrome so they’re pushing to hit that frame rate. We can only hope.

I don’t know much about A-Frame, but I’ll have to do some more research on that.

1 Like

This was on FrontEnd Focus and might be of interest since it’s an A-frame tutorial: https://24ways.org/2016/first-steps-in-vr/


A-Frame looks really simple and intuitive. Speed seems like an issue on most of the demo’s that I’ve seen, but I’ll probably play around with it over Christmas. It seems very interesting.

A-Frame is actually built on top of three.js, and is meant to be very easy to use. I think I want to start out by using three.js because I’m somewhat uncomfortable with the level of abstraction that A-Frame has when I super unfamiliar with everything still.

@jgsimmerman I have heard of Babylon.js, although my circles seem to like three.js/A-Frame more. I haven’t done quite enough research to figure out whether I prefer one or another, but I figured I’d pick one place to start and see what happened from there.

Thanks all for the resource recommendations! I’ll go through them over the next couple of days and see what I can glean. :grin: