使用IDEA运行教材<Three.js开发指南>的有关视频纹理贴图的例程，没有报错，但无法播放给的例程视频，能够加载网页界面和对应的mesh，但是无法播放视频。
<!DOCTYPE html>
<html>
<head>
<title>Video texture - non canvas</title>
<script type="text/javascript" src="../libs/three.js"></script>
<script type="text/javascript" src="../libs/stats.js"></script>
<script type="text/javascript" src="../libs/dat.gui.js"></script>
<style>
body {
/* set margin to 0 and overflow to hidden, to go fullscreen */
margin: 0;
overflow: hidden;
}
</style>
</head>
<body>
<div id="Stats-output">
</div>
<video id="video" style="display: none; position: absolute; left: 15px; top: 75px;"
src="../assets/movies/Big_Buck_Bunny_small.ogv" controls="true" autoplay="true"></video>
<!-- Div which will hold the Output -->
<div id="WebGL-output">
</div>
<!-- Javascript code that runs our Three.js examples -->
<script type="text/javascript">
var texture;
// once everything is loaded, we run our Three.js stuff.
function init() {
var stats = initStats();
// create a scene, that will hold all our elements such as objects, cameras and lights.
var scene = new THREE.Scene();
// create a camera, which defines where we're looking at.
var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
// create a render and set the size
var webGLRenderer = new THREE.WebGLRenderer();
webGLRenderer.setClearColor(new THREE.Color(0xEEEEEE, 1.0));
webGLRenderer.setSize(window.innerWidth, window.innerHeight);
webGLRenderer.shadowMapEnabled = true;
var video = document.getElementById('video');
texture = new THREE.VideoTexture(video);
var cube;
cube = createMesh(new THREE.BoxGeometry(22, 16, 0.2), "floor-wood.jpg");
cube.position.y = 2;
scene.add(cube);
// position and point the camera to the center of the scene
camera.position.x = 0;
camera.position.y = 1;
camera.position.z = 28;
camera.lookAt(new THREE.Vector3(0, 0, 0));
var ambiLight = new THREE.AmbientLight(0x141414);
scene.add(ambiLight);
var light = new THREE.DirectionalLight();
light.position.set(0, 30, 20);
scene.add(light);
// add the output of the renderer to the html element
document.getElementById("WebGL-output").appendChild(webGLRenderer.domElement);
// call the render function
var step = 0;
// var polyhedron = createMesh(new THREE.PolyhedronGeometry(vertices, faces, controls.radius, controls.detail));
// setup the control gui
var controls = new function () {
this.showVideo = false;
this.rotate = false;
this.showCanvas = function () {
if (controls.showVideo) {
$('#video').show();
} else {
$('#video').hide();
}
}
};
var gui = new dat.GUI();
gui.add(controls, "rotate");
gui.add(controls, "showVideo").onChange(controls.showCanvas);
render();
function createMesh(geom) {
var materialArray = [];
materialArray.push(new THREE.MeshBasicMaterial({color: 0x0051ba}));
materialArray.push(new THREE.MeshBasicMaterial({color: 0x0051ba}));
materialArray.push(new THREE.MeshBasicMaterial({color: 0x0051ba}));
materialArray.push(new THREE.MeshBasicMaterial({color: 0x0051ba}));
materialArray.push(new THREE.MeshBasicMaterial({map: texture}));
materialArray.push(new THREE.MeshBasicMaterial({color: 0xff51ba}));
var faceMaterial = new THREE.MeshFaceMaterial(materialArray);
// create a multimaterial
var mesh = new THREE.Mesh(geom, faceMaterial);
return mesh;
}
function render() {
stats.update();
if (controls.rotate) {
cube.rotation.x += -0.01;
cube.rotation.y += -0.01;
cube.rotation.z += -0.01;
}
// render using requestAnimationFrame
requestAnimationFrame(render);
webGLRenderer.render(scene, camera);
}
function initStats() {
var stats = new Stats();
stats.setMode(0); // 0: fps, 1: ms
// Align top-left
stats.domElement.style.position = 'absolute';
stats.domElement.style.left = '0px';
stats.domElement.style.top = '0px';
document.getElementById("Stats-output").appendChild(stats.domElement);
return stats;
}
}
window.onload = init;
</script>
</body>
</html>
尝试过更改视频源，更改three.js版本，使用其他网上教程的代码，更换电脑，均无法将视频作为纹理。
希望能实现加载视频纹理到物体表面的功能
