Change the scene background on button click

Questions
, , ,
1 
<button id="btnBlue">Blue</button>
<button id="btnGreen">Green</button>
<button id="btnYellow">Yellow</button>

<script>
		document.getElementById("btnBlue").addEventListener("click", SetSceneBackground(0xADD8E6));
		document.getElementById("btnBlue").addEventListener("click", SetSceneBackground(0x90EE90));
		document.getElementById("btnBlue").addEventListener("click", SetSceneBackground(0xFFFF00));

		// Toggle BG Color
		function SetSceneBackground(colorCode) {
			scene.background = new THREE.Color(colorCode);
		}
</script>

Now it is obvious that since the scene is not yet initialized, this will throw an error. Scene instance is created in the init() method. How do I achieve this?

2

In the code provided, you add three event listeners to one button (btnBlue).

Maybe to use something like this:

document.getElementById("btnBlue").addEventListener("click", event => {SetSceneBackground(0xADD8E6)});
document.getElementById("btnGreen").addEventListener("click", event => {SetSceneBackground(0x90EE90)});
document.getElementById("btnYellow").addEventListener("click", event => {SetSceneBackground(0xFFFF00)});
3

The question is where do I place this code? Since the scene gets instantiated in the init() method, it will throw an error that scene is not defined? What I am trying to do is just change the background color of the scene. However, it either does not find the scene or if I place the event listener in the init() method then it will throw some other error.

4

Doesn’t it mean, that you call SetSceneBackground(...) immediately in this line?
Instead, wrap this call in a function for callback: event => {SetSceneBackground(...)}.

Would be cool to provide a working live code example, that demonstrates the issue and the structure of your project.

5

File Structure:

threejs

HTML file. Please note this is just the WebGL_Loader_GLTF example from the threejs website. I am just fiddling with it for the purpose of getting hang of it.

WebGL_Loader_GLTF.html (5.4 KB)

In this current example, I have used radio button instead of button. Alert shows the right value being selected. However, the scene background color does not change yet.

6

like @prisoner849 said, there is a bug in your code, it doesn’t matter where you place it.

this is wrong, it gets called immediately, and it won’t return a callable function, just undefined

document.getElementById("btnBlue").addEventListener("click", SetSceneBackground(0xADD8E6))

this is right, it gets called once the button is pressed, it won’t crash

document.getElementById("btnBlue").addEventListener("click", () => SetSceneBackground(0xADD8E6))
7

Tried this and it throws this error:

Uncaught ReferenceError: SetSceneBackground is not defined
at HTMLButtonElement

Uploaded file for your reference:

WebGL_Loader_GLTF copy.html (5.7 KB)

And if I place the function outside <script type="module"> then it will obviously throw scene not defined error as the instance of the scene is not yet created.

8

i think you just need to put your SetSceneBackground function and event listeners into the same section of code that scene is defined, you’ve got it in a completely irrelevant place and out of the scope of scene, otherwise it works…

1 Like
9

I have tried putting both in the init() itself. However, it does not recognize the click.

10

see the linked pen, it’s pretty straight forward.

1 Like
11

Thank you. This is working. Seems like I missed something stupid.