React

HTML

<script src="https://threejs.org/build/three.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/simplex-noise/2.4.0/simplex-noise.min.js"></script>
<div id="app">

</div>

React

const rand = (min,max) => min + Math.random()*(max-min);

class ExplosionsSequence extends React.Component{
    constructor(props){
        super(props);
        this.canvasRef = React.createRef();
        this.clock = new THREE.Clock();
        this.simplex = new SimplexNoise();
    }

    componentDidMount = () => {
        this.init();
    }
    init = () => {
        this.color = new THREE.Color();
        //scene
        this.scene = new THREE.Scene();

        //renderer
        this.renderer = new THREE.WebGLRenderer({ antialias: true });
        this.renderer.setClearColor(0x666666);
        this.renderer.setSize( window.innerWidth, window.innerHeight )
        this.mount.appendChild(this.renderer.domElement);

        //camera
        this.camera = new THREE.PerspectiveCamera(45, window.innerWidth/window.innerHeight, 1, 10000);
        this.camera.position.z = 1000; 
        this.camera.position.x = 0;
        this.camera.position.y = 100;
        this.controls = new THREE.OrbitControls(this.camera, this.renderer.domElement);
          
        this.gridHelper = new THREE.GridHelper(2000, 60, 0xffffff, 0xffffff);
        this.gridHelper.material.transparent = true;
        this.gridHelper.material.opacity = .3;
        this.scene.add(this.gridHelper);


        this.axisHelper = new THREE.AxesHelper(100);
         this.scene.add(this.axisHelper);

          //lights
          let hemiLight = new THREE.HemisphereLight(0xffffff,  0.91);
            hemiLight.position.set(0, 50, 0);
            // Add hemisphere light to scene
            this.scene.add(hemiLight);
  
  
            // geometry
            this.geometry = new THREE.BufferGeometry();
            this.particles = 10;
            const radius = 200;
            this.positions = new Float32Array(this.particles * 3);
						this.colors = new Float32Array(this.particles * 3);
            this.sizes = new Float32Array(this.particles);
            this.size = 1000;
            this.parts = [];
     ...