I've been diving into threejs through game development. I successfully rendered all models in the scene and added some lights, which turned out perfectly fine. However, when trying to cast and receive shadows on the plane, the object shadows in the scene are not rendering as expected.
I'm puzzled about where I might be going wrong.
Here's a snippet of the code:
Please take a look and assist me in resolving this issue.
import { OrbitControls } from '../assets/js/OrbitControls.js';
import { GLTFLoader } from '../assets/js/GLTFLoader.js';
import { OBJLoader } from '../assets/js/OBJLoader.js';
import { MTLLoader } from '../assets/js/MTLLoader.js';
const extrudeSettings = { depth: 8, bevelEnabled: true, bevelSegments: 2, steps: 2, bevelSize: 1, bevelThickness: 1 };
const logo = {
position : {
top: 750,
back: -2000,
},
title: " Exhibition !!!",
color: 0x006699
};
var camera, scene, renderer, man_walk, mixer, action, keyboard, controls, door, mixerG, mixerB;
var mixerW = new THREE.AnimationMixer();
var man_walk = new THREE.Scene();
var clock = new THREE.Clock();
var gltfLoader = new GLTFLoader();
var objLoader = new OBJLoader();
init();
animate();
function init(){
// RENDERER
renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.gammaOutput = true
renderer.shadowMapEnabled = true;
renderer.shadowMapType = THREE.BasicShadowMap;
document.body.appendChild(renderer.domElement);
// SCENE
scene = new THREE.Scene();
scene.background = new THREE.Color( 0xC3D8D6 );
// scene.fog = new THREE.Fog( 0xffffff, 0, 750 );
// CAMERA
camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 10000 );
camera.position.y = 250;
camera.position.z = 2090;
// LIGHTS
const light = new THREE.AmbientLight(0xffffff);
light.position.set = (0,100,100);
light.castShadow = true;
scene.add(light);
var dlight = new THREE.DirectionalLight( 0xaabbff, 0.3 );
dlight.position.x = 0;
dlight.position.y = 250;
dlight.position.z = 2500;
dlight.castShadow = true;
scene.add( dlight );
// KEY EVENTS
keyboard = new THREEx.KeyboardState();
// console.log(keyboard);
// // ORBIT CONTROLS
// controls = new OrbitControls(camera, renderer.dom...
To view the complete code, please visit: