three.js Point Light

by sjpt

CSS

html,body {
  margin: 0;
  height: 100%;
  background: #000;
  overflow: hidden;
}

Babel + JSX

// experiment to see how to tunr shadown of/off dynamically
// (experimentaiton done within devtools)
// Most things dynamic, change of renderer.shadowMap or receiveShadow 
// needs material update
// Cannot share material between objects with different receiveShadow
'use strict'; var window, document, console;

let rr = 0.01;
function onBeforeCompile(shader) {
	const r = '#include <lights_physical_fragment>';
    shader.fragmentShader = shader.fragmentShader.replace(r, `diffuseColor.r = ${rr};
    ${r}`);
}
console.clear(); console.log('>>>>>>>>>');

var
		renderer = new THREE.WebGLRenderer({ antialias: true, logarithmicDepthBuffer: true }),
		scene = new THREE.Scene(),
		camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight,
    	1, 1000),
		shape = new THREE.IcosahedronGeometry(1, 0),
    material = new THREE.MeshStandardMaterial({color: 0xffffff}),
    mesh = new THREE.Mesh(shape, material),
    light = new THREE.DirectionalLight(0xffffff),
    plane = new THREE.PlaneGeometry(100,100),
    pmat = material.clone(),
    pm = new THREE.Mesh(plane, pmat);
material.onBeforeCompile = onBeforeCompile;
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFSoftShadowMap; // default THREE.PCFShadowMap

pm.position.z = -2;

mesh.receiveShadow = mesh.castShadow = 
  pm.receiveShadow = pm.castShadow = 
  light.castShadow =  // no light.receiveShadow 
  true;


scene.add(pm);
      
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

camera.position.z = 5;

light.position.set(-5, 1, 5);

scene.add(mesh);
scene.add(light);

const render = function() {
	requestAnimationFrame(render);
  
light.shadow.camera.position.set(-5, 1, 5);
  mesh.rotation.x+=0.01;
  mesh.rotation.y+=0.01;
  mesh.rotation.z+=0.01;
  rr += 0.01;
  material = new THREE.MeshStandardMaterial({color: 0xffffff});
  material.onBeforeCompile = onBeforeCompile;
  
 ...