科幻风的卡片视频播放

news2024/11/24 13:26:19

上一篇博文展示了卡片中的VR展示，那篇主要是卡片的3D转动来展示未显示的部分图片。这篇，我们来点科幻的。

我们在卡片中播放视频的同时来拖动卡片或转动它。像下面那样：
在这里插入图片描述
这个主要依赖了两个库，具体代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
     <!--  3D场景库引入-->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/0.148.0/three.min.js"></script>
    <!--动画效果库引入-->
    <script src="https://unpkg.co/gsap@3/dist/gsap.min.js"></script>
    <style>
    body {
      margin: 0;
      overflow: hidden;
      background: #1e2024;
    }

    button {
      width: 100px;
      height: 100px;
      border-radius: 50%;
      background-color: #95a8a6;
      border: 5px solid #0f1515;
      position: absolute;
      left: 50%;
      top: 50%;
      cursor: pointer;
      transform: translate(-50%, -50%) scale(1);
      transition: transform 0.35s ease;
      transform-origin: 50% 50%;
    }
    button:before {
      position: absolute;
      content: "";
      width: 0px;
      height: 0px;
      border-top: 20px solid transparent;
      border-bottom: 20px solid transparent;
      border-left: 30px solid #0f1515;
      left: 50%;
      top: 50%;
      transform: translate(-30%, -50%);
    }
    button:hover {
      transform: translate(-50%, -50%) scale(1.1);
    }

    .lady {
      position: absolute;
      margin: auto;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      width: 525px;
      opacity: 0.4;
    }

    canvas {
      opacity: 0;
    }
  </style>
</head>
<body>
<!--首先图片是要有的，这个是视频中截取的开头图片你也可以换成别的，博文中我没有上传这个-->
<img class="lady" src="img.png" >
</body>
<script>
  //创建一个Three.js场景对象，并设置了背景颜色为黑色。
  var scene = new THREE.Scene();
  scene.background = new THREE.Color( 0x1e2024);
  //创建一个透视摄像机对象
  var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
  //创建一个Three.js渲染器对象
  var renderer = new THREE.WebGLRenderer();
  renderer.setSize(window.innerWidth, window.innerHeight);
  document.body.appendChild(renderer.domElement);
  //创建了一个平面几何体对象
  var planeGeometry = new THREE.PlaneGeometry(9.45, 6.3);
  //创建一个视频元素
  var video = document.createElement('video');
  var videoTexture = new THREE.VideoTexture(video);
  //视频在这里
  video.src ="http://vjs.zencdn.net/v/oceans.mp4";
  video.crossOrigin = "anonymous";
  video.muted = 'muted';
  video.preload = "auto";
  //搞一个着色器材质，从video创建一个视频纹理
  var material = new THREE.ShaderMaterial({
    uniforms: {
      u_lightPos: {value: new THREE.Vector3(0, 0, 10)},
      u_texture: {value: videoTexture}
    },
    vertexShader: `
        varying vec3
        v_normal;
        varying vec3 v_position;
        varying vec2 v_uv;

        void main() {
            v_normal = normalMatrix * normal;
            v_position = vec3(modelMatrix * vec4(position, 1.0));
            v_uv = uv;
            gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
        }
    `,
    fragmentShader: `
        uniform sampler2D u_texture;
        varying vec2 v_uv;
        varying vec3 v_normal;
        varying vec3 v_position;
        uniform vec3 u_lightPos;

        void main() {
            vec3 normal = normalize(v_normal);
            vec3 lightDir = normalize(u_lightPos - v_position);
            float diffuse = max(dot(lightDir, normal), 0.0);
            gl_FragColor = texture2D(u_texture, v_uv) * diffuse;
        }
    `
  });

  var plane = new THREE.Mesh(planeGeometry, material);
  scene.add(plane);
  var pointLight = new THREE.PointLight(0xff0000, 1, 100);
  pointLight.position.set(0, 0, 60);
  scene.add(pointLight);

  camera.position.z = 7;

  var playButton = document.createElement("button");
  document.body.appendChild(playButton);

  var tl = new gsap.timeline();
  function playVideo(){
    video.play();
    if (navigator.userAgent.indexOf('Safari') != -1 && navigator.userAgent.indexOf('Chrome') == -1) {
      video.muted = 'muted';
    } else {
      video.muted = false;
    }
  }

  //搞一个按钮
  playButton.addEventListener("click", function() {
    tl.set('body',{background:'transparent'});
    tl.to('button',1,{opacity:0});
    tl.to('.lady',1,{opacity:0},"-0.5");
    tl.to('canvas',1,{opacity:1},"-0.5");
    tl.call(playVideo);
  });


  video.addEventListener("ended", function() {
    video.currentTime = 0;
    video.pause();
    video.muted = 'muted';
    tl.set('body',{background:'#1e2024'});
    tl.to('canvas',1,{opacity:0});
    tl.to('.lady',1,{opacity:1},"-0.5");
    tl.to('button',1,{opacity:1});
  });

  //添加一个监听事件
  document.addEventListener("mousemove", onMouseMove);

  //鼠标事件
  function onMouseMove(event) {
    var x = (event.clientX / window.innerWidth) * 2 - 1;
    var y = -(event.clientY / window.innerHeight) * 2 + 1;

    plane.position.x = x;
    plane.position.y = y;
    plane.position.z = x * y;
    plane.rotation.x = x * 0.2;
    plane.rotation.y = y * 0.2;
  }

  window.onresize = function() {
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
    renderer.setSize( window.innerWidth, window.innerHeight );
  }

  //场景渲染
  function render() {
    requestAnimationFrame(render);
    renderer.render(scene, camera);
  }
  render();
</script>
</html>