javascript - 带有 Courtain.js 库的下一个 JS 未接收参数
问题描述
朋友们好日子
我正在创建一个网站,并且在主页中我需要插入一个被动画扭曲的图像。为此,我得到了一个名为 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 错误。我收到一个错误,即未指定顶点和着色器。
解决方案
不要将着色器指定为 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
}
}
};
那应该可以解决您的问题。
推荐阅读
- xamarin.android - Xamarin,平台构建工具的效果(android)
- spacy - 您能否确定现有 EntityRecognizer (NER) 的标签列表?
- python - Django 中的 {% block content %} 和 {% endblock content %} 是什么?
- android - 如何从 Gradle 获得编译时 SDK 兼容性警告?
- azure - 为 HTTPS 访问配置 AKS 负载平衡器
- c# - 列表中的索引越界没有明显的原因(C#)?
- angular - 如何更改 aws CodeBuild 上的构建文件夹
- c - 在 Verilog Procedural Interface 中,是否可以多次扫描迭代循环?
- node.js - 我可以在没有本地复制/开发环境的情况下在 AWS Lambda 上安装 NPM 包吗?
- python - NameError 的变量,直到运行时我才有价值