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…
I tried many different ways but failed.
is it impossible call another component in Click Event?
Thank you…!!!