javascript - Next JS 与 Courttain.js 库未接收参数

Question

friend 们，大家好，

我正在创建一个网站，我需要在主页中插入一张用动画扭曲的图像。为此，我得到了一个名为 Courtain.js 的库，需要我去理解它，而开发人员设法使其工作并作为 React 的组件向我发送了这段代码。

import React, { Component } from 'react';
import './App.css';
import image from './images/1.png';
import {Curtains} from 'curtainsjs';
const planeParams = {
  vertexShaderID: "plane-vs", // our vertex shader ID
  fragmentShaderID: "plane-fs", // our framgent shader ID
  uniforms: {
    time: {
      name: "uTime", // uniform name that will be passed to our shaders
      type: "1f", // this means our uniform is a float
      value: 0,
    },
  }
};
class CurtainsPage extends React.Component {
  constructor( props ) {
    super(props);
    this._planes = null;
  }

  componentDidMount() {
    // if we got our curtains object, create the plane
    this.props.curtains && this.createPlanes(this.props.curtains);
  }

  componentWillUpdate(nextProps, nextState) {
    // if we haven't got our curtains object before but got it now, create the plane
    if(!this.props.curtains && nextProps.curtains) {
      this.createPlanes(nextProps.curtains);
    }
  }

  componentWillUnmount() {
    // remove the plane before unmounting component
    if(this.props.curtains && this._planes) {
      this.props.curtains.removePlane(this._planes);
      this._planes = null;
    }
  }
  createPlanes(curtains) {
    // create our plane
    if(curtains) {
      this._planes = curtains.addPlane(this.planeElement, planeParams);
      this._planes.onRender(function() {
        this.uniforms.time.value++;
      });

    }
  }
// register our plane element ref
  registerPlaneElement(el) {
    this.planeElement = el;
  }

  render() {

    return (
        <div
            className="curtain"
            ref={(el) => this.registerPlaneElement(el)}
        >
          <img src={image} alt={"image"}/>
        </div>
    );
  }
}
class App extends Component {

  constructor( props ) {
    super(props);

    this.state = {
      curtains: null
    };
  }

  componentDidMount() {
    let curtains = new Curtains("canvas");
    this.setState({ curtains: curtains });
  }

  render() {
    let curtains = this.state.curtains;
    console.log("start",curtains)
    return (
              <div className="App">
                    <div id="canvas" />
                    <CurtainsPage curtains={curtains}/>
              </div>
    );
  }
}

export default App;

问题是我使用 Next JS 开发的网站并且该技术使用了 SSR，我认为这给我带来了问题。库函数甚至无法识别我发送的着色器。有人可以帮我弄这个吗？这是我在 Next JS 中的代码。

import { Fragment, Component } from "react";
import Nav from "../components/Nav";
import { motion } from "framer-motion";

import ArrowDownIcon from "@material-ui/icons/KeyboardArrowDown";

import "./index.scss";

import image from "./img/1.png";
import { Curtains } from "curtainsjs";

const planeParams = {
  vertexShaderID: "plane-vs", // our vertex shader ID
  fragmentShaderID: "plane-fs", // our framgent shader ID
  uniforms: {
    time: {
      name: "uTime", // uniform name that will be passed to our shaders
      type: "1f", // this means our uniform is a float
      value: 0
    }
  }
};

class CurtainsPage extends Component {
  constructor(props) {
    super(props);
    this._planes = null;
  }

  componentDidMount() {
    // if we got our curtains object, create the plane
    this.props.curtains && this.createPlanes(this.props.curtains);
  }

  componentWillUpdate(nextProps, nextState) {
    // if we haven't got our curtains object before but got it now, create the plane
    if (!this.props.curtains && nextProps.curtains) {
      this.createPlanes(nextProps.curtains);
    }
  }

  componentWillUnmount() {
    // remove the plane before unmounting component
    if (this.props.curtains && this._planes) {
      this.props.curtains.removePlane(this._planes);
      this._planes = null;
    }
  }
  createPlanes(curtains) {
    // create our plane
    if (curtains) {
      this._planes = curtains.addPlane(this.planeElement, planeParams);
      this._planes.onRender(function() {
        this.uniforms.time.value++;
      });
    }
  }
  // register our plane element ref
  registerPlaneElement(el) {
    this.planeElement = el;
  }

  render() {
    return (
      <div className="curtain" ref={el => this.registerPlaneElement(el)}>
        <span>Hey</span>
        <img src={image} alt={"image"} />
      </div>
    );
  }
}

class Index extends Component {
  constructor(props) {
    super(props);

    this.state = {
      curtains: null
    };
  }

  componentDidMount() {
    let curtains = new Curtains("canvas");
    this.setState({ curtains: curtains });
  }

  render() {
    let curt = null;

    if (typeof window !== "undefined") {
      let curtains = this.state.curtains;
      console.log("start", curtains);
      curt = <CurtainsPage curtains={curtains} />;
    }

    return (
      <Fragment>
        <Nav />
        <div id="homesection">
          <div id="bigheader">
            <div id="canvas" />
            {curt}
          </div>
          <div className="sectionfooter">
            <div className="flexcenterall">
              <ArrowDownIcon className="marginbigright" />
              <span className="fuentesecundaria normal">
                Scroll down to continue
              </span>
            </div>
          </div>
        </div>
        <div id="firstsection">
          <div id="firstcontent">Hey</div>
          <div className="sectionfooter">
            <div className="flexcenterall">
              <ArrowDownIcon className="marginbigright moradotext" />
              <span className="fuentesecundaria normal negrotext big">
                Where do you want to start?
              </span>
            </div>
          </div>
        </div>
        <div id="secondsection">
          <div>
            <h2>MARKETING & COPYWRIGHTING</h2>
          </div>
          <div>Hola</div>
          <div>Hola</div>
          <div>Hola</div>
          <div>Hola</div>
        </div>
      </Fragment>
    );
  }
}

export default Index;

图像出现但没有变形，我认为这是因为库没有正确接收参数或者是SSR错误。我收到错误，指出未指定顶点和着色器。

Answer 1

不要将着色器指定为 HTML ID 字符串，而是直接将它们作为字符串传递:

const vertexShader = `
    precision mediump float;

    // default mandatory variables
    attribute vec3 aVertexPosition;
    attribute vec2 aTextureCoord;

    uniform mat4 uMVMatrix;
    uniform mat4 uPMatrix;

    // our texture matrix uniform
    // since no data-sampler attribute is specified on your <img /> tag
    // the texture matrix use the default lib name: "uTextureMatrix0"
    uniform mat4 uTextureMatrix0;

    // custom variables
    varying vec3 vVertexPosition;
    varying vec2 vTextureCoord;

    void main() {
        gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0);

        // do what you need to do in your vertex shader here...

        // varyings
        vTextureCoord = (uTextureMatrix0* vec4(aTextureCoord, 0.0, 1.0)).xy;
        vVertexPosition = aVertexPosition;
    }
`;

const fragmentShader = `
    precision mediump float;

    varying vec3 vVertexPosition;
    varying vec2 vTextureCoord;

    // since no data-sampler attribute is specified on your <img /> tag
    // the sampler name use the default lib name: "uSampler0"
    uniform sampler2D uSampler0;

    void main() {
        // do what you need to do in your fragment shader...

        vec4 texture = texture2D(uSampler0, vTextureCoord);

        // draw our texture
        gl_FragColor = texture;
    }
`;

const planeParams = {
  vertexShader: vertexShader, // our vertex shader
  fragmentShader: fragmentShader, // our framgent shader
  uniforms: {
    time: {
      name: "uTime", // uniform name that will be passed to our shaders
      type: "1f", // this means our uniform is a float
      value: 0
    }
  }
};

这应该可以解决您的问题。