Good day friends,
I am creating a website and in the homepage I need to insert an image that is distorted with an animation. For that I got a library called Courtain.js that cost me to understand and a developer managed to make it work and sent me this code, as a component of 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;
The problem is that the site I am developing with Next JS and this technology uses SSR and I think that is bringing me problems. The library function does not even recognize me the shaders that I am sending. Can someone help me with this? This is my code in 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;
The image appears but does not distort, I think it is because the library is not receiving the parameters correctly or it is an SSR error. I am getting an error that vertex and shaders are not specified.
