Projector the video

I want to projector the video to the model, but i have no idea. the result like the picure.image.Thanks.

Do you mean something like:

Thank you first. I have did like already. Look this picture below carefully, it projector the video to the scene.

And like this, the video will show at grid.

I have no idea to do like this with three.js. Thanks.

Not sure what you want to achieve. Try the modified code.
( adapted from )
The video can be placed on different geometries.

<!DOCTYPE html>

  <title> Video </title>
  <meta charset="utf-8" />

<script src=""></script>

<video id="video" autoplay loop crossOrigin="anonymous" webkit-playsinline style="display:none">
  <source src="" type='video/ogg; codecs="theora, vorbis"'>
  <source src="" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>

var camera, scene, mesh, renderer;


function init() {

    camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 0.01, 10 );
    camera.position.set( 0, 0, 2 );

    scene = new THREE.Scene();
    var video = document.getElementById( 'video' );
    var texture = new THREE.VideoTexture( video );
    texture.minFilter = THREE.LinearFilter;
    texture.magFilter = THREE.LinearFilter;
    texture.format = THREE.RGBFormat;
    var geometry = new THREE.BoxBufferGeometry( 2, 1, 0.1 );
	var material1 = new THREE.MeshBasicMaterial( { color: 0x0000ff, side: THREE.DoubleSide } );
	var material2 = new THREE.MeshBasicMaterial( { color: 0xff00ff, side: THREE.DoubleSide } );
	var material3 = new THREE.MeshBasicMaterial( { color: 0xffff00, side: THREE.DoubleSide } );
	var materialTransparent =  new THREE.MeshBasicMaterial( { transparent: true, opacity: 0, wireframe: true, side: THREE.DoubleSide} );
   	var materialVideo = new THREE.MeshBasicMaterial( { map: texture , side: THREE.DoubleSide } );
	var materials = [ material1, material1, material2, material2, materialTransparent, materialVideo ]

    mesh = new THREE.Mesh( geometry, materials );
    scene.add( mesh );

    renderer = new THREE.WebGLRenderer( { antialias: true } );
    renderer.setSize( window.innerWidth, window.innerHeight );
    document.body.appendChild( renderer.domElement );


function animate() {

    requestAnimationFrame( animate );
	mesh.rotation.y +=0.01;
    renderer.render( scene, camera );



Textures can also be displayed on grids.

Thank you, hofk, anyway. This is not I want.

I want to draw a geometry like this picture. How can i do? Thanks!

Information, provided by @hofk, is enough to create the desired object.


// "screen"
var planeGeom = new THREE.PlaneBufferGeometry(8, 4, 4, 4).toGrid(); // .toGrid() method used here
planeGeom.translate(0, 0, 20);
var attrPosition = planeGeom.attributes.position;
var tempVector = new THREE.Vector3();
for (let i = 0; i < attrPosition.count; i++){
	tempVector.fromBufferAttribute(attrPosition, i).setLength(20);
  attrPosition.setXYZ(i, tempVector.x, tempVector.y, tempVector.z);
var plane = new THREE.LineSegments(planeGeom, new THREE.LineBasicMaterial({color: "yellow"}));

// "frustum"
var pyramidGeom = new THREE.BufferGeometry();
pyramidGeom.addAttribute('position', new THREE.BufferAttribute( new Float32Array(15), 3));
pyramidGeom.attributes.position.setXYZ(0, 0, 0, 0);
pyramidGeom.attributes.position.copyAt(1, attrPosition, 0);
pyramidGeom.attributes.position.copyAt(2, attrPosition, 4);
pyramidGeom.attributes.position.copyAt(3, attrPosition, 20);
pyramidGeom.attributes.position.copyAt(4, attrPosition, 24);
var pyramid = new THREE.LineSegments(pyramidGeom, new THREE.LineBasicMaterial({color: "red"}));

plane.position.set(0, 3, 0);

Thank you very much, @prisoner849 and @hofk . Actually, I want projector texture or material (video) to the model or scene,like pictures below.imageimageimage. Is anyway do can doind this ? Thanks verymuch.

:slight_smile: Devil hides in details.
Well, I don’t have a ready solution, but I have some thoughts about how to achieve the thing you want.

Yes , you are right. And I found link, @prisoner849 . Is it any usefully aboout this? And could you tell me your thoughts,thanks, from China.

Hmm… The example you’ve provided isn’t working for me. I have a bunch of warnings and error messages in the browser console.

@prisoner849 It does’t work for me either,but I check the demo’s source, and I found a js file.
image. The js file contents like this.

@prisoner849 I can’t understand all of code, but it looks working. How do you think ?

Is it always a plane, which you want to project a picture/video on?

@prisoner849 not on plane, project on scene. Thank you.

Seems we need to make us understand each other :slight_smile:
When I say “plane”, I mean it’s always a big flat surface.

I’ve been trying to find a method for doing this for some time, i had previously been using Away3D in flash, and they had a “Projective Texture Method” that did roughly what you want.

I havnt found a solution in threejs thus far.

Thanks @EFFalcon . I found this