We use cookies to ensure that we give you the best experience on our website. If you continue to use this site we will assume that you are happy with it.

Adding a color picker

Home Forums Programming Adding a color picker

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
  • #29292

    Whenever I add code into my project.js file the app won’t open and neither will puzzles. I’ve tried some color pickers I found online as well as giving this one a whirl (https://cdn.soft8soft.com/demo/examples/index.html#webgl_materials_nodes), but its the same result every time. I’d like to have something that resembles Blender’s RGB node to change the color of selected objects. I’m not the best with code so help is greatly appreciated.


    Use a color ramp node with 4 points in it’s spectrum being 1st RGB (RED) 1.0.O 2nd (GREEN) 0.1.0 3rd (BLUE) 0.0.1. 4th (RED) 1.0.0.

    Put the 2 reds at each end.
    The green at .33 the blue at .66.

    Plug a value node into the Fac of the color ramp. Name it color in both fields.

    Use that color value to cycle through colors in your material.
    Use creative inputs linked to the value node for user color change input.

    Ie: drag object changes variable.
    material color value changes from variable. (Variable can be processed)

    • This reply was modified 5 months, 1 week ago by GlifTekGlifTek.

    Could you elaborate more on the UI side of this? I currently have a scooter configurator type setup just FYI.
    Dragging seems to just change it to the specified value in puzzles. I tried setting the factor on the color ramp to increase by .1 every time you click on an object but it doesn’t seem that practical and it doesn’t loop back around (ends on red). Fine-tuning hue and saturation will be important for the end result. Is there a way to link an xy value to the dragging action?


    The “basic/standard” example here is basically exactly what I need. A color picker and a few sliders: https://cdn.soft8soft.com/demo/examples/index.html#webgl_materials_nodes

    I’m having trouble implementing it though, I’ve never worked with code before.


    You can use logic and numbers greater/less than puzzles (or nodes) to tell the value to return to 0 if the user brings it over 1.0.

    To have the xyz values change you attach the value variable to the get position of your slider and put a constraint (in blender or puzzles ) on the axis you don’t want moved.
    You can also make a handle parented to a rotating empty that goes in a continuous circle to change values.

    I’ll post an example when I have time.

    I saw someone post an os native color picker here once. Can’t find it though.

    The controls in your example see three.js controls. I haven’t played with those yet.

    As far as I know they’re built in and aren’t attached to any specific variables automatically.

    • This reply was modified 5 months, 1 week ago by GlifTekGlifTek.

    hey i put up a color levels interface project over in the tutorials section of the forum…
    GlifTek Examples: “Color Levels: COLOR RAMP”


    • This reply was modified 5 months, 1 week ago by GlifTekGlifTek.

    GlifTek this is perfect. Thank you!

Viewing 7 posts - 1 through 7 (of 7 total)
  • You must be logged in to reply to this topic.