Hello,
I am using Three.js with React.js
I found a problem while I was working.
When I clicked screen, it seems to be selected.
and this is my code.
what is wrong?
thank you.
import React, { Component } from 'react';
import * as THREE from 'three';
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
import { GUI } from 'three/examples/jsm/libs/dat.gui.module'
let three = {
scene : null,
camera : null,
renderer : null,
controls : null,
}
class ThreeDMainScreen extends Component {
componentDidMount() {
const width = this.mount.clientWidth;
const height = this.mount.clientHeight;
three.scene = new THREE.Scene();
three.renderer = new THREE.WebGLRenderer({ antialias: true });
three.camera = new THREE.PerspectiveCamera(
75,
width / height,
0.1,
1000
)
const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshBasicMaterial({ color: '#433F81' });
const cube = new THREE.Mesh(geometry, material);
three.scene.add(cube);
three.camera.position.z = 4;
three.renderer.setClearColor('#000000');
three.renderer.setSize(width, height);
this.controls = new OrbitControls(three.camera, three.renderer.domElement);
this.controls.enableDamping = true;
this.controls.dampingFactor = 0.25;
this.mount.appendChild(three.renderer.domElement);
this.start();
}
componentWillUnmount() {
this.stop();
this.mount.removeChild(three.renderer.domElement)
}
start = () => {
if (!this.frameId) {
this.frameId = requestAnimationFrame(this.animate);
}
}
stop = () => {
cancelAnimationFrame(this.frameId);
}
animate = () => {
this.renderScene();
this.frameId = window.requestAnimationFrame(this.animate);
}
renderScene() {
three.renderer.render(three.scene, three.camera);
}
render() {
return (
<div
style={{ width: '215%', height: '108%'}}
ref={(mount) => { this.mount = mount }}
/>
)
}
}