I am currently in the process of modifying a three.js scene, despite having little experience with javascript and three.js. After successfully adding a shadow to my GLTF model, I noticed some yellow and red lines beneath the model that I cannot identify or remove.
Here is a snippet of the code I have been using:
// 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 is a screenshot showing the yellow and red lines that I am trying to remove: https://i.sstatic.net/AR0q9.png