使用视频作为正方体的纹理

示例

HTML

<!-- My scene -->
<canvas id="scene"></canvas>
<!-- Video used as texture -->
<video controls crossOrigin="Anonymous" muted autoplay playsinline>
  <source src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/127738/loremVideo.mp4"/>
</video>

<!--
  I created a collection of small examples in Three.js to understand very quickly the purpose of some functions.
  You can visit the 'website' of the entire collection of pens here : http://mamboleoo.be/learnThree/

  You can also see the collection in CodePen
  https://codepen.io/collection/DrxLEd/

  Do not hesitate to comment if there is something wrong (I'm still learning)

  Thanks !
-->

CSS

body,html{
  margin: 0;
  overflow: hidden;
}

video{
  position: absolute;
  z-index:1;
  opacity:1;
  top: 0;
  left: 0;
  width:150px;
}

JS

var renderer, scene, camera, cube, texture, canvas, ctx, video;

var ww = window.innerWidth,
	wh = window.innerHeight;

function init(){

	renderer = new THREE.WebGLRenderer({canvas : document.getElementById('scene')});
	renderer.setSize(ww,wh);

	scene = new THREE.Scene();

	camera = new THREE.PerspectiveCamera(50,ww/wh, 0.1, 10000 );
	camera.position.set(0,0,500);
	scene.add(camera);
  
  //Select the video element in the DOM
  video = document.querySelector("video");
  //Mute the sound of the video
  video.muted = true;
  //Loop the video to play it infinitely
  video.loop = true;
  video.crossOrigin = 'anonymous';
  //Add event listener to check when the video is enough loaded to be played
  video.addEventListener("canplay", onVideoReady);
  //Hack for mobile & tablet
  renderer.domElement.addEventListener("click", function(){
    video.play();
  });
}

var onVideoReady = function(){
    //Start the video
    video.play();
    //Create a canvas to draw the video on it
    canvas = document.createElement("canvas");
    //Get the context of the canvas
    ctx = canvas.getContext("2d");
    //Set the dimension of the canvas --> Should always be power of 2 (256,512,1024, etc)
    canvas.width = 512;
    canvas.height = 512;
  document.body.appendChild(canvas);
  canvas.style.position="absolute";
  canvas.style.top = "0px";
  canvas.style.right = "0px";
  canvas.style.width = "50px";
    
    //Create a plane in our scene
    createPlane();

    //Render the scene and start request animation frame
    render();
    
    //Remove the event listener on 'canplay' event
    video.removeEventListener("canplay", onVideoReady);
};
var createPlane = function(){

  //Create a texture from the canvas
  texture = new THREE.CanvasTexture(canvas);
  
	//Create a plane geometry
	var geometry = new THREE.BoxBufferGeometry(150,150,150);
  //Create a Basic material with the texture as map
	var material = new THREE.MeshBasicMaterial({
    map : texture
  });
  //Create a mesh from the geometry and the material
	cube = new THREE.Mesh(geometry, material);

	//Add the plane in the scene
	scene.add(cube);
};


var render = function () {
	requestAnimationFrame(render);
  
  //Draw the video in the canvas
  ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
  //Warn ThreeJs that the texture should be updated
  texture.needsUpdate = true;
  
  //Rotate the cube
  cube.rotation.x += 0.004;
  cube.rotation.y += 0.004;
  cube.rotation.z += 0.004;

	//Render the scene into the canvas
	renderer.render(scene, camera);
};

init();