Hello everyone, I have successfully loaded a custom model into my canvas but I am facing an issue with making the shadow transparent on the model itself. I am unsure how to achieve this as I would like the models to both cast and receive a shadow. Can anyone provide some guidance on this matter?
Here is an excerpt of my code:
var loader = new THREE.JSONLoader();
loader.load('model/p3.json', handle_load);
var mesh;
function handle_load(geometry, materials) {
var material = new THREE.MeshPhongMaterial();
mesh = new THREE.Mesh(geometry,material);
scene.add(mesh);
mesh.position.z = 0;
mesh.position.y = 0;
mesh.rotation.y = 5;
//LIGHT
var ambient = new THREE.AmbientLight(0xffffff, 0.15);
ambient.target = mesh;
scene.add(ambient);
var light = new THREE.DirectionalLight(0xffffff, 1);
light.target = mesh;
light.castShadow = true;
light.position.z = -150;
light.position.y = 150;
light.position.x = 150;
light.shadow.bias = 0;
light.shadowDarkness = 0.2;
light.shadow.mapSize.width = 2048 * 2;
light.shadow.mapSize.height = 2048 * 2;
scene.add(light);
mesh.receiveShadow = true;
mesh.castShadow = true;
}
var shadowmaterial = new THREE.ShadowMaterial();
shadowmaterial.opacity = 0.2;
var material2 = new THREE.MeshPhongMaterial({
color: 0xffffff,
});
var geometry3 = new THREE.PlaneGeometry(500, 500, 100, 100);
var mesh3 = new THREE.Mesh(geometry3, shadowmaterial);
mesh3.rotation.x = -90 * Math.PI / 180;
mesh3.position.y = 0;
scene.add(mesh3);
mesh3.receiveShadow = true;
Here is an image of the rendering for reference: https://i.sstatic.net/azcg2.png
Any help on this issue would be greatly appreciated. Thank you.