AR on the Web Masterclass: Code Samples

AR on the Web Masterclass: Only Code Samples (no videos)

If you want a robust set of web AR examples without the tutorial videos, download the 38 app samples from our premiere courses "AR on the Web Masterclass". All the code is extensively documented and easy to follow.

Buy now

What's included

More than 38 code samples that are part of our premiere course AR on the Web Masterclass: from Zero to Expert.

Code bundles

Core set: app samples using WebXR and Three.js. Includes Javascript, HTML, and CSS code.
Multiplayer example: an example of how to setup a multiplayer environment with WebXR. Includes server side code that incorporates Socket.io for client-server communication and an example app.

Developer environment setup (optional): Two videos are included to help you setup an easy developer environment without having to configure any kind of local server.

Our commitment to you: We'll continue to update these code samples. New set of WebXR capabilities? We'll upload new examples that you can download for free. New version of Three.js that breaks things? Don't worry, we'll update the examples.

Keep learning if you like what you see

If after looking through the code you want to check out the corresponding lecture videos in the Masterclass, just email us and we'll give you a discount so you can just pay for the difference ($60).

Sample Code and Developer Environment

Sample code

Preview

Code downloading troubleshooting

Sample code zip

Assets and media folder zip (optional)

Sample multiplayer code

Preview

Sample multiplayer code zip

Developer environment and Glitch

Preview

Code samples

Creating a basic Three.js scene: 00.basic_scene.html
Adding WebXR to the basic scene: 01.basic_scene_webxr.html
Basic gui: 02.basic_gui.html
Advanced gui: 03.advanced_gui.html
Frame rate: 04.framerate_gui.html
Mobile debugging: 05.mobile_debugging.html
More objects: 06.more_objects.html
3D Model: 07.model.html
3D Model - glb: 08.model_glb.html
3D Model - obj: 09.model_obj.html
3D Model - fbx: 10.model_fbx.html
Usdz viewer iOS: 11.model_usdz_ios.html
Usdz exporter: 11.usdz_exporter.html
More objects animated: 12.more_objects_animated.html
Tween animation: 13.tween_animation.html
Orbit animation: 14.orbit_animation.html
Model animated: 15.model_animated.html
Advanced model animation: 16.advanced_model_animation.html
Touch gestures: 17.touch_gestures.html
Advanced touch gestures: 18.advanced_touch_gestures.html
Hit testing - only reticle: 19.hit_testing_only_reticle.html
Hit testing: 20.hit_testing.html
Image: 21.image.html
Transparent Image: 22.image_transparent.html
Video: 23.video.html
Video transparent: 24.video_transparent_android.html
Video transparent: 24.video_transparent_ios.html
Spatial audio with Resonance library: 25.spatial_audio_resonance.html
Spatial audio with Positional audio: 26.spatial_audio_positional.html
Spatial audio with Tone.js: 27.spatial_audio_tonejs.html
Lighting: 28.lighting.html
Ground plane: 29.ground_plane.html
Shadows: 30.shadows.html
Lighting estimation: 31.lighting_estimation.html
Camera position: 32.camera_position.html
Image targets: 33.image_targets.html
Raycasting: 34.raycasting.html
Drawing: 35.drawing.html

Testimonials

Don't take our word for it! See what other students have said.

Be the first to know!

Get course updates, discounts, and more by joining our newsletter.