Question

使用功率为2的视频纹理时出现错误

[.Offscreen-For-WebGL-000001F5703E3090] GL错误：GL_INVALID_OPERATION ：glGenerateMipmap：无法生成mip

并且网络摄像头不能在旋转立方体上工作

如果我将网络摄像头宽度更改为其他东西（不是2的幂），则网络摄像头可以工作，但我仍然会收到此警告

THREE.WebGLRenderer：纹理不是两个人的力量。 Texture.minFilter 应设置为THREE.NearestFilter或THREE.LinearFilter。

<!DOCTYPE html>
<html>
    <head>
        <meta charset=utf-8>
        <title>Vainu 3d</title>
        <style>
            body { margin: 0; }
            canvas { width: 100%; height: 100% }
        </style>
    </head>
    <body>
        <script src="js/three.js"></script>
        <script>


var scene = new THREE.Scene();

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

var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 500);
camera.position.set(0, 0, 100);
camera.lookAt(new THREE.Vector3(0, 0, 0));

var line_material = new THREE.LineBasicMaterial({ color: 0x0000ff });

var line_geometry = new THREE.Geometry();
line_geometry.vertices.push(new THREE.Vector3(-10, 0, 0));
line_geometry.vertices.push(new THREE.Vector3(0, 10, 0));
var line = new THREE.Line(line_geometry, line_material);
scene.add(line)


var video      = document.createElement('video');
video.width    = 256;
video.height   = 256;
video.autoplay = true;
var hasUserMedia = navigator.webkitGetUserMedia ? true : false;

navigator.mediaDevices.getUserMedia({ audio: true, video: true })
.then(function(stream) {
  video.src    = URL.createObjectURL(stream);
})
.catch(function(err) {
  console.log("Failed to get a stream due to", err);
});

var videoTexture = new THREE.Texture( video );

var video_material   = new THREE.MeshLambertMaterial({
  map : videoTexture
});

var geometry = new THREE.CubeGeometry( 100, 100, 100 );
var img_material = [
    new THREE.MeshBasicMaterial( { map: new THREE.TextureLoader().load( 'img/vainu.png' ) } ),
    new THREE.MeshBasicMaterial( { map: videoTexture } ),
    new THREE.MeshBasicMaterial( { color: 0x00ff00 } ),
    new THREE.MeshBasicMaterial( { color: 0x00ff00 } ),
    new THREE.MeshBasicMaterial( { color: 0x00ff00 } ),
    new THREE.MeshBasicMaterial( { color: 0x00ff00 } )
]

var mesh = new THREE.Mesh( geometry, material );
var geometry = new THREE.BoxGeometry( 20, 20, 20 );
var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
var cube = new THREE.Mesh( geometry, img_material );
scene.add( cube );




//camera.position.z = 5;

//renderer.render(scene, camera);


function animate() {
    requestAnimationFrame( animate );
    renderer.render( scene, camera );

    cube.rotation.y += 0.01;

    if( video.readyState === video.HAVE_ENOUGH_DATA ){
      videoTexture.needsUpdate = true;
    }
}
animate();

        </script>
    </body>
</html>

Javascript WebGL ThreeJS Webcam纹理错误

0 个答案: