three js 视频贴合 视频翻转 视频旋转镜像 视频融合
//视频贴图画质
var video = document.createElement('video');
video.src = './video/wly016.mp4';
video.crossOrigin = 'anonymous';
video.loop = true;
video.muted = true;
video.play();
var videoTexture = new THREE.VideoTexture(video);
videoTexture.minFilter = THREE.LinearFilter;
videoTexture.magFilter = THREE.LinearFilter;
videoTexture.format = THREE.RGBFormat;
// 控制纹理重复
videoTexture.wrapS = THREE.ClampToEdgeWrapping;
videoTexture.wrapT = THREE.ClampToEdgeWrapping;//opacity:0.5,transparent:true 透明度
var shaderMaterial = new THREE.MeshBasicMaterial({
map: videoTexture,displacementScale:20
,
onBeforeCompile: function(shader) {
shader.fragmentShader = `
varying vec2 vUv;
uniform sampler2D map;
void main() {
vec2 uv = vUv;
// 非镜面贴图处理
uv.y = 1.0 - uv.y;
gl_FragColor = texture2D(map, uv);
}
`;
};
// onBeforeCompile: function(shader) {
// shader.vertexShader = `
// varying vec2 vUv;
// uniform float rotationAngle;
// void main() {
// vUv = uv;
// mat4 rotationMatrix = mat4(
// vec4(cos(rotationAngle), sin(rotationAngle), 0.0, 0.0),
// vec4(-sin(rotationAngle), cos(rotationAngle), 0.0, 0.0),
// vec4(0.0, 0.0, 1.0, 0.0),
// vec4(0.0, 0.0, 0.0, 1.0)
// );
// vec4 mvPosition = modelViewMatrix * rotationMatrix * vec4(position, 1.0);
// gl_Position = projectionMatrix * mvPosition;
// }
// `;
// shader.fragmentShader = `
// varying vec2 vUv;
// uniform sampler2D map;
// void main() {
// vec2 rotatedUv = vec2(vUv.y, 1.0 - vUv.x);
// gl_FragColor = texture2D(map, rotatedUv);
// }
// `;
// }
});
console.log("角度",Math.PI/2 )
// 设置材质的翻转参数
shaderMaterial.flipHorizontal = true; // 水平翻转
shaderMaterial.flipVertical = true; // 垂直翻转
// shaderMaterial.rotationAngle = Math.PI / 4;
// object.material = shaderMaterial;
// cube2.material = shaderMaterial;
intersections[0].object.material = shaderMaterial;