Video 视频纹理播放但显示黑色
我正在尝试创建一个视频纹理。我的代码会将视频添加到我的场景中,但是我的立方体是黑色的。视频就在那里的某个地方,因为我可以听到在我的浏览器中播放的音频。我刚接触three.js,所以我不确定自己做错了什么。我有一个照相机和三盏灯。我可以看到场景中的其他对象,它们的纹理是可见的。我的代码改编自。以下是我的HTML代码:Video 视频纹理播放但显示黑色,video,three.js,textures,Video,Three.js,Textures,我正在尝试创建一个视频纹理。我的代码会将视频添加到我的场景中,但是我的立方体是黑色的。视频就在那里的某个地方,因为我可以听到在我的浏览器中播放的音频。我刚接触three.js,所以我不确定自己做错了什么。我有一个照相机和三盏灯。我可以看到场景中的其他对象,它们的纹理是可见的。我的代码改编自。以下是我的HTML代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8">
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<script src="libraries/three.js"></script>
<script src="libraries/OBJLoader2.js"></script>
<script src="libraries/OrbitControls.js"></script>
<script src="libraries/MtlLoader.js"></script>
<script src="libraries/DDSLoader.js"></script>
</head>
<body>
<script src="libraries/main.js"></script>
</body>
</html>
您必须为视频创建画布,以便使用它构建纹理。 此外,还必须刷新渲染循环中的每个帧
var renderer;
var scene;
var camera;
var cameraControl;
var loader;
var updateFcts = [];
var video;
var videoImageContext;
var videoTexture;
function createRenderer() {
renderer = new THREE.WebGLRenderer();
renderer.setClearColor(0x111111, 1.0);
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.shadowMap.enabled = true;
}
function createCamera() {
camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.x = 0;
camera.position.y = 100;
camera.position.z = 450;
camera.lookAt(scene.position);
cameraControl = new THREE.OrbitControls(camera);
}
var THREEx = THREEx || {}
THREEx.VideoTexture = function(url) {
video = document.createElement('video');
video.autoplay = true;
video.loop = true;
video.src = url;
video.load();
video.play();
videoImage = document.createElement('canvas');
videoImage.width = 320;
videoImage.height = 240;
videoImageContext = videoImage.getContext('2d');
videoImageContext.fillStyle = '#000000';
videoImageContext.fillRect(0, 0, videoImage.width, videoImage.height);
this.texture = new THREE.Texture(videoImage);
this.texture.minFilter = THREE.LinearFilter;
this.texture.magFilter = THREE.LinearFilter;
this.destroy = function() {
video.pause()
}
}
function createVideo() {
videoTexture = new THREEx.VideoTexture('myvideo.mp4')
updateFcts.push(function(delta, now) {
videoTexture.update(delta, now)
});
var geometry = new THREE.CubeGeometry(10, 50, 10);
var material = new THREE.MeshBasicMaterial({
map: videoTexture.texture,
side: THREE.DoubleSide
});
var mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);
updateFcts.push(function(delta, now) {
mesh.rotation.x += 1 * delta;
mesh.rotation.y += 2 * delta;
});
}
function createLight() {
var spotLight = new THREE.SpotLight(0xffffff);
spotLight.position.set(10, 40, 20);
spotLight.shadowCameraNear = 20;
spotLight.shadowCameraFar = 50;
spotLight.castShadow = true;
scene.add(spotLight);
var ambient = new THREE.AmbientLight(0x444444);
ambient.castShadow = true;
scene.add(ambient);
var directionalLight = new THREE.DirectionalLight(0xffeedd);
directionalLight.position.set(0, 0.5, 0.5).normalize();
scene.add(directionalLight);
}
function init() {
scene = new THREE.Scene();
createRenderer();
createCamera();
createLight();
createVideo();
document.body.appendChild(renderer.domElement);
render();
}
function render() {
cameraControl.update();
if (video.readyState === video.HAVE_ENOUGH_DATA) {
videoImageContext.drawImage(video, 0, 0);
if (videoTexture)
videoTexture.texture.needsUpdate = true;
}
renderer.render(scene, camera);
requestAnimationFrame(render);
}
init();
我已经改变了THREEx.VideoTexture函数和渲染循环,并用r75和works进行了测试 我遇到了类似的问题:将摄影机源渲染到纹理会导致黑色对象(黑色纹理)。 在我的例子中,这是由于没有设置
texture.needsUpdate=true
。
因此,我自己的代码类似于:
updateTexture = function(videoDomElement){
var cameraTexture = new THREE.Texture(videoDomElement);
cameraTexture.needsUpdate = true;
var material = new THREE.MeshLambertMaterial({map: cameraTexture});
material.needsUpdate = true;
existingObject.material = material;
}
谢谢你,我试着添加画布,但也没能成功,但是你的代码帮了我的忙!我知道我也必须改变我的渲染功能,所以你帮我澄清了这一点:)视频不需要画布。三个.js中没有一个为视频创建单独的画布
updateTexture = function(videoDomElement){
var cameraTexture = new THREE.Texture(videoDomElement);
cameraTexture.needsUpdate = true;
var material = new THREE.MeshLambertMaterial({map: cameraTexture});
material.needsUpdate = true;
existingObject.material = material;
}