three实现三张图片卡片鼠标交互视觉差异动画效果代码-html代码-BFW代码库

three实现三张图片卡片鼠标交互视觉差异动画效果代码

代码语言：html

代码描述：three实现三张图片卡片鼠标交互视觉差异动画效果代码，类似 Matcaps

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

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

<head>
  <meta charset="UTF-8">
  

  <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/normalize.css">
  
<style>
body {
  overflow: hidden;
}
</style>

  
  
</head>

<body translate="no">
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/three.133.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/OrbitControls.133.js"></script>
      <script >
const settings = {
  sizes: {
    width: window.innerWidth,
    height: window.innerHeight },

  boxDimensions: {
    h: 1.4,
    w: 1 } };


//textures//repo.bfw.wiki/bfwrepo/image/5d653d54ed035.png
const textureLoader = new THREE.TextureLoader();
textureLoader.setCrossOrigin('Anonymous');
const photoTexture02 = textureLoader.load('//repo.bfw.wiki/bfwrepo/image/609636b3b27fe.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_300,h_500,/quality,q_90');
const photoTexture03 = textureLoader.load('//repo.bfw.wiki/bfwrepo/image/627ef04e2d970.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_300,h_500,/quality,q_90');
const photoTexture = textureLoader.load('//repo.bfw.wiki/bfwrepo/image/6284286d59cbd.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_300,h_500,/quality,q_90');
photoTexture.wrapS = THREE.RepeatWrapping;
photoTexture.wrapT = THREE.RepeatWrapping;
photoTexture.repeat.set(.1, .1);
// init
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, settings.sizes.width / settings.sizes.height, 0.1, 1000);
camera.position.set(0, 0, 3);
camera.lookAt(0, 0, 0);
scene.add(camera);

const sun = new THREE.AmbientLight(0xffffff, .5);
scene.add(sun);

const planeGeometry = new THREE.PlaneGeometry(settings.boxDimensions.w, settings.boxDimensions.h);

const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setAnimationLoop(animation);
document.body.appendChild(renderer.domElement);

function RoundedPortalPhotoPlane(geometry, photoTexture) {
  const material = new THREE.MeshMatcapMaterial({
    matcap: photoTexture,
    transparent: true });


  material.onBeforeCompile = shader => {
    shader.vertexShader = shader.vertexShader.replace(
    '#include <common>',
    `
          #include <common>
          varying vec4 vPosition;
          varying vec2 vUv;
      `);

    shader.vertexShader = shader.vertexShader.replace(
    '#include <fog_vertex>',
    `
            #include <fog_vertex>
            vPosition = mvPosition;
            vUv = uv;
        `);

    shader.fragmentShader = shader.fragmentShader.replace(
    `#include <common>`,
    `
      #include <common>
      varying vec4 vPo.........完整代码请登录后点击上方下载按钮下载查看