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

代码语言:html

所属分类:其他

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

代码标签: 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;
 .........完整代码请登录后点击上方下载按钮下载查看

网友评论0