Using Gltf Loader Models Rendering White Error

Questions
, ,
1

I’m trying to run the models I downloaded from sketchfab with ThreeJS and When I run the models in the browser, I saw that the colors of the Models do not appear. The entire model was rendered in white

let loader = new THREE.GLTFLoader();

loader.load('scene.gltf', function(gltf)

I followed the ThreeJs tutorial from an alternative source on the internet, saying that I could do it wrong myself, but the result is same the models that appear on the same screen are both of poor quality and colorless.

2

ekran1
ekran11222×555 60.9 KB
ekran2
ekran2858×445 42.1 KB

like this

3 
<!DOCTYPE html>
<html>
  <head>
<meta charset=UTF-8 />
<link rel="stylesheet" type="text/css" href="main.css" />
  </head>
  <body>
<script src="js/three.min.js"></script>
<script src="js/GLTFLoader.js"></script>
<script src="js/OrbitControls.js"></script>
<script>
  let scene, camera, renderer;

  function init() {

    scene = new THREE.Scene();
    scene.background = new THREE.Color(0xdddddd);

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

    controls = new THREE.OrbitControls(camera);
    controls.addEventListener('change', renderer);

    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);
    light2 = new THREE.PointLight(0xc4c4c4,10);
    light2.position.set(500,100,0);
    scene.add(light2);
    light3 = new THREE.PointLight(0xc4c4c4,10);
    light3.position.set(0,100,-500);
    scene.add(light3);
    light4 = new THREE.PointLight(0xc4c4c4,10);
    light4.position.set(-500,300,500);
    scene.add(light4);

    renderer = new THREE.WebGLRenderer({antialias:true});
    renderer.setSize(window.innerWidth,window.innerHeight);
    document.body.appendChild(renderer.domElement);

    let loader = new THREE.GLTFLoader();
    loader.load('/models/gardenMaterials/scene.gltf', function(gltf){
      car = gltf.scene.children[0];
      car.scale.set(0.5,0.5,0.5);
      scene.add(gltf.scene);
      animate();
    });
  }
  function animate() {
    renderer.render(scene,camera);
    requestAnimationFrame(animate);
  }
  init();
</script>
  </body>
</html>

this is my renderer code

4

aliciğim intenstyler yüksek.

Need to reduce intensities

THREE.PointLight(0xc4c4c4, 1)

5

Teşekkürler hocam,
I tried parameters but didn’t play with this parameter.