three.js
Top left Add interest to
your scenes by creating a
ground texture
Top right Adjusting opacity
allows you to make the
video translucent
Bottom left Wrapping
video to a curved screen
can be used for many types
of projects
Bottom right Map a
360-degree video to a
sphere to enable visitors
to become immersed in
a worldmat = new THREE.MeshBasicMaterial({map:texture,opacit
y:.5,transparent:true});
STEP 19: APPLY THE VIDEO TO A CURVED
PLANE
It can be useful to wrap video textures around curved
planes to give a cool massive screen look or a stylised
effect for your project. Try out this code to wrap your
video onto a curved screen:
var mesh = new THREE.Mesh( new THREE.
SphereBufferGeometry( 100*2.5, 6, 3, 4.41,.6,1.4,.3), mat);
mesh.position.z=1100;
mesh.scale.set(-1,1,1);
STEP 20: VIDEO TO A SPHERE
Another useful shape to apply video to is a sphere.
In this case try using a 360-degree video, if you
have one available. This is a style of video that
is filmed specifically to wrap onto spheres. It is
created using a special multi-directional camera,
which is composed of many cameras to cover all
directions. Update your video tag in the HTML to
use a 360-degree video as the source. Then update
your mesh with the sphere shape.
You can grab sample videos from here to test them
out: https://www.mettle.com/360vr-master-series-free-
360-downloads-page/.
var mesh = new THREE.Mesh( new THREE.
SphereBufferGeometry( 250,30,30 ), mat);
mesh.rotation.y=Math.PI/180*-90;STEP 21: MOVE CAMERA INSIDE SPHERE
FOR 360-DEGREE VIDEO
Without having to make any updates to your code,
you should be able to zoom into the sphere and look
around. By placing your camera inside a sphere
with video mapped to it like this, you now have
360-degree video! You could create a series of these
spheres and allow users to travel from sphere to
sphere as they explore a forest, a new world or a
complete a home tour.WRAPPING UP
By applying video that can play on any shape, you
can add surface-level detail and interest to your
elements that would be far too complex to try
animating in real time. You can create 360-degree
video experiences that even work great on mobile.
You can also create VR setups with two cameras,
allowing users to feel like they are sitting in a
theatre watching a movie (just like our video plane)
and so much more. The possibilities with this are
endless. Hopefully this tutorial gives you a great
starting point to begin creating some of your own
video textures!