https://github.com/mrjasonweaver/threejs-color

Exploring color in Three.js
https://github.com/mrjasonweaver/threejs-color

3d threejs threejs-example webgl

Last synced: 2 months ago
JSON representation

Exploring color in Three.js

• Host: GitHub
• URL: https://github.com/mrjasonweaver/threejs-color
• Owner: mrjasonweaver
• Created: 2021-06-27T15:00:46.000Z (almost 4 years ago)
• Default Branch: main
• Last Pushed: 2021-06-30T12:10:41.000Z (almost 4 years ago)
• Last Synced: 2025-01-28T04:42:10.140Z (4 months ago)
• Topics: 3d, threejs, threejs-example, webgl
• Language: JavaScript
• Homepage: https://mrjasonweaver.github.io/threejs-color/index.html
• Size: 852 KB
• Stars: 1
• Watchers: 2
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# threejs-color

Exploring color in Three.js. Code starting point is the [Creating a scene](https://threejs.org/docs/index.html#manual/en/introduction/Creating-a-scene) introduction on the three.js documentation site.

## Color Basics

Branch: https://github.com/mrjasonweaver/threejs-color/tree/color-basics

Adds basic color creation and manipulation examples

### Color Initialization

- Initialize a color with `Color( r : Color_Hex_or_String, g : Float, b : Float )`

- Hexadecimal is recommended: `const white = new THREE.Color( 0xffffff );`

- RGB string: `const white = new THREE.Color('rgb(255,255,255)');`

- Separate RGB values between 0 and 1: `const white = new THREE.Color(1, 1, 1);`

### Changing scene background color

- Alpha transparency support: `const renderer = new THREE.WebGLRenderer({ alpha: true });`

- `scene.background = white;`

### Changing cube color on user input 

- Setting color: `cube.material.color.set(cubeColor);`

- Setting `cubeColor` on keyboard user input

![alt text](./threejs-color-basics.gif "Three.js Color Basics")

## Color Tweening

Branch: https://github.com/mrjasonweaver/threejs-color/tree/color-tweening

Adds color tweening example

### Setting up state

- Defining the cube state object

- Defining `tweenColors()` function 

### Conditional to start tween

- Using `requestAnimationFrame`

- `Color.equals()` to test if 2 colors are the same

![alt text](./threejs-color-tweening.gif "Three.js Color Tweening")

## MeshStandardMaterial and Lighting

Branch: https://github.com/mrjasonweaver/threejs-color/tree/color-mesh-standard-material-lighting

Adds MeshStandardMaterial and directionalLighting

### MeshStandardMaterial

- Defining `MeshStandardMaterial` to use for the cube

- Change the default cube color from black to grey

### Lighting

- Adding `directionalLight` to the scene

- Adjust lighting position

![alt text](./threejs-standard-material-lighting.gif "Three.js Standard Material and Lighting")