Changing an object's color dynamically

Help & Support
#1

https://playcanvas.com/project/473931/overview/dms3

Above is the link to my project.

In VR Scene 4, I am trying to create a room that has three doors; once a user enters a door, the colour of the wall changes, ie if a user enters a red door, the room changes to red. Now if the user enters another door after, let’ say ‘blue’ after ‘red’, the room will turn ‘purple’.

Please help me out with a code. I don’t know how to make it work as I am a noobie23.

#2

For changing the colour of the room, you can do several things:

  • Have a material for each of the colours and and change the material of the room when the user ‘enters’ each door. This tutorial will help: http://developer.playcanvas.com/en/tutorials/switching-materials-at-runtime/
  • Since the material is just a base diffuse colour, you can change the diffuse colour of the material when the user ‘enters’ each door.
  • Not recommended but you can also have 3 rooms, each a different colour and enable/disable them when the user ‘enters’ each door.

Edit: I noticed that you wanted to do colour mixing with the room, in which case you probably be best doing option 2 and adjust the RGB values accordingly. Eg. Halve all the existing RGB values and add to it based on the door entered.

2 Likes
#3

Thanks for the help Steven! Will try the second option out. Really appreciate it

#4

Hey Steven, I have implemented the code from the link you provided and was given a hand with trying to make it work with my scenario, but it didn’t quite work. I was hoping you could help me with the coding of how you think it should look like.

This is the link to the code that my tutor helped me with: https://playcanvas.com/editor/code/473931?tabs=7700631,7760243
I hope you can shed some more light on this.

Thank you very much,
Jeremy

#5

Which scene and which code file am I looking at? That’s now quite a few of each that I’m not sure where to start?

#6

Sorry to be unclear, I was referring to “VR Scene 4” and the script is called “SwitchingMaterial.js”

#7

This is the code you need to change the material diffuse color on a mesh instance:

    for (var i = 0; i < meshInstances.length; ++i) { 
        meshInstances[i].setParameter('material_diffuse', this.color.data3);
    }

Where color is a pc.Color and the RGBA are values between 0-1.

#8

Thanks for that Steven! I will try this one and hopefully I can make it work. Will let you know how it goes. :smiley: