On my model, there are some weird grid shadows beeing cast.
Heres is how it looks like:
I tried turning up the shadow.mapSize, but that didnt really help, it just made the gap between the grid smaller, using a different shadowmap type also did not help. I found someone with a very similar problem than me, (Weird shadows on collada model), but i do not understand the reply.
import * as THREE from ‘three’;
import { GLTFLoader } from ‘three/examples/jsm/loaders/GLTFLoader’;
import { OrbitControls } from ‘three/examples/jsm/controls/OrbitControls’;
// ----- camera and render setup -----
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer({ alpha: true });
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
camera.position.set(1, 1 ,1);
//----- light -----
const light = new THREE.DirectionalLight(0x00ff99, 5);
light.position.set(-10, 10, 10);
light.target.position.set(0, 0, 0);
const helper = new THREE.DirectionalLightHelper(light, 1);
scene.add(helper);
scene.add(light);
scene.add(light.target);
renderer.shadowMap.enabled = true;
light.castShadow = true;
light.shadow.mapSize.width = 1024;
light.shadow.mapSize.height = 1024;
renderer.shadowMap.type = THREE.PCFSoftShadowMap;
// ----- loading model -----
const loader = new GLTFLoader();
let pcModel;
loader.load(‘pc.gltf’, function(pcGltf) {
scene.add(pcGltf.scene);
pcModel = pcGltf.scene;
pcModel.traverse((node) => {
if (node.isMesh) {
node.castShadow = true;
node.receiveShadow = true;
}
});
});
// -----
const controls = new OrbitControls(camera, renderer.domElement);
// ----- render -----
function animate() {
requestAnimationFrame(animate);
controls.update();
renderer.render(scene, camera);
}
animate();