three+webgl实现鼠标交互互动滤镜渐变效果代码-html代码-BFW代码库

three+webgl实现鼠标交互互动滤镜渐变效果代码

代码语言：html

所属分类：其他

代码描述：three+webgl实现鼠标交互互动滤镜渐变效果代码

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

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

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

  
  
<style>
body {
  margin: 0;
}
</style>

  
</head>

<body translate="no">
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/three.128.js"></script>
  <script type="module">

  let scene, camera, renderer, planeMesh;
  // -- 1) Set these to your normal map's actual dimensions:
  const IMAGE_WIDTH = 1200; // e.g. 1200 px wide
  const IMAGE_HEIGHT = 1000; // e.g. 1000 px high
  const IMAGE_ASPECT = IMAGE_WIDTH / IMAGE_HEIGHT; // e.g. 1.2
  init();
  animate();

  function init() {
    scene = new THREE.Scene();
    // ------------------------------------------------------
    // 2) ORTHOGRAPHIC CAMERA: covers [-1..1] in Y, [-aspect..+aspect] in X
    // ------------------------------------------------------
    const viewAspect = window.innerWidth / window.innerHeight;
    camera = new THREE.OrthographicCamera(
      -viewAspect, // left
      viewAspect, // right
      1, // top
      -1, // bottom
      0.1, // near
      10 // far
    );
    camera.position.set(0, 0, 5);
    // ------------------------------------------------------
    // 3) CREATE RENDERER & APPEND
    // ------------------------------------------------------
    renderer = new THREE.WebGLRenderer({
      antialias: true
    });
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);
    // ------------------------------------------------------
    // 4) LOAD NORMAL MAP (just once)
    // ------------------------------------------------------
    const loader = new THREE.TextureLoader();
    const normalMap = loader.load(
      "//repo.bfw.wiki/bfwrepo/image/5e45e670cfa1a.png"
    );
    // ------------------------------------------------------
    // 5) PLANE GEOMETRY: (width=2*imageAspect, height=2)
    //   .........完整代码请登录后点击上方下载按钮下载查看