ThreeJS Casting shadows through alpha masked mesh geometry three.js v0.170.0
HTML
<html>
<head>
<title> Live Example </title>
<style>
body { margin: 0; position: fixed;}
canvas { width: 100%; height: 100%; display: block;}
</style>
</head>
<body>
<script type="module">
import * as THREE from "https://cdnjs.cloudflare.com/ajax/libs/three.js/0.170.0/three.module.js"
import { OrbitControls } from "https://cdn.jsdelivr.net/npm/[email protected]/examples/jsm/controls/OrbitControls.js"
var renderer = new THREE.WebGLRenderer( { antialias: true } )
renderer.setSize( window.innerWidth, window.innerHeight )
document.body.appendChild( renderer.domElement )
renderer.shadowMap.enabled = true
var scene = new THREE.Scene()
scene.background = new THREE.Color( 0x80a0a0 )
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 )
var controls = new OrbitControls( camera, renderer.domElement )
camera.position.set( 5, -18, 15 )
controls.target.set( 0, 0, 0 )
var bkGeometry = new THREE.PlaneGeometry( 20, 20, 1, 1 )
var bkMaterial = new THREE.MeshStandardMaterial( { color: 0x5080f0 } )
var background = new THREE.Mesh(bkGeometry, bkMaterial)
background.receiveShadow = true
background.position.z = -3
scene.add(background)
// Point light casting shadows
var light = new THREE.DirectionalLight(0xffffff, 1)
light.castShadow = true
light.shadow.radius = 10
light.shadow.mapSize.width = 512
light.shadow.mapSize.height = 512
light.shadow.camera.near = 0.5
light.shadow.camera.far = 20
light.position.z = 10
scene.add(light)
const lightHelper = new THREE.DirectionalLightHelper( light, 1 )
const lightShadowHelper = new THREE.CameraHelper( light.shadow.camera )
//scene.add(lightHelper,...