Change the scene background on button click

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

		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);

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?

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)});

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.

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.

File Structure:


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.

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))

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.

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

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

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

1 Like

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