three.js
Top Video plays on this
curved plane in the award-
winning War of 1996
website
Above Three.js is used in
award-winning websites
and experiences found
across the webBecause WebGL can take advantage of the
computer’s GPU, you can render complex, detailed
models, reflections, environment maps and
shadows, all in real time. Websites, games and apps
can enable users to direct the action, move the
camera or navigate 3D worlds.
THREE.JS 3D FOR THE WEB
To make your workflow efficient, it’s wise to abstract
away the low-level WebGL programming. There
are several great WebGL libraries out there but one
of the best and easiest to use is three.js. It is an
open-source 3D library created by Ricardo Cabello,
filled with loads of incredible built-in features and
lightning-fast performance. It’s perfect for your
WebGL projects.
CREATE VIDEO TEXTURES FOR 3D
In this tutorial, we’ll be using three.js. Everything
you need is included in the latest version. You might
want to grab a few favourite videos in mp4 format
and a 360-degree video as well to follow along.
A basic understanding of how to use three.js would
be great but we’ll walk through the steps, assuming
no prior knowledge. Let’s get started!
BEFORE YOU BEGIN: SET UP A WEB
SERVER
It’s an idea to run web-based code on a web server,
either locally or remotely. If not, you may run into
cross domain or origin restrictions loading assets.
You can use si mple to ols l i ke M A M P
(https://www.mamp.info/en/) for both Windows and
Mac, that install with a few clicks. You can also check
out the three.js ‘How To Run Things Locally’ docs
here: https://threejs.org/docs/#manual/en/introduction/
How-to-run-things-locally.
STEP 1: CREATE BASIC HTML FILE
To get started, you should create a simple HTML file
with some CSS to ensure it fills your screen. Start by
adding the following code to a new HTML file:
<!DOCTYPE html>