How we create a button in scene

Questions
1

Hi is there any way to create button in scene .Like I have checked all the examples so its difficult to understand .If a basic example exist then plz share with me :slight_smile:

2

If you mean a mesh-based button in a 3d environment that is interactive, there isn’t really a pre-made component that you can use in three. Three-mesh-ui is a library that you could try, it’s meant for VR but it looks like it works without as well.

Or, for a more general answer, what you want to do is probably cast a ray from your camera using mouse coordinates and check if the ray intersects with a mesh of your choice. If it does… you have a button! Kind of :smiley:

(Also if you are comfortable with react: react-three-fiber abstracts away a lot of this and just gives you the ability to use onClick events on meshes)

2 Likes
3

The buttons I create are made with html/css they call a function within the js code.
Is that what you are looking for? Or did you want to create a button in the scene using only three.js?

4

Thank you so much for you quick response

5

actually I don’t want to use css3d renderer to create a button in scene .I just want to create a simple button with HTML/CSS which look in scene not show out of the scene

6

Here is some sample code I use in creating my “Pause” Button.

HTML - You reference the button prior to the JS Code

<body>
***
<button id="PAW" class="pauseButton">Pause</button>
***

JS - You create a listener and a handler in the JS Code

<script>
***
document.getElementById("PAW").addEventListener("click", togglePause, false);
***
// Toggle Pause
function togglePause() {
	PawsOn = 1 - PawsOn;	// toggles between 0 and 1
}

CSS - You define the style and location of the button in the CSS file, e.g.:

button {
	-webkit-appearance: none;	
	font-family: Courier;
	font-size: 12pt;
	text-align: center;
	position: absolute;
	min-width: 80px;
	border-radius: 0;
	z-index: 1;
}

.pauseButton {
	right: 20px;
	top: 10px;
}

Here is one of my recent programs with lots of buttons.
(I use them to make my programs accessible to iPad and iPhone users.)

1 Like
7

Thank you So much :slight_smile: