How to integrate Threejs into React interface

Questions
,
1

Hello,

I want to integrate three js within the simulation tab in the image below.

im2.PNG
im2.PNG1920×818 63.8 KB

I tried something, but it doesn’t work as I want.
I have the following code for the “simulation” page.

import React, { Component } from "react";
import ReactDOM from "react-dom";
import * as THREE from "three";

export default function Simulation() {
  class App extends Component {
    componentDidMount() {
    // three js code
    }
    render() {
      return <div ref={(ref) => (this.mount = ref)} />;
    }
  }
  const rootElement = document.getElementById("root");
  ReactDOM.render(<App />, rootElement);
}

And I obtain the following result when I click the simulation tab. The problem is that I want to keep the sidebar and all the other components of the page. I want the three js part to be like a “window” inside my react webpage.
Moreover, I don’t know if it’s possible, but I want to also insert react component inside the three js window.

im1
im11920×899 3.33 KB

I’m new to react, three js and front end more generally, so I’m a bit lost. Thank you in advance for your answer.

2

I believe this question has been asked a few times before: Best way to integrate PLAIN Three.js inside a React app?

1 Like