Parcel Sandbox

by farazshaikh

HTML

<div id="root"></div>
<script type="importmap">
	{
		"imports": {
      "three": "https://unpkg.com/three/build/three.module.js",
		  "three/webgpu": "https://unpkg.com/three/build/three.webgpu.js",
			"three/tsl": "https://unpkg.com/three/build/three.tsl.js",
      "three/addons/": "https://unpkg.com/three/examples/jsm/"
		}
	}
</script>

CSS

body {
  font-family: sans-serif;
  margin: 0;
  background-color: #080808;
}

JavaScript

import * as THREE from "three/webgpu";
import { OrbitControls } from "three/addons/controls/OrbitControls";
import * as TSL from "three/tsl";


export default function App(root) {
  const camera = new THREE.PerspectiveCamera(
    75,
    window.innerWidth / window.innerHeight,
    0.1,
    1000
  );
  camera.position.x = 1;
  camera.position.y = 1;
  camera.position.z = -2;

  const renderer = new THREE.WebGPURenderer({
    antialias: true,
  });
renderer.shadowMap.enabled = true; // CRITICAL STEP 1
renderer.shadowMap.type = THREE.PCFSoftShadowMap; // Optional: Makes shadows s
  renderer.setSize(window.innerWidth, window.innerHeight);
  document.body.appendChild(renderer.domElement);
  const scene = new THREE.Scene();

// 2. Add a shadow-casting Light (DirectionalLight, SpotLight, or PointLight)
const light = new THREE.DirectionalLight(0xffffff, 1);
light.position.set(5, 10, 5);
light.castShadow = true; // CRITICAL STEP 2
scene.add(light);
light.layers.mask = 1

// Optional: Tune the light's shadow properties for better resolution
light.shadow.mapSize.width = 1024; 
light.shadow.mapSize.height = 1024;



  {
    const geometry = new THREE.BoxGeometry();
    const material = new THREE.MeshStandardNodeMaterial({ color: "red" });
    const mesh = new THREE.Mesh(geometry, material);
    mesh.position.y = 0
    mesh.castShadow  = true 
    mesh.layers.mask = 1
    scene.add(mesh);
  }
  
  {
    const geometry = new THREE.PlaneGeometry(10, 10);
    const material = new THREE.MeshStandardNodeMaterial({ color: "white" });
    const mesh = new THREE.Mesh(geometry, material);
    mesh.receiveShadow = true
    mesh.rotation.x = -Math.PI / 2
    mesh.layers.mask = 1
    scene.add(mesh);
  }


  const controls = new OrbitControls(camera, renderer.domElement);

  function animate() {
    requestAnimationFrame(animate);


    camera.layers.mask = 1
    renderer.render(scene, camera)


    controls.update();
...