How to create a separate gui window with GUI elements using a button?

Questions
1

How to create a “selection window” using the button?? To create a window with interface elements (input of numbers “input lines” and buttons “push buttons”)

введите сюда описание изображения

2

You can do that using just HTML and CSS - just make sure to set the z-index higher than the three.js canvas.

(You can also do that in 3D - but it’s a bit harder, since first, you’d need two rendering passes, second, you’d need to do math to position and scale things properly on the screen. No need for that if you’re satisfied with what HTML can offer you :relieved:)

1 Like
3

Maybe this topic and its examples will be helpful/useful somehow: Globe with markers and label: thoughts, ideas, approaches, solutions

1 Like
4

I training use CSS2DRenderer but text not app.

import { CSS2DRenderer, CSS2DObject } from 'three/addons/renderers/CSS2DRenderer.js';

let moon;
... 
const geometry2= new THREE.BoxGeometry( 1, 1, 1 );
              const material2= new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
              moon = new THREE.Mesh( geometry2, material2 );
              
                
                // надписи
                
                const moonDiv = document.createElement( 'div' );
                moonDiv.className = 'label';
                moonDiv.textContent = 'Moon';
                moonDiv.style.backgroundColor = 'transparent';

                const moonLabel = new CSS2DObject( moonDiv );
                moonLabel.position.set( 4,4,4);
                moonLabel.center.set( 0, 1 );
                moon.add( moonLabel );
                moonLabel.layers.set( 0 );

                const moonMassDiv = document.createElement( 'div' );
                moonMassDiv.className = 'label';
                moonMassDiv.textContent = '7.342e22 kg';
                moonMassDiv.style.backgroundColor = 'transparent';

                const moonMassLabel = new CSS2DObject( moonMassDiv );
                moonMassLabel.position.set( 4,4,4);
                moonMassLabel.center.set( 0, 0 );
                moon.add( moonMassLabel );
                moonMassLabel.layers.set( 1 );
                
                scene.add( moon);