使用three.js在球形纹理上渲染视频

Question

我实现了在WebGLView上的球形纹理上播放视频，但在附上图片时出现错误。 https://i.stack.imgur.com/YklKb.png

  

console.error：“ THREE.WebGLState：”，“ RNWebGL：gl.texImage2D（）尚不支持6参数版本！”

我没有发现问题所在。有解决这个问题的想法或捕捉它的示例吗？

const MAX_FOV = 20;
let currentRenderId = 0;

export default class App extends Component<Props> {

  videoSource = "url.mp4";

  render() {
    return (
      <View style={styles.container}>
        {<WebGLView style={{}} onContextCreate={this.onContextCreate}/>}
      </View>
    );
  }

  // onContextCreate = (gl: WebGLRenderingContext) => {
  onContextCreate = async gl => {
    let renderId;
    let camera, scene, mesh, texture;

    const rngl = gl.getExtension("RN");

    const {drawingBufferWidth: width, drawingBufferHeight: height} = gl;

    const renderer = new THREE.WebGLRenderer({
      canvas: {
        width,
        height,
        style: {},
        addEventListener: () => {},
        removeEventListener: () => {},
        clientHeight: height
      },
      context: gl,
      antialias: true,
    });
    renderer.setSize(width, height);

    const init = () => {

      this.state = {
        phiStart: (Math.PI / 2 * 3) - (-Math.PI / 2.6),
        phiLength: -Math.PI / 1.3,
        thetaStart: (Math.PI / 2) - Math.PI / 12,
        thetaLength: Math.PI / 6,
        fov: MAX_FOV,
        radius: 10,
        widthSegments: 16,
        heightSegments: 4,
      };

      const {phiStart, phiLength, thetaStart, thetaLength, fov, radius, widthSegments, heightSegments} = this.state;
      camera = new THREE.PerspectiveCamera(fov, width / height, 0.1, 1000);
      currentRenderId++;
      renderId = currentRenderId;

      scene = new THREE.Scene();

      let geometry = new THREE.SphereBufferGeometry(radius, widthSegments, heightSegments,
        phiStart, phiLength,
        thetaStart, thetaLength
      );

      // let video = this.handleVideo;
      let video = () => {
        return <Video
          ref={this._assignRoot}
          source={{uri: this.videoSource}}
          sytles={styles.video}/>
      };

      texture = new THREE.VideoTexture(video);
      texture.minFilter = THREE.NearestFilter;
      texture.magFilter = THREE.NearestFilter;
      texture.format = THREE.RGBFormat;

      let material = new THREE.MeshBasicMaterial({map: texture});
      mesh = new THREE.Mesh(geometry, material);
      scene.add(mesh);

      camera.position.z = 0;
    }

    const animate = () => {
      requestAnimationFrame(animate);

      texture.needsUpdate = true;
      renderer.render(scene, camera);
      mesh.rotation.x = this.rotateX;
      mesh.rotation.y = this.rotateY;

      gl.flush();
      gl.endFrameEXP()
      // rngl.endFrame();
    };

    init();
    animate();
  };
}