在已加载的.obj上应用VideoTexture不能使用three.js

Question

我加载了一个从Sketchup导出的.obj，它代表一个简单的矩形。 我想在加载的.obj的正面上应用视频纹理，但是它不起作用，并且在控制台上没有错误。我很困，可能是紫外线的问题，但是我什么也找不到。我尝试使用VideoTexture，但存在相同的问题。 这是我的代码：

    <div id="ThreeJS" style="position: absolute; left:0px; top:0px"></div>

    <video id="video" autoplay muted loop crossOrigin="anonymous" webkit-playsinline style="display:none">
        <source src="assets/output.mp4" type='video/mp4'>
    </video>


    <script>
        var AMOUNT = 100;
        var container;
        var camera, scene, renderer;
        var video, image, imageContext,
        imageReflection, imageReflectionContext, imageReflectionGradient,
        texture, textureReflection;
        var mesh;
        var mouseX = 0;
        var mouseY = 0;
        var windowHalfX = window.innerWidth / 2;
        var windowHalfY = window.innerHeight / 2;

        init();
        animate();

        function init() {
            container = document.createElement( 'div' );

            document.body.appendChild( container );

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

            scene = new THREE.Scene();
            scene.background = new THREE.Color( 0xf0f0f0 );

            video = document.createElement( 'video' );
            // video.id = 'video';
            // video.type = ' video/ogg; codecs="theora, vorbis" ';
            video.src = "assets/output.mp4";
            video.load(); // must call after setting/changing source
            video.muted = true;
            video.play();
            //
            image = document.createElement( 'canvas' );
            image.width = 480;
            image.height = 204;
            imageContext = image.getContext( '2d' );
            imageContext.fillStyle = '#000000';
            imageContext.fillRect( 0, 0, 480, 204 );
            texture = new THREE.Texture( image );

            var material = new THREE.MeshBasicMaterial( { map: texture, overdraw: 0.5 } );
            imageReflection = document.createElement( 'canvas' );
            imageReflection.width = 480;
            imageReflection.height = 204;
            imageReflectionContext = imageReflection.getContext( '2d' );
            imageReflectionContext.fillStyle = '#000000';
            imageReflectionContext.fillRect( 0, 0, 480, 204 );
            imageReflectionGradient = imageReflectionContext.createLinearGradient( 0, 0, 0, 204 );
            imageReflectionGradient.addColorStop( 0.2, 'rgba(240, 240, 240, 1)' );
            imageReflectionGradient.addColorStop( 1, 'rgba(240, 240, 240, 0.8)' );

            textureReflection = new THREE.Texture( imageReflection );
            var materialReflection = new THREE.MeshBasicMaterial( { map: textureReflection, side: THREE.BackSide, overdraw: 0.5 } );

            // var plane = new THREE.PlaneBufferGeometry( 480, 204, 4, 4 );
            // mesh = new THREE.Mesh( plane, material );
            // mesh.scale.x = mesh.scale.y = mesh.scale.z = 1;
            // scene.add(mesh);
            // mesh = new THREE.Mesh( plane, materialReflection );
            // mesh.position.y = -306;
            // mesh.rotation.x = - Math.PI;
            // mesh.scale.x = mesh.scale.y = mesh.scale.z = 1.5;
            // scene.add( mesh );
            // this works

            //model
        var loader = new THREE.OBJLoader();
        loader.load( 'assets/model3D.obj', function (object) {
            var instance;
          object.traverse( function (child) {
              if ( child instanceof THREE.Mesh ) {
                child.material = materialReflection;
                child.material.needsUpdate = true;
                // this doesn't works
              }
            });

          object.position.y = - 80;
          scene.add( object );
        });


            renderer = new THREE.CanvasRenderer();
            renderer.setPixelRatio( window.devicePixelRatio );
            renderer.setSize( window.innerWidth, window.innerHeight );
            container.appendChild( renderer.domElement );

            document.addEventListener( 'mousemove', onDocumentMouseMove, false );
            //
            window.addEventListener( 'resize', onWindowResize, false );
        }
        function onWindowResize() {
            windowHalfX = window.innerWidth / 2;
            windowHalfY = window.innerHeight / 2;
            camera.aspect = window.innerWidth / window.innerHeight;
            camera.updateProjectionMatrix();
            renderer.setSize( window.innerWidth, window.innerHeight );
        }
        function onDocumentMouseMove( event ) {
            mouseX = ( event.clientX - windowHalfX );
            mouseY = ( event.clientY - windowHalfY ) * 0.2;
        }
        //
        function animate() {
            requestAnimationFrame( animate );
            render();
        }
        function render() {
            camera.position.x += ( mouseX - camera.position.x ) * 0.05;
            camera.position.y += ( - mouseY - camera.position.y ) * 0.05;
            camera.lookAt( scene.position );
            if ( video.readyState === video.HAVE_ENOUGH_DATA ) {
                imageContext.drawImage( video, 0, 0 );
                if ( texture ) texture.needsUpdate = true;
                if ( textureReflection ) textureReflection.needsUpdate = true;
            }
            imageReflectionContext.drawImage( image, 0, 0 );
            imageReflectionContext.fillStyle = imageReflectionGradient;
            imageReflectionContext.fillRect( 0, 0, 480, 204 );
            renderer.render( scene, camera );
        }
    </script>

这里是我的.obj：

# Alias OBJ Model File
# Exported from SketchUp, (c) 2000-2012 Trimble Navigation Limited
# File units = meters

g Mesh1 Model

usemtl FrontColor
v 12.4942 0 7.12249
vt 491.898 280.413
vn 0 -1 0
v 1.26421 0 7.12249
vt 49.7719 280.413
v 1.26421 0 0.472495
vt 49.7719 18.6021
v 12.4942 0 0.472495
vt 491.898 18.6021
f 1/1/1 2/2/1 3/3/1 4/4/1

ps：我是Three.js的初学者