Why does my .glb/.gltf-Model have incorrect colors and white top faces

Hi there,

I already posted this, but it was hidden by a spam bot and should appear shortly but it didn’t. Never mind!

The colors of my model are not correct and all top faces are completely white. However, in Blender and Windows-3D-Viewer everything looks just fine (see pictures). I created the model in Rhino3D (obj) and converted it with obj2gltf (.glb). All face normals are pointing outwards (checked with Blender).

What am I doing wrong? Code and screenshots are attached. The error in the console only appears after touching the mouse and doesn’t seem to have anything to do with the problem at hand.

<!DOCTYPE html>
<html>
  <head>
    <meta charset=UTF-8 />
    <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='styles.css') }}" />
  </head>
  <title>{{title}}</title>
  <body>
    <div class="flex-container">
      <div class="column">
        Column 1
      </div>
      <div class="column bg-alt" id="canvas"> 
        Column 2
      </div>
  </div>
  </body>
  <script src="{{ url_for('static', filename='three.js') }}"></script>
  <script src="{{ url_for('static', filename='GLTFLoader.js') }}"></script>
  <script src="{{ url_for('static', filename='OrbitControls.js') }}"></script>
  <script>
    let scene, camera, renderer;

    function init() {
      /*
      * Create Canvas / Viewport
      */
      container = document.getElementById('canvas');
      renderer = new THREE.WebGLRenderer();
      renderer.setSize(container.clientWidth, container.clientHeight);
      container.appendChild( renderer.domElement );

      /*
      * Create Scene
      */
      scene = new THREE.Scene();
      scene.background = new THREE.Color(0xb4bac0);

      /*
      * Camera
      */
      camera = new THREE.PerspectiveCamera(40,window.innerWidth/window.innerHeight,1,5000);
      camera.rotation.y = 45/180*Math.PI;
      camera.position.x = 8;
      camera.position.y = 1;
      camera.position.z = 10;

      controls = new THREE.OrbitControls(camera, renderer.domElement);
      controls.addEventListener('change', renderer);
      
      /*
      * Lights
      */
      hlight = new THREE.AmbientLight (0x404040,100);
      scene.add(hlight);

      directionalLight = new THREE.DirectionalLight(0xffffff,100);
      directionalLight.position.set(0,1,0);
      directionalLight.castShadow = true;
      scene.add(directionalLight);
      light = new THREE.PointLight(0xc4c4c4,10);
      light.position.set(0,300,500);
      scene.add(light);

      /*
      * Model (.glb / gltf)
      */
      let loader = new THREE.GLTFLoader();
      loader.load('static/{{model_filename}}', function(gltf){
        room = gltf.scene.children[0];
        room.scale.set(10.0,10.0,10.0);
        scene.add(gltf.scene);
        animate();
      });
    }
    function animate() {
      renderer.render(scene,camera);
      requestAnimationFrame(animate);
    }
    init();
  </script>
</html>



Thanks in advance!

hlight = new THREE.AmbientLight (0x404040,100);
to
hlight = new THREE.AmbientLight (0x404040,0.2);
directionalLight = new THREE.DirectionalLight(0xffffff,100);
to
directionalLight = new THREE.DirectionalLight(0xffffff,0.5);
light = new THREE.PointLight(0xc4c4c4,10);
to
light = new THREE.PointLight(0xc4c4c4,0.5);
1 Like

So nice! Thank you! :slight_smile:

1 Like