PROJECTS three.

js

A B O U T T HE A U T H O R
RICHARD MAT T K A
w: richardmattka.com
t: @synergyseeker
job: Creative director,
designer, developer
areas of expertise:
Shaders, VFX, WebGL

THREE.JS

ADD VIDEO TEXTURES

TO 3D OBJECTS
Richard Mattka shows you how to use video as textures for your 3D
objects, create 360-degree video and apply d#ydulhw|#ri#hļhfwv

In this article we’ll be looking at how you can
add video textures to your 3D scenes. You do
this by loading them as a special texture class and
applying them to various 3D meshes. The ability to
update the texture of each animation frame enables
your video to play seamlessly.
Using a 3D plane, you can easily create a movie
theatre scene, a video playing on a television
screen or detailed information panels for a sci-fi 3D
interface. You can modify the geometry of a plane
to curve it, giving it a unique look like the inside of
a helmet, reminiscent of an Iron-Man-style HUD.
We’ll do this in the tutorial just ahead!
Another great use for video is the ability to pre-
render animations in tools like Cinema 4D or After
Effects and then easily integrate them into your
scene. Complex animations could play on various
planes or spheres, simulating virtually any type of
effect you might need.
You can layer video on top of another material
to create effects that look as though animations
are under glass. You could fill an aquarium with
fish, have beautiful animated skies or detailed
backgrounds. And with the new playsinline option for
video elements, this will work on mobile devices too!
WEBGL 3D FOR THE WEB
WebGL is a graphics language designed for the web. It
is a subset of OpenGL but optimised for the needs and
limitations of the browser. It can create amazing 3D
scenes combining models, lighting, geometry, GLSL
shaders and interactivity all inside an HTML <canvas>
element. WebGL is also a web-standard. So, whether
your goal is mobile or desktop, it will get it done.

76 march 2020
 three.js

Because 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 Top Video plays on this
curved plane in the award-
It’s an idea to run web-based code on a web server, winning War of 1996
either locally or remotely. If not, you may run into // code goes here website
cross domain or origin restrictions loading assets. </script>
Above Three.js is used in
You can use simple tools like MAMP award-winning websites
(https://www.mamp.info/en/) for both Windows and </body> and experiences found
across the web
Mac, that install with a few clicks. You can also check </html>
out the three.js ‘How To Run Things Locally’ docs
here: https://threejs.org/docs/#manual/en/introduction/ STEP 2: ADD THREE.JS LIBRARY AND
How-to-run-things-locally. ORBIT CONTROLS
In the head of your HTML, add the three.js library
STEP 1: CREATE BASIC HTML FILE and the OrbitControls.js file. You can download
To get started, you should create a simple HTML file the latest version of three.js from the repository
with some CSS to ensure it fills your screen. Start by here: https://github.com/mrdoob/Three.js/. The
adding the following code to a new HTML file: OrbitControls.js file is located in the examples folder
of the same repo. We’ve made a sub folder called
<!DOCTYPE html> ‘libs’ in our project to hold these two files.
<html>
<head> <script src=”libs/three.min.js”></script>
<title>NET - Video Textures</title> <script src=”libs/OrbitControls.js”></script>
<style>
html, body { margin: 0; padding:0; overflow: Note: This project works with the latest build of
hidden; } three.js (r111).
</style>
</head> STEP 3: ADD VIDEO TAG
<body> For now, add the video tag to the body. You could also
create a video element purely using JavaScript if you
<script> wish, depending on your project needs.

march 2020 77