adding color | www.techtalks.myglobalcenter.com

www.techtalks.myglobalcenter.com

Adding colors :

This code defines an object obj with six color properties (color1 to color6), each represented in different formats . The gui.addColor() method is used for each color property to add color pickers to a graphical user interface (gui). These color pickers allow users to interactively select and modify the colors associated with each property, providing a convenient way to customize color settings within the scene.

This code initializes obj with size set to 'Medium' and speed to 1. Using gui, it adds dropdown selectors for size ('Small', 'Medium', 'Large') and speed ('Slow' (0.1), 'Normal' (1), 'Fast' (5)). Users can select sizes and speeds directly via the GUI, enhancing interaction for customizing these parameters in scenes.

// Defines an object with various color properties in different formats
  obj = {

  color1: '#AA00FF',
  color2: '#a0f',
  color3: 'rgb(170, 0, 255)',
  color4: 0xaa00ff,
  color5: 0xaa00ff,
  color6: 0xaa00ff
  
  }

// Adds color pickers to the GUI for each color property in obj
  gui.addColor( obj, 'color1' );
  gui.addColor( obj, 'color2' );
  gui.addColor( obj, 'color3' );
  gui.addColor( obj, 'color4' );
  gui.addColor( obj, 'color5' );
  gui.addColor( obj, 'color6' );

// Defines a new obj object with size and speed properties
  obj = { size: 'Medium', speed: 1 };

// Adds dropdown selectors to the GUI for size and speed properties in obj
  gui.add( obj, 'size', [ 'Small', 'Medium', 'Large' ] );
  gui.add( obj, 'speed', { Slow: 0.1, Normal: 1, Fast: 5 } );

Return back to three.js-link page