Currently experimenting with three.js to create an opaque box, but experiencing issues with light passing through the box:
The scene includes a "THREE.SpotLight" and 2 objects: a sphere projecting a shadow onto the box.
Observations show 2 shadows present when there should only be one:
- The first shadow at the top of the box appears correct,
- The second shadow is peculiar (almost as if the box were transparent).
Visual representation available here: https://i.sstatic.net/ZNmI3.png
var scene, camera, renderer;
var material;
init();
function init() {
//Setting up Renderer
renderer = new THREE.WebGLRenderer({
antialias: true
});
renderer.shadowMapEnabled = true;
renderer.setSize(window.innerWidth, window.innerHeight);
scene = new THREE.Scene();
//Configuring Camera
camera = new THREE.PerspectiveCamera(40, window.innerWidth / window.innerHeight, 1, 10000);
camera.position.set(0, 20, 20);
camera.lookAt(new THREE.Vector3(0, 15, 0));
//Defining Material
material = new THREE.MeshLambertMaterial({
color: 0xffffff
});
//Creating Box
var box = new THREE.Mesh(new THREE.BoxGeometry(7, 16, 7), material);
box.position.y = 8;
box.castShadow = true;
box.receiveShadow = true;
scene.add(box);
//Introducing Sphere
geometry = new THREE.SphereGeometry(.8, 48, 48);
var sphere = new THREE.Mesh(geometry, material);
sphere.position.set(-5, 17, -3);
sphere.castShadow = true;
sphere.receiveShadow = true;
scene.add(sphere);
// Lighting Setup
var spotLight = new THREE.SpotLight(0xffffff);
spotLight.position.set(-50, 40, -50);
spotLight.target.position.set(-5, 17, -3);
spotLight.castShadow = true;
spotLight.shadowMapWidth = 2048;
spotLight.shadowMapHeight = 2048;
spotLight.shadowCameraVisible = true;
scene.add(spotLight);
var ambientLight = new THREE.AmbientLight(0x444444);
scene.add(ambientLight);
document.body.appendChild(renderer.domElement);
}
renderer.render(scene, camera);
Prompting question:
- How can I achieve opacity for the box?
Jsfiddle link available here: http://jsfiddle.net/v81gs6u1/4/