Video Resource Dives into 3D World with Three.js

Video texture can manipulate as 3D blocks by mouse

Background

The example I made a choice from Three.js repository is a video material. Using the material, We can import the video image into a 3D world. In this article, I will explain how I customize the example to my own idea. The key logic is a UV map for a geometry. Therefore, It may be informative at this example as well.

a uv mapping example

Work Flow

* Create a scene, light, camera
* Create material
 - Get video resource from video tag
 - assign video resource with material
* Create geometries in grid shape
 - change uv map
* Bind mouse over event to break video resolusions aroud its position
* Watch intersected object according to mouse

Highlight Code

As I told in the top of the passage, the core code in my demonstration is to create a UV map in a geometry. But before going into the creation, take a look at how the video resource convert into video material. It is simply using THREE.VideoTexture .

video = document.getElementById('video');
texture = new…