I am new to JavaScript and THREE.js and seeking guidance.
Below is the visual output I managed to create: https://i.sstatic.net/P1hWA.png
Here's the code snippet:
// Initializing the renderer
renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.getElementById('container').appendChild(renderer.domElement);
// Setting up the scene
scene = new THREE.Scene();
// Creating and positioning the camera on the scene
camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 1, 100000 );
camera.position.set(0, 0, 1000);
scene.add(camera);
// Creating a plane with material and adding it to the scene
me = new THREE.Mesh(new THREE.PlaneGeometry(900,550), new THREE.MeshPhongMaterial({color: 0xffffff}));
scene.add( me );
me.position.x = 130;
me.position.y = 10;
me.rotation.y = -20;
// Creating a cube with material and adding it to the scene
cube = new THREE.Mesh( new THREE.CubeGeometry( 100, 100, 100 ), new THREE.MeshPhongMaterial({color:0x00ffff}) );
scene.add( cube );
cube.position.y = 0;
cube.position.x = 20;
cube.position.z = 0;
cube.rotation.y = 0;
scene.add( new THREE.AmbientLight( 0x212223) );
light = new THREE.SpotLight(0xffffff, 1);
light.position.set(-300,-100,20);
light.angle = Math.PI/5;
light.shadowCameraVisible = true;
scene.add(light);
renderer.shadowMap.enabled = true;
renderer.shadowMapDarkness = 1;
light.castShadow = true;
light.intensity = 0.8;
cube.castShadow = true;
cube.receiveShadow = true;
me.receiveShadow = true;
lightHelper = new THREE.SpotLightHelper( light );
scene.add(lightHelper);
renderer.render( scene, camera );When I try to change the x and y values of the light or cube in my code, the shadow of the cube sometimes appears incomplete. As a beginner, I believe there might be an error in my code that I am unable to identify.