主页 / 问题 / 1563036
Accepted
Elijah_Pris
Asked:2024-01-24 19:21:42 +0000 UTC2024-01-24 19:21:42 +0000 UTC

p5.j​​s 无法在 React.js 中工作

  • 772

我正在尝试从以下草图制作背景 https://openprocessing.org/sketch/1957947

将代码转换为以下形式：

import Sketch from 'react-p5'
import frag from './basic.frag'
import vert from './basic.vert'

function Background(){
  let myShader;

  const preload = (p5) => {
    myShader = p5.loadShader(vert, frag);
  };

  const setup = (p5) => {
    p5.createCanvas(p5.windowWidth, p5.windowHeight, p5.WEBGL);
    p5.pixelDensity(1);
    p5.background(100);

    p5.shader(myShader)
  };

  const draw = (p5) => {
    myShader.setUniform('u_resolution', [p5.width, p5.height]);
    myShader.setUniform('u_time', p5.millis() / 500);

    p5.rect(0, 0, p5.width, p5.height);
  };

  const windowResized = (p5) => {
    p5.resizeCanvas(window.innerWidth, window.innerHeight);
  }
  return <Sketch preload={preload} setup={setup} draw={draw} windowResized={windowResized} />
}
export default Background;

之后标准导入到我的 React 应用程序中：

import Background from "../Backgrounds/Background"

...
const Home = () => {
return(
...
<Background />
...
)
}
export default Home

然而，虽然没有错误，但同时什么也没有显示。我不明白问题出在哪里

javascript

1 个回答

  1. Best Answer
    import Sketch from 'react-p5'
import frag from './basic.frag'
import vert from './basic.vert'

function Background(){
  let myShader;
  var canvas;

  const preload = (p5) => {
    myShader = p5.loadShader(vert, frag);
  };

  const setup = (p5) => {
    canvas = p5.createCanvas(p5.windowWidth, p5.windowHeight, p5.WEBGL);
    canvas.position(0, 0);
    canvas.style('z-index', '-1');
    p5.pixelDensity(1);
    p5.background(100);

    p5.shader(myShader)
  };

  const draw = (p5) => {
    myShader.setUniform('u_resolution', [p5.width, p5.height]);
    myShader.setUniform('u_time', p5.millis() / 500);

    p5.rect(0, 0, p5.width, p5.height);
  };

  const windowResized = (p5) => {
    p5.resizeCanvas(window.innerWidth, window.innerHeight);
  }
  return <Sketch preload={preload} setup={setup} draw={draw} windowResized={windowResized} />
}
export default Background;

    作品

    • 0

相关问题