Search code examples
javascriptthree.jsgltf

Three Js Shadows work but some shadow lines are shown beneath my model

I have no experience with javascript or three.js, but recently I am working on modifying a three.js scene. I have added shadow over my GLTF model. And the shadow displays nicely over my model. But I also see these yellow and red lines beneath my model. I don't know what they are or how to remove them.

Bellow I will add some of the code I use:

// LOAD TEXTURE - Cube
const loader = new THREE.CubeTextureLoader();
loader.setPath( 'textures/3/' );

textureCube = loader.load( [ 'px.png', 'nx.png', 'py.png', 'ny.png', 'pz.png', 'nz.png' ] );
textureCube.encoding = THREE.sRGBEncoding;
scene.background = textureCube;

// Cube Light
const ambient = new THREE.AmbientLight( 0x404040 );
scene.add( ambient );

let light = new THREE.DirectionalLight(0xfffffff, 0.5);
light.position.set(0, 1, 0);
light.castShadow = true;
light.shadow.mapSize.width = 512;  
light.shadow.mapSize.height = 512; 
light.shadow.camera.near = 0.5;
light.shadow.camera.far = 500     

scene.add(new THREE.CameraHelper(light.shadow.camera));

scene.add(light);

Below you can also see a screenshot with these yellow and red lines that I would like to remove: Shadow guide lines ??

Solution

  • What you're seeing there is a camera helper.

    You have added it to your scene when you added the line

    scene.add(new THREE.CameraHelper(light.shadow.camera));

    If you don't want to see it, then don't add that line.