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;

image
image

posted on 2023-07-11 11:23  JavaWang  阅读(492)  评论(0编辑  收藏  举报