How to use light effects in ThreeJS editor on added shapes - three.js

Question

I'm quite new on ThreeJS and I read the documentation and followed a lot of tutorials.
I now know how to interact with objects (transform, mouseover, rotation, computation on positions and scales, etc.), but I struggle handling the light. For the moment my scene has 4 elements I added thanks to the "Add > cube" menu. When I play the scene, everything is animated correctly, but the color remains the same: everything is in the #XXXXXX color I set.
What I would like is to have an effect of light and shadow like this: https://threejs.org/docs/#api/en/materials/MeshStandardMaterial
I think I have put every option like in this page. What did I do wrong? Here is my scene:
{
"metadata": {
"version": 4.5,
"type": "Object",
"generator": "Object3D.toJSON"
},
"geometries": [
{
"uuid": "4346FD85-69A5-4085-B397-3CDEA12FBCA1",
"type": "BoxBufferGeometry",
"width": 1.8,
"height": 1.8,
"depth": 1.8,
"widthSegments": 1,
"heightSegments": 1,
"depthSegments": 1
},
{
"uuid": "BCF75EF3-3759-4B20-96E1-720C509A3637",
"type": "SphereBufferGeometry",
"radius": 1,
"widthSegments": 8,
"heightSegments": 6,
"phiStart": 0,
"phiLength": 6.283185,
"thetaStart": 0,
"thetaLength": 3.141593
},
{
"uuid": "44E67ACB-39CB-4562-9BDE-4DB448366ED0",
"type": "DodecahedronBufferGeometry",
"radius": 1.2,
"detail": 0
},
{
"uuid": "F0338DDF-165A-47ED-A094-2537432A503B",
"type": "IcosahedronBufferGeometry",
"radius": 1.5,
"detail": 0
}],
"materials": [
{
"uuid": "388DEE89-D57C-4853-A22D-01554B78FF5B",
"type": "MeshPhongMaterial",
"color": 16777215,
"emissive": 0,
"specular": 1118481,
"shininess": 30,
"depthFunc": 3,
"depthTest": true,
"depthWrite": true,
"stencilWrite": false,
"stencilWriteMask": 255,
"stencilFunc": 519,
"stencilRef": 0,
"stencilFuncMask": 255,
"stencilFail": 7680,
"stencilZFail": 7680,
"stencilZPass": 7680
},
{
"uuid": "C9CA005B-89BC-4CD7-A13E-6F18610A2907",
"type": "MeshStandardMaterial",
"color": 16777215,
"roughness": 1,
"metalness": 0,
"emissive": 14869218,
"depthFunc": 3,
"depthTest": true,
"depthWrite": true,
"stencilWrite": false,
"stencilWriteMask": 255,
"stencilFunc": 519,
"stencilRef": 0,
"stencilFuncMask": 255,
"stencilFail": 7680,
"stencilZFail": 7680,
"stencilZPass": 7680
},
{
"uuid": "B5419D03-751E-421C-980E-3B004191B7A9",
"type": "MeshStandardMaterial",
"name": "poly2",
"color": 16777215,
"roughness": 1,
"metalness": 0,
"emissive": 10658466,
"depthFunc": 3,
"depthTest": true,
"depthWrite": true,
"stencilWrite": false,
"stencilWriteMask": 255,
"stencilFunc": 519,
"stencilRef": 0,
"stencilFuncMask": 255,
"stencilFail": 7680,
"stencilZFail": 7680,
"stencilZPass": 7680,
"skinning": true
},
{
"uuid": "44FC5BB3-405E-4DF1-9018-087E6BCE1DAE",
"type": "MeshStandardMaterial",
"name": "poly3",
"color": 16777215,
"roughness": 1,
"metalness": 0,
"emissive": 7829367,
"depthFunc": 3,
"depthTest": true,
"depthWrite": true,
"stencilWrite": false,
"stencilWriteMask": 255,
"stencilFunc": 519,
"stencilRef": 0,
"stencilFuncMask": 255,
"stencilFail": 7680,
"stencilZFail": 7680,
"stencilZPass": 7680,
"skinning": true
}],
"object": {
"uuid": "70493730-BD58-409F-8879-037628764C76",
"type": "Scene",
"name": "Scene",
"userData": {
"souris": [],
"formes": [
"Box",
"Icosahedron",
"Dodecahedron",
"Sphere"]
},
"layers": 1,
"matrix": [1,0,0,0,0,1,0,0,0,0,1,0,-0.04,-5.06,0,1],
"children": [
{
"uuid": "AE0F3376-E0B4-47A2-8EE4-821522A4E7E2",
"type": "Mesh",
"name": "Box",
"userData": {
"position": {
"x": 0,
"y": 7.6,
"z": 0
},
"couleurs": [
"FFFFFF",
"095256"],
"decalage": 0.5
},
"layers": 1,
"matrix": [1,0,0,0,0,1,0,0,0,0,1,0,-0.003758,7.6,0.001485,1],
"geometry": "4346FD85-69A5-4085-B397-3CDEA12FBCA1",
"material": "388DEE89-D57C-4853-A22D-01554B78FF5B"
},
{
"uuid": "68FBB0DB-A517-45DD-AE8D-E414E2B5730B",
"type": "Mesh",
"name": "Sphere",
"userData": {
"position": {
"x": 0,
"y": 1,
"z": 0
},
"couleurs": [
"FFFFFF",
"86A873"],
"decalage": 0.2
},
"layers": 1,
"matrix": [1,0,0,0,0,1,0,0,0,0,1,0,0,1,0,1],
"geometry": "BCF75EF3-3759-4B20-96E1-720C509A3637",
"material": "C9CA005B-89BC-4CD7-A13E-6F18610A2907"
},
{
"uuid": "816269B9-8C50-4C7D-80B0-D688F0FFF6D2",
"type": "Mesh",
"name": "Dodecahedron",
"userData": {
"position": {
"x": 0,
"y": 3,
"z": 0
},
"couleurs": [
"FFFFFF",
"5AAA95"],
"decalage": 0.3
},
"layers": 1,
"matrix": [1,0,0,0,0,1,0,0,0,0,1,0,0,3,0,1],
"geometry": "44E67ACB-39CB-4562-9BDE-4DB448366ED0",
"material": "B5419D03-751E-421C-980E-3B004191B7A9"
},
{
"uuid": "8A74081A-5E4F-46A5-9F9E-75537641605F",
"type": "Mesh",
"name": "Icosahedron",
"userData": {
"position": {
"x": 0,
"y": 5.4,
"z": 0
},
"couleurs": [
"FFFFFF",
"087F8C"],
"decalage": 0.5
},
"layers": 1,
"matrix": [1,0,0,0,0,1,0,0,0,0,1,0,0,5.4,0,1],
"geometry": "F0338DDF-165A-47ED-A094-2537432A503B",
"material": "44FC5BB3-405E-4DF1-9018-087E6BCE1DAE"
},
{
"uuid": "8666758A-A261-4E55-91DE-6B0B57C2A104",
"type": "AmbientLight",
"name": "AmbientLight",
"layers": 1,
"matrix": [1,0,0,0,0,1,0,0,0,0,1,0,0,0,4.700659,1],
"color": 13355979,
"intensity": 0.5
}]
}
}

Answer 1

The problem is that you're using AmbientLight, which doesn't have light or dark sides. It illuminates every face evenly, as if the light is coming from every direction, giving all your geometries a flat appearance. Try using something more exciting, like DirectionalLight, Spotlight, or HemisphereLight to get some shading variation. You could spend some time playing with different lights and reading the docs to see how each light behaves differently. See here to read about AmbientLight.
The second issue is that you're modifying the .emissive property of the material. Adding an emissive color means it will ignore lights, and will just glow on its own. That's why you're getting such flat gray colors. Try instead changing its .color property, which will interact more naturally with the light.
See below, I added a DirectionalLight, removed .emissive, and added different .colors to each shape: