好吧,我试图将视频纹理输入到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
中?