Screenshot 1

Screenshot 2

Some of my models(STL) have turned completely black while others receive color correctly from the lights.

In Screenshot 1 and 2, you can see that the fighter model has color but the miku model appears entirely black. It seems like there is no light illuminating her or she is behaving as if a black BasicMaterial has been applied to her.

Both models are applied with PhongMaterial. I have tried various combinations of lights with different positions, types, and parameters but nothing seems to work.

I am certain that the miku model is normal because I downloaded both the fighter and miku models from the same website where they were displayed with colors. There are other models in my scene that also turn pure black even though they are regular STL models.

There must be some errors in my scene configuration.

Here is the code snippet:

    <script>
    var renderer;
    function initThree() {
        width = document.getElementById('canvas-frame').clientWidth;
        height = document.getElementById('canvas-frame').clientHeight;
        renderer = new THREE.WebGLRenderer({
            antialias: true
        });
        renderer.setSize(width, height);
        document.getElementById('canvas-frame').appendChild(renderer.domElement);

    }

    var camera;
    function initCamera() {
        camera = new THREE.PerspectiveCamera(45, width / height, 1, 10000);
        camera.position.x = 50;
        camera.position.y = 0;
        camera.position.z = 0;
        camera.lookAt({
            x: 0,
            y: 0,
            z: 0
        });


    }


    var scene;
    function initScene() {
        scene = new THREE.Scene();


    }


    //Light source 1
    var light;
    function initLight() {
        light = new THREE.DirectionalLight(0xfefff7, 2.0, 0);
        light.position.set(0, 500, 0);
        scene.add(light);
    }
    //Light source 2
    var light2;
    function initLight2() {
        light2 = new THREE.DirectionalLight(0x414141, 1.0, 0);
        light2.position.set(0, -500, 0);
        scene.add(light2);
    }

    //Unused light source 3
    var light3;
    function initLight3() {
        light3 = new THREE.SpotLight(0xffffff, .7, 0);
        light3.spotLight = new THREE.SpotLight(0xffffff, .7, 0);
        light3.position.set(-700, 1000, 1000);
        light3.castShadow = true;
        scene.add(light3);
    }

    //Unused light source 4
    var light4;
    function initLight4() {
        light4 = new THREE.PointLight(0xffffff, 0.7, 0);
        light4.position.set(3200, -3900, 3500);
        light4.castShadow = true;
        scene.add(light4);


    }

    //Create Jupiter
    var sphere;
    function initSphere() {
        var bitmap = new Image();
        bitmap.src = 'img/jupiter.jpg';
        var texture = THREE.ImageUtils.loadTexture(bitmap.src);
        var material = new THREE.MeshPhongMaterial({
            map: texture
        });
        var geometry = new THREE.SphereGeometry(50, 64, 64);
        sphere = new THREE.Mesh(geometry, material);
        sphere.position.set(0, 17, -120);
        scene.add(sphere);
    }

    //Load model file
    var loader = new THREE.STLLoader();
    function initLoad() {
        loader.addEventListener('load', function (event) {

            var geometryOfFiles = event.content;
            var materialOfFiles = new THREE.MeshPhongMaterial({
                wrapAround: true,
                wrapRGB: new THREE.Vector3(0, 1, 1),
                color: 0xFFFFFF,
                specular: 0xFFFFFF,
                shading: THREE.SmoothShading,
                shininess: 630,
                fog: false,
                side: THREE.DoubleSide

            });
            var object = new THREE.Mesh(geometryOfFiles, materialOfFiles);

            object.position.set(0, 0, 0);
            object.rotation.set(-Math.PI / 2, 0, Math.PI / 111);
            object.scale.set(2, 2, 2);


            scene.add(object);


        });
        loader.load('miku.stl');
    }

    var loader1 = new THREE.STLLoader();
    function initLoad1() {
        loader1.addEventListener('load', function (event) {

            var geometryOfFiles = event.content;
            var materialOfFiles = new THREE.MeshPhongMaterial({
                wrapAround: true,
                wrapRGB: new THREE.Vector3(0, 1, 1),
                color: 0xFFFFFF,
                specular: 0xFFFFFF,
                shading: THREE.SmoothShading,
                shininess: 230,
                fog: false,
                side: THREE.DoubleSide

            });
            var object = new THREE.Mesh(geometryOfFiles, materialOfFiles);

            object.position.set(0, 20, 50);
            object.rotation.set(-Math.PI / 2, 0, Math.PI / 111);
            object.scale.set(0.5, 0.5, 0.5);


            scene.add(object);


        });
        loader1.load('f35.stl');
    }


    var controls;
    function setControl() {
        controls = new THREE.TrackballControls(camera);

        /*
         controls.rotateSpeed = 5.0;
         controls.zoomSpeed = 5;
         controls.panSpeed = 2;

         controls.noZoom = false;
         controls.noPan = false;

         controls.staticMoving = false;
         controls.dynamicDampingFactor = 0.3;*/
    }


    function animate() {
        controls.update();
        renderer.clear();
        renderer.render(scene, camera);
        requestAnimationFrame(animate);
        sphere.position.x -= 0.1;
        sphere.rotation.y += -0.005;
    }

    function threeStart() {
        initThree();
        initCamera();
        initScene();
        initLight3();
        initLight4();
        initSphere();
        setControl();
        animate();
        initLoad();
        initLoad1();


    }



</script>