onClickEvent Call another component

Questions
1 
import React, { Component } from "react";
import * as THREE from "three";

import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";

import MaterialUI from "./popup";

let three = {
  scene: null,
  camera: null,
  renderer: null,
  orbitcontrols: null,
  dragcontrols: null,
  mouse: null,
  raycaster: null,
};

class ThreeMainUI extends Component {
  constructor(props) {
    super(props);
    this.state = {
      isPopup: false,
    };
  }

  componentDidMount() {
    this.initThreeJS();
    this.initData();
    let animate = () => {
      requestAnimationFrame(animate);
      three.renderer.render(three.scene, three.camera);
      if (this.state.isPopup) {
          alert(this.state.isPopup)

        this.state.isPopup = !this.state.isPopup;
        return <BasicTable />;
      }
    };
    animate();
  }

  initThreeJS = () => {
    three.scene = new THREE.Scene();
    three.camera = new THREE.PerspectiveCamera(
      75,
      window.innerWidth / window.innerHeight,
      0.1,
      10000
    );

    three.renderer = new THREE.WebGLRenderer();
    three.renderer.setSize(window.innerWidth, window.innerHeight);

    three.camera.position.z = 100;
    three.orbitcontrols = new OrbitControls(

      three.camera,
      three.renderer.domElement
    );

    three.mouse = new THREE.Vector2();
    three.raycaster = new THREE.Raycaster();
    this.mount.appendChild(three.renderer.domElement);
    document.addEventListener("click", this.onMouse, false);
  };

  initData = () => {
    const boxGeometry = new THREE.BoxGeometry(1, 1, 1);
    const boxMaterial = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
    const cube = new THREE.Mesh(boxGeometry, boxMaterial);
    cube.scale.set(5, 5, 5);
    three.scene.add(cube);
  };

  onMouse = (event) => {
    event.preventDefault();
    three.raycaster.setFromCamera(three.mouse, three.camera);

    three.camera.updateProjectionMatrix();
    three.mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
    three.mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;

    let intersects = three.raycaster.intersectObjects(
      three.scene.children,
      true
    );

    if (intersects.length > 0) {
      return <MaterialUI/>
    }
  };

  render() {
    return (
      <div>
        <div ref={(ref) => (this.mount = ref)} />
      </div>
    );
  }
}

export default ThreeMainUI;

Hi
I want Show MaterialUI Popup onMouse click event.

but, it was failed…:sweat_smile:
I tried many different ways but failed.
is it impossible call another component in Click Event?
Thank you…!!!

2

this code does nothing, you returning a component in the event handler doesn’t make that component show up. you need to this.setState a flag and then render the UI.

this is react though, use react-three-fiber and this problem goes away along with most of the code you’ll ever need to write, you’d be shooting yourself in the foot trying to mix imperative and declarative like that.

you find an example for a popup here: React Three Fiber Documentation (the sky dome, but all that have the “html” tag should be interesting for you).

given that you want the HTML popup follow the meshs whereabouts (like CSS2dRenderer does):

import { Canvas } from '@react-three/fiber'
import { Html } from '@react-three/drei'

function App() {
  const [show, set] = useState(false)
  return (
    <Canvas>
      <mesh onClick={() => set(true)}>
        <boxGeometry args={[5, 5, 5]} />
        <meshBasicMaterial color="green" />
        <Html>
          {show && <MaterialUI />}
        </Html>
      </mesh>
    </Canvas>
  )
}
3

thank you for reply.
have a nice day !!