Run a pixi.js script in react.js project

Question

I'm trying to run a pixi.js script in a react project but I'm blocked with this error:

Cannot read property 'appendChild' of null

I don't know why this error happens. My script must create a canvas element in the div to display an image with a distortion effect: http://guillaumeduclos.fr/ripple-effect/ It works great in a basic HTML and JS environment.

My code:

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import image from './image.png';
import * as PIXI from 'pixi.js'

var width = window.offsetWidth;
var height = window.offsetHeight;
var playground = document.getElementById('pxrender');  
var canvas;
var ratio = 150 / 830;
var count = 0;
var raf;

var renderer = PIXI.autoDetectRenderer(width, height,{transparent:true});
renderer.autoResize = true;
var tp, preview;
var displacementSprite,
    displacementFilter,
    stage;

class App extends Component {

  state = {
    playground: null
  }

  componentDidMount() {
    this.setState({playground: this.refs.pxrender});
  }

  setScene = (url) => {
    playground.appendChild(renderer.view);
    stage = new PIXI.Container();
    tp = PIXI.Texture.fromImage(url);
    preview = new PIXI.Sprite(tp);
    preview.anchor.x = 0;
    displacementSprite = PIXI.Sprite.fromImage('https://res.cloudinary.com/dvxikybyi/image/upload/v1486634113/2yYayZk_vqsyzx.png');
    displacementSprite.texture.baseTexture.wrapMode = PIXI.WRAP_MODES.REPEAT;
    displacementFilter = new PIXI.filters.DisplacementFilter(displacementSprite);
    displacementSprite.scale.y = 0.6;
    displacementSprite.scale.x = 0.6;
    stage.addChild(displacementSprite);
    stage.addChild(preview);
    this.animate();
  }

  removeScene = () => {
    cancelAnimationFrame(raf);
    stage.removeChildren();
    stage.destroy(true);
    playground.removeChild(canvas);
  }

  animate = () => {
    raf = requestAnimationFrame(this.animate);
    displacementSprite.x = count*10;
    displacementSprite.y = count*10;
    count += 0.05;
    stage.filters = [displacementFilter];
    renderer.render(stage);
    canvas = playground.querySelector('canvas');
  }

  render() {

    this.setScene(image);

    return (
      <div ref="pxrender" id="pxrender">

      </div>
    );
  }
}

export default App;

Thank you for your help.

score 4 · Answer 1 · answered Aug 30 '18 at 22:22

You need to start up your Pixi application in componentDidMount(), not render().

Move this.setScene(image); to componentDidMount(), like this:

componentDidMount() {
    this.setScene(image);
}

For a fuller example of a pixi.js scene in React, look here: https://github.com/ccnmtl/astro-interactives/blob/master/sun-motion-simulator/src/DatePicker.jsx

Run a pixi.js script in react.js project

1 Answers1