shadertoy特效通过threejs接入前端

准备

这里我们使用three.js这个非常受欢迎的webgl库，three.js提供了基于webgl的所有封装，可以更方便的实现webgl

shadertoy是个比较知名webgl特效网站，里面有很多炫酷的片元着色器

首先我们需要通过three.js创建scene、camera、render

scene是抽象出的概念，理解为场景，

camera为相机，决定观察的角度的位置，render是渲染器，通过camera和scene中的显示对象将场景渲染出来。

function main() {
  const canvas = document.querySelector('#c');
  const renderer = new THREE.WebGLRenderer({canvas});
  renderer.autoClearColor = false;
 
  const camera = new THREE.OrthographicCamera(
    -1, // left
     1, // right
     1, // top
    -1, // bottom
    -1, // near,
     1, // far
  );
  const scene = new THREE.Scene();
  const plane = new THREE.PlaneBufferGeometry(2, 2);
  const material = new THREE.MeshBasicMaterial({
      color: 'red',
  });
  scene.add(new THREE.Mesh(plane, material));
 
  function resizeRendererToDisplaySize(renderer) {
    const canvas = renderer.domElement;
    const width = canvas.clientWidth;
    const height = canvas.clientHeight;
    const needResize = canvas.width !== width || canvas.height !== height;
    if (needResize) {
      renderer.setSize(width, height, false);
    }
    return needResize;
  }
 
  function render() {
    resizeRendererToDisplaySize(renderer);
 
    renderer.render(scene, camera);
 
    requestAnimationFrame(render);
  }
 
  requestAnimationFrame(render);
}
 
main();

这里面我们先创建一个OrthographicCamera正交相机，后面我们再尝试使用透视相机改写。

下一步将material的类型改写为为ShaderMaterial，通过这个材质来承接shadertoy的shader