Difficulty using MeshPhongMaterial

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>
    <meta charset=UTF-8/>
<!--    <link rel="stylesheet" type="text/css" href="src/styles.css"/>-->

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

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

    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);

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

    // 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

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

        // Call tick again on the next frame




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

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

1 Like