I am currently working on a three.js program
My main goal is to display a 2D panel in front of the three.js scene for debugging purposes.
- I plan to achieve this by creating a
divelement and adjusting its z-index to show it above the three.js canvas.
Unfortunately, my 2D panel is not appearing as expected.
My question is:
Is my approach of using a div element correct for displaying content over webGL, or should I consider integrating the panel directly into the webGL rendering?
Below are snippets of my source code:
import React,{useRef,useState,useEffect} from 'react'
import axios from 'axios';
import styles from "../css/test-styles.module.css";
import * as THREE from 'three';
import TrackballControls from 'three-trackballcontrols';
import three_test from "../images/three_test.jpg";
function ThreeDebugInfo(){
return <div style={{width:"500px",zIndex:100}}>testtesttest</div>
}
function GlCanvas() {
const refContainer = useRef(null);
useEffect(() => {
// === THREE.JS CODE START ===
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 10000);
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth /100 * 80, window.innerHeight / 100 * 80);
refContainer.current && refContainer.current.appendChild( renderer.domElement );
camera.position.z = -500;
const loadTex = async () =>{
const texLoader = new THREE.TextureLoader();
var texture = new THREE.TextureLoader().load(three_test);
console.log("check texture is loaded:",texture);
var ground_geo = new THREE.PlaneGeometry( 3309, 2339, 8, 8 );
ground_geo.translate(0, 0, -50);
var ground_mat = new THREE.MeshBasicMaterial({ map: texture });
var ground = new THREE.Mesh(
ground_geo,
ground_mat
);
scene.add( ground );
var cube_geo = new THREE.BoxGeometry(100, 100, 100);
var cube_mat = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
var cube = new THREE.Mesh(cube_geo, cube_mat);
scene.add(cube);
const controls = new TrackballControls(camera, renderer.domElement);
camera.position.z = 5;
controls.rotateSpeed = 5.0;
controls.zoomSpeed = 1.2;
controls.panSpeed = 0.3;
controls.update();
const animate = function () {
requestAnimationFrame(animate);
controls.update();
renderer.render(scene, camera);
}
animate();
}
loadTex();
}, []);
return (
<div style={{zIndex:1}} ref={refContainer}></div>
);
}
function ThreePage() {
return (
<React.Fragment>
<GlCanvas></GlCanvas>
<ThreeDebugInfo></ThreeDebugInfo>
</React.Fragment>
);
}
export default ThreePage