react-curtains 使用教程

1. 项目介绍

react-curtains 是一个开源项目，旨在将 curtains.js 的 WebGL 类转换为可重用的 React 组件。通过这个库，开发者可以轻松地在 React 应用中添加 WebGL 对象和效果，而无需深入了解 WebGL 的复杂细节。

2. 项目快速启动

环境准备

首先，确保你已经安装了 Node.js 和 npm。然后，创建一个新的 React 应用：

npx create-react-app my-react-curtains-app

安装 react-curtains

进入项目目录，安装 react-curtains：

cd my-react-curtains-app
npm install react-curtains

创建基本示例

在 src/App.js 文件中，替换原有代码为以下内容：

import React from 'react';
import { Curtains, Plane } from 'react-curtains';
import './App.css';

const basicVs = `
precision mediump float;
attribute vec3 aVertexPosition;
attribute vec2 aTextureCoord;
uniform mat4 uMVMatrix;
uniform mat4 uPMatrix;
uniform mat4 uTextureMatrix0;
varying vec3 vVertexPosition;
varying vec2 vTextureCoord;
void main() {
  gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0);
  vVertexPosition = aVertexPosition;
  vTextureCoord = (uTextureMatrix0 * vec4(aTextureCoord, 0.0, 1.0)).xy;
}
`;

const basicFs = `
precision mediump float;
varying vec3 vVertexPosition;
varying vec2 vTextureCoord;
uniform sampler2D uSampler0;
uniform float uTime;
void main() {
  vec2 textureCoord = vTextureCoord;
  textureCoord.x += sin(textureCoord.y * 25.0) * cos(textureCoord.x * 25.0) * (cos(uTime / 50.0)) / 25.0;
  gl_FragColor = texture2D(uSampler0, textureCoord);
}
`;

function BasicPlane({ children }) {
  const basicUniforms = {
    time: { name: 'uTime', type: '1f', value: 0 },
  };

  const onRender = (plane) => {
    plane.uniforms.time.value++;
  };

  return (
    <Plane
      className="BasicPlane"
      vertexShader={basicVs}
      fragmentShader={basicFs}
      uniforms={basicUniforms}
      onRender={onRender}
    >
      {children}
    </Plane>
  );
}

function App() {
  return (
    <div className="App">
      <Curtains>
        <BasicPlane>
          <img src="/path/to/my-image.jpg" alt="" />
        </BasicPlane>
      </Curtains>
    </div>
  );
}

export default App;

在 src/App.css 文件中，添加以下样式：

.App {
  text-align: center;
}

.BasicPlane {
  width: 100vw;
  height: 100vh;
}

.BasicPlane img {
  display: none;
}

启动开发服务器：

npm start

现在你应该能看到一个带有 WebGL 效果的页面。

3. 应用案例和最佳实践

基础平面案例

以下是一个基础平面的示例，展示了如何使用 react-curtains 创建一个简单的平面效果：

import React from 'react';
import { Curtains, Plane } from 'react-curtains';

const basicVs = '...'; // 顶点着色器代码
const basicFs = '...'; // 片段着色器代码

function BasicPlane({ children }) {
  // ...平面组件代码
}

function App() {
  return (
    <Curtains>
      <BasicPlane>
        <img src="/path/to/my-image.jpg" alt="" />
      </BasicPlane>
    </Curtains>
  );
}

export default App;

多平面案例

在复杂的场景中，你可以添加多个平面，并使用不同的着色器和效果：

import React from 'react';
import { Curtains, Plane } from 'react-curtains';

// ...其他代码

function App() {
  return (
    <Curtains>
      <BasicPlane>
        <img src="/path/to/my-image.jpg" alt="" />
      </BasicPlane>
      {/* 添加更多平面 */}
    </Curtains>
  );
}

export default App;

4. 典型生态项目

目前，react-curtains 的生态项目还不是很多，但你可以通过查找相关的 GitHub 仓库或 NPM 包来发现和集成其他开发者创建的组件和插件。这些项目可以帮助你更快地实现特定的效果和功能。