hey, guys noob alert here I have an issue of integrating dat.GUI with react component I tried loading it after the objects loaded but it did not work crying for any suggestions here is the code
import React, { Component } from "react";
import logo from "./logo.svg";
import "./App.css";
import * as THREE from "three";
import { RectAreaLightHelper } from "three/examples/jsm/helpers/RectAreaLightHelper";
import { Noise } from "noisejs";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
import * as dat from "dat.gui";
const style = {
height: 800,
width: 600
};
class App extends Component {
componentDidMount() {
this.sceneSetup();
this.startAnimationLoop();
window.addEventListener("resize", this.handleWindowResize);
}
componentWillUnmount() {
window.removeEventListener("resize", this.handleWindowResize);
window.cancelAnimationFrame(this.requestID);
this.controls.dispose();
}
sceneSetup = () => {
//GUI
this.params = {
spot: {
enable: false,
color: 0xffffff,
distance: 0,
angle: Math.PI / 3,
penumbra: 0,
helper: false,
moving: false,
},
area: {
enable: false,
color: 0xffffff,
width: 10,
height: 10,
helper: false,
moving: false,
},
};
const width = this.el.clientWidth;
const height = this.el.clientHeight;
this.scene = new THREE.Scene();
//init Clock
this.clock = new THREE.Clock();
//camera
this.camera = new THREE.PerspectiveCamera(
60,
window.innerWidth / window.innerHeight,
0.1,
1000
);
this.camera.position.set(0, 1, 15); //wide position
this.camera.lookAt(0, 0, 0);
//objects
const geometry = new THREE.SphereGeometry(1, 20, 15);
const material = new THREE.MeshStandardMaterial({ envMap: envMap });
const sphere = new THREE.Mesh(geometry, material);
let ball;
for (let x = -3; x <= 3; x += 2) {
for (let y = -3; y <= 3; y += 2) {
for (let z = -3; z <= 3; z += 2) {
ball = sphere.clone();
ball.position.set(x, y, z);
this.scene.add(ball);
}
}
}
this.addGUI();
//lights
const ambient = new THREE.HemisphereLight(0xffffff, 0xaaaa66, 0.35);
this.scene.add(ambient);
//Add lights here
this.lights = {};
this.lights.spot = new THREE.SpotLight();
this.lights.spot.visible = false;
this.lights.spot.position.set(1, 10, 1);
this.lights.spotHelper = new THREE.SpotLightHelper(this.lights.spot);
this.lights.spotHelper.visible = false;
this.scene.add(this.lights.spotHelper);
this.scene.add(this.lights.spot);
this.lights.areaParent = new THREE.Object3D();
this.lights.area = new THREE.RectAreaLight();
this.lights.area.visible = false;
this.lights.area.position.set(0, 8, 0);
this.lights.area.lookAt(0, 0, 0);
this.lights.areaHelper = new RectAreaLightHelper(this.lights.area);
this.lights.areaHelper.visible = false;
this.lights.area.add(this.lights.areaHelper);
this.scene.add(this.lights.areaParent);
this.lights.areaParent.add(this.lights.area);
//render
this.renderer = new THREE.WebGLRenderer({ antialias: true });
this.renderer.setSize(width, height);
this.el.appendChild(this.renderer.domElement);
//controls
this.controls = new OrbitControls(this.camera, this.el);
this.controls.target.set(0, 0, 0);
this.controls.update();
};
addGUI = () => {
console.log("gui");
this.gui = new dat.GUI({ name: "My GUI" });
const spot = this.gui.addFolder("Spot");
spot.open();
spot.add(this.params.spot, "enable").onChange((value) => {
this.lights.spot.visible = value;
});
spot
.addColor(this.params.spot, "color")
.onChange((value) => (this.lights.spot.color = new THREE.Color(value)));
spot
.add(this.params.spot, "distance")
.min(0)
.max(20)
.onChange((value) => {
this.lights.spot.distance = value;
this.lights.spotHelper.update();
});
spot
.add(this.params.spot, "angle")
.min(0.1)
.max(1.57)
.step(0.1)
.onChange((value) => {
this.lights.spot.angle = value;
this.lights.spotHelper.update();
});
spot
.add(this.params.spot, "penumbra")
.min(0)
.max(1)
.step(0.05)
.onChange((value) => (this.lights.spot.penumbra = value));
spot
.add(this.params.spot, "helper")
.onChange((value) => (this.lights.spotHelper.visible = value));
spot.add(this.params.spot, "moving");
const area = this.gui.addFolder("RectArea");
//area.open();
area.add(this.params.area, "enable").onChange((value) => {
this.lights.area.visible = value;
});
area
.addColor(this.params.area, "color")
.onChange((value) => (this.lights.area.color = new THREE.Color(value)));
area
.add(this.params.area, "width")
.min(1)
.max(15)
.onChange((value) => {
this.lights.area.width = value;
this.lights.areaHelper.update();
});
area
.add(this.params.area, "height")
.min(1)
.max(15)
.onChange((value) => {
this.lights.area.height = value;
this.lights.areaHelper.update();
});
area
.add(this.params.area, "helper")
.onChange((value) => (this.lights.areaHelper.visible = value));
area.add(this.params.area, "moving");
};
//UPDATE
startAnimationLoop = () => {
this.renderer.render(this.scene, this.camera);
this.requestID = window.requestAnimationFrame(this.startAnimationLoop);
//get the vertices
const time = this.clock.getElapsedTime();
const delta = Math.sin(time) * 5;
if (this.params.area.moving) {
this.lights.areaParent.rotation.z = time;
this.lights.areaHelper.update();
}
if (this.params.spot.moving) {
this.lights.spot.position.x = delta;
this.lights.spotHelper.update();
}
};
//RISIZE
handleWindowResize = () => {
const width = this.el.clientWidth;
const height = this.el.clientHeight;
this.renderer.setSize(width, height);
this.camera.aspect = width / height;
this.scene.add(this.camera);
this.camera.updateProjectionMatrix();
};
render() {
return (
<div>
<div style={style} ref={(ref) => (this.el = ref)} />
</div>
);
}
}
return (
<>
<button
onClick={() =>
this.setState((state) => ({ isMounted: !state.isMounted }))
}
>
{isMounted ? "Unmount" : "Mount"}
</button>
{isMounted && <App />}
{isMounted && <div>Scroll to zoom, drag to rotate</div>}
</>
);
}
}
export default Container;`