I'm having difficulty focusing lights on specific targets, specifically the main character, while also darkening the background. Additionally, I'm experiencing issues with the shadows not working properly in my code snippet related to lights and shadows. Any suggestions?
Check out this portion of the index.html file:
//////////////////////////////////////////////////////////////////////////////////
// renderer setup //
//////////////////////////////////////////////////////////////////////////////////
var renderer = new THREE.WebGLRenderer();
renderer.shadowMapEnabled = true;
renderer.shadowMapType = THREE.PCFSoftShadowMap;
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
//////////////////////////////////////////////////////////////////////////////////
// default 3 points lightning //
//////////////////////////////////////////////////////////////////////////////////
var ambientLight= new THREE.AmbientLight( 0x020202 )
scene.add( ambientLight)
var frontLight = new THREE.DirectionalLight('white', 1)
frontLight.position.set(0.5, 0.5, 0.5)
frontLight.castShadow = true
scene.add( frontLight )
var backLight = new THREE.DirectionalLight('white', 0.5)
backLight.position.set(-0.5, -0.5, -0.5)
scene.add( backLight )
frontLight.shadowMapSize = new THREE.Vector2( 512, 512 )
frontLight.shadowCamera = new THREE.OrthographicCamera( 0, 0, 0, 0, 0.5, 500 )
var pointLight = new THREE.SpotLight('white', 0.1)
pointLight.position.set(0,5,5)
scene.add( pointLight )
//////////////////////////////////////////////////////////////////////////////////
// obstacle (short version) //
//////////////////////////////////////////////////////////////////////////////////
scene.add(obstacle)
obstacle.position.x = 0.00
obstacle.castShadow = true
//////////////////////////////////////////////////////////////////////////////////
// Init floor //
//////////////////////////////////////////////////////////////////////////////////
function generateRoad(z){
var road = THREEx.Environment.road()
road.receiveShadow = true
scene.add(road)
var velocity = new THREE.Vector3(0, 0, z);
road.position.add(velocity)
}