threejs换脸过渡特效-html代码-BFW代码库

threejs换脸过渡特效

代码语言：html

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

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<title>  ThreeJS Texture Transition Hover Effect 2</title>
<style>
    html,
body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  margin: 0;
}

  </style>

</head>
<body translate="no">
<canvas id="canvas"></canvas>

<script src='http://repo.bfw.wiki/bfwrepo/js/TweenMax.min.js'></script>
<script src='http://repo.bfw.wiki/bfwrepo/js/three.js'></script>

<script>
      function _defineProperty(obj, key, value) {if (key in obj) {Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true });} else {obj[key] = value;}return obj;} /* Utils ------------------------------------------ */
const textureLoader = new THREE.TextureLoader();

/* Scene Subjects ----------------------------------------- */
class PlaneSubject {



  constructor(scene) {_defineProperty(this, "raycaster", new THREE.Raycaster());_defineProperty(this, "scene", null);
    const geometry = new THREE.PlaneBufferGeometry(5, 7);
    const material = new THREE.ShaderMaterial({
      vertexShader: `
        varying vec2 vUv; 

        void main() {
          vUv = uv;

          gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
        }
      `,
      fragmentShader: `
        precision highp float; 

        varying vec2 vUv; 

        uniform float dispFactor; 

        uniform sampler2D disp; 
        uniform sampler2D tex1; 
        uniform sampler2D tex2; 

        void main() {
          vec2 uv = vUv;

          vec4 _currentImage;
          vec4 _nextImage;

          float intensity = 0.5;

          vec4 orig1 = texture2D(tex1, uv);
          vec4 orig2 = texture2D(tex2, uv);

          _currentImage = texture2D(tex1, vec2(
            uv.x, 
            uv.y + dispFactor * (orig2 * intensity)
          ));

          _nextImage = texture2D(tex2, vec2(
            uv.x, 
            uv.y + (1.0 - dispFactor) * (orig1 * intensity)
          ));

          vec4 finalTexture = mix.........完整代码请登录后点击上方下载按钮下载查看