The MeshPhongMaterial do not work

Questions
1 
   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

2

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

1 Like
3

On the pages of the Collection of examples from discourse.threejs.org you can find some examples with light.

See e.g.
BeginnerExample
TransparentPartsDisappear

4

Iā€™ ll try it! Thanks!

5 
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

6

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

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

Or make it larger:

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

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

8

trying, right now.

9

Working, Thanks

1 Like
10

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

11

You should always ask new problems in a new question. :slightly_smiling_face:

Take a look at this from the collection:
NumberedIcosahedron
OctahedronMultipleTexture