问画布上方的三个js和react按钮

EN

import React, { Component } from 'react'
    import * as THREE from 'three'
    //import Button from '@material-ui/core/Button';

    class Scene extends Component {
    constructor(props) {
    super(props)

    this.start = this.start.bind(this)
    this.stop = this.stop.bind(this)
    this.animate = this.animate.bind(this)
    }

    componentDidMount() {
    const sizes = {
        width : window.innerWidth,
        height : window.innerHeight
    }

    const scene = new THREE.Scene()

    window.addEventListener('resize', () =>
    {
    // Update sizes
    sizes.width = window.innerWidth
    sizes.height = window.innerHeight

    // Update camera
    camera.aspect = sizes.width / sizes.height
    camera.updateProjectionMatrix()

    // Update renderer
    renderer.setSize(sizes.width, sizes.height)
    renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))
    })

    const renderer = new THREE.WebGLRenderer({ antialias: true })
    const geometry = new THREE.BoxGeometry(1, 1, 1, 10, 10, 10 );
    const particlesGeometry = new THREE.BufferGeometry();
    const particlesCnt = 8000;

    const posArray = new Float32Array(particlesCnt * 3);

    for (let i=0; i< particlesCnt *3; i++) {
    posArray[i] = (Math.random() - 0.5 ) *5
    }

    particlesGeometry.setAttribute('position', new THREE.BufferAttribute(posArray, 3));
    
    const material = new THREE.PointsMaterial({
        size: 0.005
    })

    // Texture Loader
    const loader = new THREE.TextureLoader()
    const star = loader.load('./star.png')
    const particlesMaterial = new THREE.PointsMaterial({
        size: 0.005,
        map: star,
        transparent: true,
        //color: 'blue'
        //bleding: THREE.AdditiveBlending
    })
    
    const cube = new THREE.Points(geometry, material)
    const particlesMesh = new THREE.Points(particlesGeometry, particlesMaterial);
    scene.add(cube, particlesMesh)

    const pointLight = new THREE.PointLight(0xffffff, 0.1)
    pointLight.position.x = 2
    pointLight.position.y = 3
    pointLight.position.z = 4
    scene.add(pointLight)

    //camera.position.z = 4
    // scene.add(cube)
    // renderer.setClearColor('#000000')

    
    const camera = new THREE.PerspectiveCamera(75, sizes.width /sizes.height, 0.1, 100)
    camera.position.x = 0
    camera.position.y = 0
    camera.position.z = 2
    scene.add(camera)

    renderer.setSize(sizes.width, sizes.height)

    this.scene = scene
    this.camera = camera
    this.renderer = renderer
    this.material = material
    this.cube = cube
    this.particlesMesh = particlesMesh

    this.mount.appendChild(this.renderer.domElement)
    this.start()
    }

    componentWillUnmount() {
    this.stop()
    this.mount.removeChild(this.renderer.domElement)
    }

    start() {
    if (!this.frameId) {
      this.frameId = requestAnimationFrame(this.animate)
    }
    }

    stop() {
    cancelAnimationFrame(this.frameId)
    }

    animate() {
    //this.cube.rotation.x += 0.01
    this.cube.rotation.y += 0.01
    this.particlesMesh.rotation.y += 0.01

    this.renderScene()
    this.frameId = window.requestAnimationFrame(this.animate)
    
    }

    renderScene() {
    this.renderer.render(this.scene, this.camera)
    }

    render() {
    return (
      <div
        style={{ width: '400px', height: '400px' }}
        ref={(mount) => { this.mount = mount }}
      >
          </div>
    )
    }
    }

    export default Scene