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(_currentImage, _nextImage, dispFactor);

          gl_FragColor = finalTexture;
        }
      `,
      uniforms: {
        dispFactor: {
          type: 'f',
          value: 0.0 },

        tex1: {
          type: 't',
          value: textureLoader.load('/bfwrepo/image/photo-1542080681-b52d382432af') },

        tex2: {
          type: 't',
          value: textureLoader.load('/bfwrepo/image/photo-1562235033-824d84fc4524') } } });



    material.transparent = true;
    const mesh = new THREE.Mesh(geometry, material);

    scene.add(mesh);

    this.scene = scene;
    this.mesh = mesh;
  }

  update(delta, time) {}

  mouseHandler(mouse, camera) {
    const { scene, mesh, raycaster } = this;

    raycaster.setFromCamera(mouse, camera);

    const intersects = raycaster.intersectObjects(scene.children);

    TweenMax.to(mesh.material.uniforms.dispFactor, 0.5, {
      value: intersects.length });


    TweenMax.to(mesh.scale, 0.5, {
      x: 1 - mouse.y * 0.1,
      y: 1 - mouse.y * 0.1 });


    TweenMax.to(mesh.positi.........完整代码请登录后点击上方下载按钮下载查看