Three.js & A-frame

Three.js

What is it?

Three.js is a library that makes WebGL easy to use -3D in the browser.

first released by Ricardo Cabello to GitHub in April 2010.

What do we need?

• Scene.
• Camera.
• Objects.
• Materials.
• Renderer.

“The Aviator”

so what?

Canvas.

Scene & Camera.

Renderer

Object & Materials.

Shading models.

Render.

Shaders 101 - Intro to Shaders

Animations.

Result.

Three.js

VR

=)

A-Frame

What's up with

A-Frame

a WebVR framework for building virtual reality experiences

The original work behind A-Frame involved Diego Marcos, Josh Carpenter, Casey Yee, Chris Van Wiemeersch, and Kevin Ngo.

Interesting stuff

•  It is primarily maintained by Mozilla and the WebVR community.
• A-Frame was created in order to allow web developers and designers to author 3D and VR experiences with HTML without having to know WebGL.
• It is an entity component system framework for Three.js .

CODE TASTE

Result

A-frame

Demo 360 Image Transition

Tips.

• WebVR
• WebGL
• Render Engines
• Unity
• Check for HMD(head mounted displays availible)

Examples at:

https://gitlab.com/Blackzen/ExamplesThreejsAframe/tree/master