{"id":17042161,"url":"https://github.com/mrjasonweaver/threejs-color","last_synced_at":"2026-04-29T19:32:57.198Z","repository":{"id":140601217,"uuid":"380767865","full_name":"mrjasonweaver/threejs-color","owner":"mrjasonweaver","description":"Exploring color in Three.js","archived":false,"fork":false,"pushed_at":"2021-06-30T12:10:41.000Z","size":872,"stargazers_count":1,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-06-19T16:54:03.955Z","etag":null,"topics":["3d","threejs","threejs-example","webgl"],"latest_commit_sha":null,"homepage":"https://mrjasonweaver.github.io/threejs-color/index.html","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/mrjasonweaver.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-06-27T15:00:46.000Z","updated_at":"2021-06-30T15:49:20.000Z","dependencies_parsed_at":null,"dependency_job_id":"9eb4cffb-5930-4693-af94-42f963ba2c5f","html_url":"https://github.com/mrjasonweaver/threejs-color","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/mrjasonweaver/threejs-color","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mrjasonweaver%2Fthreejs-color","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mrjasonweaver%2Fthreejs-color/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mrjasonweaver%2Fthreejs-color/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mrjasonweaver%2Fthreejs-color/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mrjasonweaver","download_url":"https://codeload.github.com/mrjasonweaver/threejs-color/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mrjasonweaver%2Fthreejs-color/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32441063,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-29T18:12:22.909Z","status":"ssl_error","status_checked_at":"2026-04-29T18:11:33.322Z","response_time":110,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["3d","threejs","threejs-example","webgl"],"created_at":"2024-10-14T09:15:21.681Z","updated_at":"2026-04-29T19:32:57.180Z","avatar_url":"https://github.com/mrjasonweaver.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# threejs-color\n\nExploring 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.\n\n## Color Basics\nBranch: https://github.com/mrjasonweaver/threejs-color/tree/color-basics\n\nAdds basic color creation and manipulation examples\n\n### Color Initialization\n- Initialize a color with `Color( r : Color_Hex_or_String, g : Float, b : Float )`\n- Hexadecimal is recommended: `const white = new THREE.Color( 0xffffff );`\n- RGB string: `const white = new THREE.Color('rgb(255,255,255)');`\n- Separate RGB values between 0 and 1: `const white = new THREE.Color(1, 1, 1);`\n\n### Changing scene background color\n- Alpha transparency support: `const renderer = new THREE.WebGLRenderer({ alpha: true });`\n- `scene.background = white;`\n\n### Changing cube color on user input \n- Setting color: `cube.material.color.set(cubeColor);`\n- Setting `cubeColor` on keyboard user input\n\n![alt text](./threejs-color-basics.gif \"Three.js Color Basics\")\n\n## Color Tweening\nBranch: https://github.com/mrjasonweaver/threejs-color/tree/color-tweening\n\nAdds color tweening example\n\n### Setting up state\n- Defining the cube state object\n- Defining `tweenColors()` function \n\n### Conditional to start tween\n- Using `requestAnimationFrame`\n- `Color.equals()` to test if 2 colors are the same\n\n![alt text](./threejs-color-tweening.gif \"Three.js Color Tweening\")\n\n## MeshStandardMaterial and Lighting\nBranch: https://github.com/mrjasonweaver/threejs-color/tree/color-mesh-standard-material-lighting\n\nAdds MeshStandardMaterial and directionalLighting\n\n### MeshStandardMaterial\n- Defining `MeshStandardMaterial` to use for the cube\n- Change the default cube color from black to grey\n\n### Lighting\n- Adding `directionalLight` to the scene\n- Adjust lighting position\n\n![alt text](./threejs-standard-material-lighting.gif \"Three.js Standard Material and Lighting\")","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmrjasonweaver%2Fthreejs-color","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmrjasonweaver%2Fthreejs-color","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmrjasonweaver%2Fthreejs-color/lists"}