ThreeJS-用视频制作CubeTexture?

时间:2019-12-07 07:11:00

标签: javascript html three.js shader

好吧,我试图将视频纹理输入到https://threejs.org/docs/#api/en/textures/CubeTexture中,因为创建玻璃着色器是必需的。但是,CubeTexture通过输入网址数组来工作-

volatile

我的视频纹理就像这样-

var imagePrefix = "./src/images/dawnmountain-";
    var directions  = ["xpos", "xneg", "ypos", "yneg", "zpos", "zneg"];
    var imageSuffix = ".png";
    var skyGeometry = new THREE.CubeGeometry( 5000, 5000, 5000 );

    this.urls = [];
    for (var i = 0; i < 6; i++)
      this.urls.push( imagePrefix + directions[i] + imageSuffix );

    var materialArray = [];
    for (var i = 0; i < 6; i++)
      materialArray.push( new THREE.MeshBasicMaterial({
        map: new THREE.TextureLoader().load( imagePrefix + directions[i] + imageSuffix ),
        side: THREE.BackSide
      }));
      this.textureCube = new THREE.CubeTextureLoader().load(this.urls);
      this.textureCube.mapping = THREE.CubeRefractionMapping;

        var fShader = THREE.FresnelShader;
        var fresnelUniforms =
        {
          "mRefractionRatio": { type: "f", value: 1.02 },
          "mFresnelBias":   { type: "f", value: 0.1 },
          "mFresnelPower":  { type: "f", value: 2.0 },
          "mFresnelScale":  { type: "f", value: 1.0 },
          "tCube":          { type: "t", value: this.textureCube} //textureCube
        };

如何将 var video = document.createElement( 'video' ); video.src = './src/images/computerscreen.webm'; video.load(); // must call after setting/changing source video.preload = 'auto'; video.loop = true; video.autoload = true; video.transparent = true; video.playbackRate = 1.06; //this.videoTex = video; this.videoTexs[this.videoTexs.length] = video; var texture = new THREE.VideoTexture( video ); texture.minFilter = THREE.LinearFilter; texture.magFilter = THREE.LinearFilter; texture.format = THREE.RGBAFormat; var runnerMaterial = new THREE.MeshBasicMaterial( { map: texture, transparent: true, side:THREE.DoubleSide, alphaTest: 0.5 } ); runnerMaterial.transparent = true; 放入runnerMaterial中?

0 个答案:

没有答案