# Mat, Colour and Light seem to not be working

**URL:** <https://discourse.threejs.org/t/mat-colour-and-light-seem-to-not-be-working/57281>\
**Category:** Questions\
**Tags:** lights\
**Created:** [October 21, 2023, 12:49pm UTC](https://discourse.threejs.org/t/mat-colour-and-light-seem-to-not-be-working/57281 "2023-10-21T12:49:17Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![Riaz\_1](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/riaz_1/32/40953_2.png) [@Riaz\_1](https://discourse.threejs.org/u/Riaz_1)\
**Post date:** [October 21, 2023, 12:49pm UTC](https://discourse.threejs.org/t/mat-colour-and-light-seem-to-not-be-working/57281/1 "2023-10-21T12:49:17Z")

</div>

First time coding with three.js. following this tut [https://youtu.be/\_OwJV2xL8M8](https://youtu.be/_OwJV2xL8M8).

Im at 13:30. but my sphere just comes out like this. I also had to change my renderer bg color to even see it.

 ![Screenshot 2023-10-21 at 13.49.03](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/4/f/4f0c689951aebc088626d059ba4353e9e72a02cc.png)

JS.

````javascript
import * as THREE from 'three';

const scene = new THREE.Scene();

//create sphere
const geo = new THREE.SphereGeometry(3, 64, 64)
const mat = new THREE.MeshStandardMaterial({ color: "#00ff83" })
const sphere = new THREE.Mesh(geo, mat)
scene.add(sphere)

const light = new THREE.PointLight('#FFFFFF', 1, 100)
light.position.set(0, 10, 10)
scene.add(light)

const camera = new THREE.PerspectiveCamera(45, 800 / 600)
camera.position.z = 10
scene.add(camera)

const canvas = document.querySelector('.webgl');
const renderer = new THREE.WebGLRenderer({ canvas })
renderer.setSize(800, 600)
renderer.setClearColor(0xEEEEEE);
renderer.render(scene, camera)```

html

````

\<!doctype html\>

 Vite App

 ```

---

<div class="post-metadata">

**Author:** ![PavelBoytchev](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/pavelboytchev/32/38639_2.png) [@PavelBoytchev](https://discourse.threejs.org/u/PavelBoytchev)\
**Post date:** [October 21, 2023, 2:36pm UTC](https://discourse.threejs.org/t/mat-colour-and-light-seem-to-not-be-working/57281/2 "2023-10-21T14:36:50Z")

</div>

Try with a stronger light:

```javascript
const light = new THREE.PointLight('#FFFFFF', 100, 100)

```

---

<div class="post-metadata">

**Author:** ![Riaz\_1](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/riaz_1/32/40953_2.png) [@Riaz\_1](https://discourse.threejs.org/u/Riaz_1)\
**Post date:** [October 22, 2023, 6:30pm UTC](https://discourse.threejs.org/t/mat-colour-and-light-seem-to-not-be-working/57281/3 "2023-10-22T18:30:03Z")

</div>

Thank you! it worked! if its ok could u explain this to me a little :), or direct me to a place that would

---

<div class="post-metadata">

**Author:** ![PavelBoytchev](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/pavelboytchev/32/38639_2.png) [@PavelBoytchev](https://discourse.threejs.org/u/PavelBoytchev)\
**Post date:** [October 22, 2023, 6:48pm UTC](https://discourse.threejs.org/t/mat-colour-and-light-seem-to-not-be-working/57281/4 "2023-10-22T18:48:13Z")

</div>

Most likely the tutorial is using an old release of Three.js, where lights and their parameters were designed to use “nice” numbers. Since release 155 lights and their properties are closer to physical lights. You can find more details here:

> [@Updates to lighting in three.js r155](https://discourse.threejs.org/t/updates-to-lighting-in-three-js-r155/53733):
>
> The upcoming release r155 will contain a major change in context of lighting. The legacy lighting mode will be disabled by default which affects all light intensities and how point and spot lights decay. What does that mean for me? The release changes the default of WebGLRenderer.useLegacyLights from true to false and also deprecates the property. Meaning it will be eventually removed from the engine with r165. Setting WebGLRenderer.useLegacyLights to false is one important prerequisite for a…