Difficulty using MeshPhongMaterial

Questions
1

I guess that will be quite basic to most of you, but i got stuck…I am trying to switch from MeshBasicMaterial to MeshPhongMaterial but I cannot understand what I am doing wrong and it doest work for me. The line in the code below, var material = new THREE.MeshPhongMaterial({color: color}); when used instead of the MeshBasicMaterial doesnt produce anything on my screen (not errors in the console too). However, when I am calling MeshBasicMaterial everything looks fine.
What I am doing wrong please?

<!DOCTYPE html>
<html>
<head>
    <meta charset=UTF-8/>
<!--    <link rel="stylesheet" type="text/css" href="src/styles.css"/>-->
</head>
<body>

<canvas class="webgl"></canvas>
<script src='three.js/build/three.js'></script>
<script src='three.js/examples/js/controls/OrbitControls.js'></script>

<script>
    const canvas = document.querySelector('canvas.webgl')
    var color = 0xffffff;

    //scene
    var scene = new THREE.Scene()

    var geometry = new THREE.BoxGeometry(1,1,1);
    // var material = new THREE.MeshBasicMaterial({color: color});         // THAT WORKS
    var material = new THREE.MeshPhongMaterial({color: color});      // THAT DOES NOT WORK
    var cube = new THREE.Mesh(geometry, material);
    scene.add(cube);

    var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
    camera.position.z = 3
    scene.add(camera)

    // Controls
    controls = new THREE.OrbitControls(camera, canvas);
    controls.enableDamping = true;

    var renderer = new THREE.WebGLRenderer({
        canvas: canvas
    })
    renderer.setSize(window.innerWidth, window.innerHeight);
    renderer.render(scene, camera)

    // Animate
    const clock = new THREE.Clock();

    const tick = () => {
        const elapsedTime = clock.getElapsedTime();

        // Update controls
        controls.update();

        // Render
        renderer.render(scene, camera);

        // Call tick again on the next frame
        window.requestAnimationFrame(tick)
    };

    tick();


</script>

</body>
</html>
2

Hi!
You’ve got no light source(s) in your scene, so your object with MeshPhongMaterial is just black, without light(s).

3

Duh! That is so embarrassing!! Thank you very much

1 Like