# The MeshPhongMaterial do not work

**URL:** <https://discourse.threejs.org/t/the-meshphongmaterial-do-not-work/47873>\
**Category:** Questions\
**Tags:** materials\
**Created:** [February 10, 2023, 4:51pm UTC](https://discourse.threejs.org/t/the-meshphongmaterial-do-not-work/47873 "2023-02-10T16:51:01Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![Sadness7311](https://avatars.discourse-cdn.com/v4/letter/s/c77e96/32.png) [@Sadness7311](https://discourse.threejs.org/u/Sadness7311)\
**Post date:** [February 10, 2023, 4:51pm UTC](https://discourse.threejs.org/t/the-meshphongmaterial-do-not-work/47873/1 "2023-02-10T16:51:01Z")

</div>

```javascript
   let width, height;
    const params = {
        color: '#eae9e9'
    };
    width = window.innerWidth; height = window.innerHeight;
    const scene = new THREE.Scene();
    scene.background = new THREE.Color( params.color );
    const camera = new THREE.PerspectiveCamera( 75,width/height, 0.1, 1000 );
    const renderer = new THREE.WebGLRenderer();
    renderer.setPixelRatio( window.devicePixelRatio );
    renderer.setSize( width , height );
    document.body.appendChild(renderer.domElement);
    var geometry = new THREE.IcosahedronGeometry( 1.5, 0);
    const material = new THREE.MeshPhongMaterial({color: '#F00', shininess: 100})
    const t = new THREE.Mesh( geometry, material );
    t.position.x = 4.6;
    t.position.y += 0.5;
    scene.add(t);
    camera.position.z = 5;
    function animate() {
        requestAnimationFrame( animate );
        t.rotation.x += 0.0050;
        t.rotation.y += 0.0050;
        renderer.render( scene, camera );
    };
    animate();

```

This is my code, The MeshPhongMaterial dont work

---

<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:** [February 10, 2023, 4:58pm UTC](https://discourse.threejs.org/t/the-meshphongmaterial-do-not-work/47873/2 "2023-02-10T16:58:18Z")

</div>

`MeshPhongMaterial` needs a light, `PointLight`, `DirectLight` or another light.

---

<div class="post-metadata">

**Author:** ![hofk](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/hofk/32/44944_2.png) [@hofk](https://discourse.threejs.org/u/hofk)\
**Post date:** [February 10, 2023, 5:17pm UTC](https://discourse.threejs.org/t/the-meshphongmaterial-do-not-work/47873/3 "2023-02-10T17:17:27Z")

</div>

On the pages of the [Collection of examples from discourse.threejs.org](https://discourse.threejs.org/t/collection-of-examples-from-discourse-threejs-org/4315) you can find some examples with light.

See e.g.  
[BeginnerExample](https://hofk.de/main/discourse.threejs/BeginnerExample/BeginnerExample.html)  
[TransparentPartsDisappear](https://hofk.de/main/discourse.threejs/2023/TransparentPartsDisappear/TransparentPartsDisappear.html)

---

<div class="post-metadata">

**Author:** ![Sadness7311](https://avatars.discourse-cdn.com/v4/letter/s/c77e96/32.png) [@Sadness7311](https://discourse.threejs.org/u/Sadness7311)\
**Post date:** [February 10, 2023, 5:33pm UTC](https://discourse.threejs.org/t/the-meshphongmaterial-do-not-work/47873/4 "2023-02-10T17:33:06Z")

</div>

I’ ll try it! Thanks!

---

<div class="post-metadata">

**Author:** ![Sadness7311](https://avatars.discourse-cdn.com/v4/letter/s/c77e96/32.png) [@Sadness7311](https://discourse.threejs.org/u/Sadness7311)\
**Post date:** [February 10, 2023, 5:39pm UTC](https://discourse.threejs.org/t/the-meshphongmaterial-do-not-work/47873/5 "2023-02-10T17:39:20Z")

</div>

```javascript
let width, height;
    const params = {
        color: '#eae9e9'
    };
    width = window.innerWidth; height = window.innerHeight;
    const scene = new THREE.Scene();
    scene.background = new THREE.Color( params.color );
    const camera = new THREE.PerspectiveCamera( 75,width/height, 0.1, 1000 );
    const renderer = new THREE.WebGLRenderer();
    renderer.setPixelRatio( window.devicePixelRatio );
    renderer.setSize( width , height );
    document.body.appendChild(renderer.domElement);
    var geometry = new THREE.IcosahedronGeometry( 1.5, 0);
    const material = new THREE.MeshPhongMaterial({color: '#F00', shininess: 100})
    const t = new THREE.Mesh( geometry, material );
    const light = new THREE.PointLight( 0xff0000, 1, 100 );
    light.position.set( 50, 50, 50 );
    scene.add( light );
    t.position.x = 4.6;
    t.position.y += 0.5;
    scene.add(t);
    camera.position.z = 5;
    function animate() {
        requestAnimationFrame( animate );
        t.rotation.x += 0.0050;
        t.rotation.y += 0.0050;
        renderer.render( scene, camera );
    };
    animate();

```

still not working

---

<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:** [February 10, 2023, 5:45pm UTC](https://discourse.threejs.org/t/the-meshphongmaterial-do-not-work/47873/6 "2023-02-10T17:45:56Z")

</div>

Your light is too far away. Either remove the distance:

```javascript
const light = new THREE.PointLight( 0xff0000, 1 );

```

Or make it larger:

```javascript
const light = new THREE.PointLight( 0xff0000, 1, 1000 );

```

---

<div class="post-metadata">

**Author:** ![Sadness7311](https://avatars.discourse-cdn.com/v4/letter/s/c77e96/32.png) [@Sadness7311](https://discourse.threejs.org/u/Sadness7311)\
**Post date:** [February 10, 2023, 5:46pm UTC](https://discourse.threejs.org/t/the-meshphongmaterial-do-not-work/47873/7 "2023-02-10T17:46:15Z")

</div>

can someone make the Phong Material for me? I need it to be like, of black color and realistic. Thanks in Advanced!

---

<div class="post-metadata">

**Author:** ![Sadness7311](https://avatars.discourse-cdn.com/v4/letter/s/c77e96/32.png) [@Sadness7311](https://discourse.threejs.org/u/Sadness7311)\
**Post date:** [February 10, 2023, 5:47pm UTC](https://discourse.threejs.org/t/the-meshphongmaterial-do-not-work/47873/8 "2023-02-10T17:47:12Z")

</div>

trying, right now.

---

<div class="post-metadata">

**Author:** ![Sadness7311](https://avatars.discourse-cdn.com/v4/letter/s/c77e96/32.png) [@Sadness7311](https://discourse.threejs.org/u/Sadness7311)\
**Post date:** [February 10, 2023, 5:48pm UTC](https://discourse.threejs.org/t/the-meshphongmaterial-do-not-work/47873/9 "2023-02-10T17:48:08Z")

</div>

> [@PavelBoytchev](#):
>
> `const light = new THREE.PointLight( 0xff0000, 1 );`

Working, Thanks

---

<div class="post-metadata">

**Author:** ![Sadness7311](https://avatars.discourse-cdn.com/v4/letter/s/c77e96/32.png) [@Sadness7311](https://discourse.threejs.org/u/Sadness7311)\
**Post date:** [February 10, 2023, 5:49pm UTC](https://discourse.threejs.org/t/the-meshphongmaterial-do-not-work/47873/10 "2023-02-10T17:49:06Z")

</div>

I wanted to ask another thing, how do I color all sides  
of the shape differently?

---

<div class="post-metadata">

**Author:** ![hofk](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/hofk/32/44944_2.png) [@hofk](https://discourse.threejs.org/u/hofk)\
**Post date:** [February 10, 2023, 7:50pm UTC](https://discourse.threejs.org/t/the-meshphongmaterial-do-not-work/47873/11 "2023-02-10T19:50:28Z")

</div>

_You should always ask new problems in a new question. 🙂_

Take a look at this from the collection:  
[NumberedIcosahedron](https://hofk.de/main/discourse.threejs/2021/NumberedIcosahedron/NumberedIcosahedron.html)  
[OctahedronMultipleTexture](https://hofk.de/main/discourse.threejs/2022/OctahedronMultipleTexture/OctahedronMultipleTexture.html)