如何将视频映射到three.js几何体？

Question

前言 我已经创建了一个超级人为的例子，说明了我想要使用3js几何和视频创建的内容。 我确定它不需要html5视频，但演示使用它来实现可见性。

这是由

托管的实时代码

codepen.io

问题： 我是webGL和相关库（3js）的新手。

问题： 如何使用3js将video映射到球体上？

JS

  // renderer
  var renderer = new THREE.WebGLRenderer();
  renderer.setSize(window.innerWidth, window.innerHeight);
  document.body.appendChild(renderer.domElement);

  // camera
  var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000);
  camera.position.z = 500;

  // scene
  var video, texture; 
  video = document.getElementById( 'video' );

  var scene = new THREE.Scene();
  texture = new THREE.VideoTexture( video );
  texture.minFilter = THREE.LinearFilter;
  texture.magFilter = THREE.LinearFilter;
  texture.format = THREE.RGBFormat;

 //sphere
  var sphere = new THREE.Mesh(new THREE.SphereGeometry(150, 100, 100), new THREE.MeshNormalMaterial());
  sphere.overdraw = true;
  scene.add(sphere);

  renderer.render(scene, camera);

HTML

  <!--sphere gets placed here -->
    <div id="container"></div>
    <!-- example video -->
    <video id="video" width="400" src="http://avideos.5min.com//415/5177415/517741401_4.mp4#t=20"autoplay muted loop></video>

Answer 1

这是我从其他帖子中所吸收的内容：

        // setting up the renderer
        var renderer = new THREE.WebGLRenderer();
        renderer.setSize(window.innerWidth, window.innerHeight);

        var container = document.createElement('div');
        document.body.appendChild( container );
        container.appendChild( renderer.domElement );
        // creating a new scene
            // SCENE
        scene = new THREE.Scene();
        // CAMERA
        var SCREEN_WIDTH = window.innerWidth, SCREEN_HEIGHT = window.innerHeight;
        var VIEW_ANGLE = 100, ASPECT = SCREEN_WIDTH / SCREEN_HEIGHT, NEAR = 0.1, FAR = 20000;
        var camera = new THREE.PerspectiveCamera( VIEW_ANGLE, ASPECT, NEAR, FAR);
        camera.target = new THREE.Vector3(0, 0, 0);

        camera.position.set(0,150,400);
        camera.lookAt(scene.position);  

        scene.add(camera);

        var video = document.getElementById( 'myVideo' );

        //sorry, not 100% sure why this is necessary -eg why the renderer doesn't automatically update the video texture in render()
        videoImageContext = videoImage.getContext( '2d' );
        // background color if no video present
        videoImageContext.fillStyle = '#000000';
        videoImageContext.fillRect( 0, 0, videoImage.width, videoImage.height );

        videoTexture = new THREE.Texture( video );
        videoTexture.minFilter = THREE.LinearFilter;
        videoTexture.magFilter = THREE.LinearFilter;

        var movieMaterial = new THREE.MeshBasicMaterial( { map: videoTexture,overdraw: true } );

        // the geometry on which the movie will be displayed;
        //      movie image will be scaled to fit these dimensions.
        var sphere = new THREE.SphereGeometry(100, 100, 40);
        sphere.applyMatrix(new THREE.Matrix4().makeScale(-1, 1, 1));
        var movieScreen = new THREE.Mesh( sphere, movieMaterial );
        scene.add(movieScreen);


           render();



        function render(){

            requestAnimationFrame(render);
            if ( video.readyState === video.HAVE_ENOUGH_DATA ) 
            {
                videoImageContext.drawImage( video, 0, 0 );
                if ( videoTexture ) 
                    videoTexture.needsUpdate = true;
            }
            // calling again render function
            renderer.render(scene, camera);

        }