threejs视频纹理VideoTextureColor让照片波动涟漪三维效果代码-html代码-BFW代码库

threejs视频纹理VideoTextureColor让照片波动涟漪三维效果代码

代码语言：html

所属分类：三维

代码描述：threejs视频纹理VideoTextureColor让照片波动涟漪三维效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开


<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">
  


  
  
<style>
.webgl {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.sample__video {
  z-index: 10;
  position: fixed;
  right: 0;
  top: 0;
  width: 32vw;
  height: 18vw;
}

.sample__title {
  z-index: 100;
  position: fixed;
  right: 1vw;
  top: 1vw;
  color: #f00;
  font-size: 10px;
}
</style>



</head>

<body  >
  <div class="webgl" id="js-webgl">
	<canvas class="webgl__canvas" id="js-webgl__canvas"></canvas>
</div>

<p class="sample__title">mp4</p>

<!-- vertexShader -->
<script id="js-vertex-shader" type="x-shader/x-vertex">
	uniform mat4 modelViewMatrix;
	uniform mat4 projectionMatrix;
	attribute vec3 position;
	attribute vec2 uv;
	varying vec2 vUv;
	uniform sampler2D uVideoTexture;

void main() {
	vUv = uv;
	vec4 videoColor = texture2D(uVideoTexture, vUv);
	
	vec3 resultPosition = vec3(position.x, position.y, position.z);
	
	
  gl_Position = projectionMatrix * modelViewMatrix * vec4(resultPosition, 1.0);
}
</script>

<!-- fragmentShader -->
<script id="js-fragment-shader" type="x-shader/x-fragment">
	precision mediump float;
	varying vec2 vUv;
	uniform sampler2D uImageTexture;
	uniform sampler2D uVideoTexture;
	
	
	void main() {
		vec4 videoColor = texture2D(uVideoTexture, vUv);
		// vec4 distortion = texture2D(uVideoTexture, vUv);
		// vec2 customUv = vUv * vec2(distortion.r, distortion.g);
		vec2 uv = vUv;
		
		// uv.x *= -(videoColor.r *2. - 1.) * 1.1;
		// uv.y *= -(videoColor.b *2. - 1.) * 1.1;
		vec2 customUv = vec2(uv.x * 0.6 + 0.4 + (videoColor.r * 0.4 - 0.2), uv.y * 0.6 + 0.4 + (videoColor.b * 0.4 - 0.2));
		
		gl_FragColor = texture2D(uImageTexture, customUv);
	}
</script>

<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/Stats-16.js"></script>
<script type="module">

import * as THREE from "//repo.bfw.wiki/bfwrepo/js/module/three/build/three.module.js";
import { OrbitControls } from "//repo.bfw.wiki/bfwrepo/js/module/three/examples/jsm/controls/OrbitControls.js";
class MyMesh extends THREE.Mesh {
  constructor() {
    super(
    new THREE.PlaneBufferGeometry(1280, 720, 1, 1),
    new THREE.RawShaderMaterial({
      vertexShader: document.querySelector("#js-vertex-shader").textContent,
      fragmentShader: document.querySelector("#js-fragment-shader").textContent,
      transparent: true,
      depthTest: false,
      side: THREE.DoubleSide,
      // blending: THREE.AdditiveBlending,
      // wireframe: true,
      uniforms: {
        uTime: { type: "f", value: 0.0 },
        uImageTexture: { type: "t", value: null },
        uVideoTexture: {.........完整代码请登录后点击上方下载按钮下载查看