Three JS Plane

by Joe Pea

HTML

<div id="container"></div>
<script src="https://unpkg.com/three@0.94.0/build/three.js"></script>

CSS

body, html, container {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}

JavaScript

// renderer
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setPixelRatio(window.devicePixelRatio)
renderer.shadowMap.enabled = true
document.body.appendChild(renderer.domElement);

// scene
const scene = new THREE.Scene();

// camera
const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 3000);
camera.position.z = 1000

const camRig = new THREE.Object3D()
camRig.rotation.x = Math.PI / 6
camRig.add(camera)

scene.add(camRig)

const light = new THREE.PointLight()
/* light.position.set(0, 0, 30) */
light.position.set(0, 0, 300)
light.intensity = 0.6
light.castShadow = true
light.shadow.mapSize.width = 512;  // default
light.shadow.mapSize.height = 512; // default
light.shadow.camera.near = 0.5;       // default
light.shadow.camera.far = 2000      // default
light.shadow.bias = -0.0004

const lightHelper = new THREE.Mesh(new THREE.SphereGeometry(10), new THREE.MeshNormalMaterial());
light.add(lightHelper)

const lightCamHelper = new THREE.CameraHelper( light.shadow.camera );
scene.add( lightCamHelper );

scene.add(light)

//const amb = new THREE.AmbientLight({ intensity: 0.2, color: 'white' })
//scene.add(amb)

const planeContainer = new THREE.Group
scene.add(planeContainer)

// plane
const plane = new THREE.Mesh(
	new THREE.PlaneGeometry(300, 300, 100),
	new THREE.MeshPhongMaterial({
		color: 'yellow',
		side: THREE.DoubleSide,
	})
);
//const plane = new THREE.Mesh(new THREE.BoxGeometry(300, 300, 100), new THREE.MeshPhongMaterial({ color: 'yellow' }));
plane.castShadow = true
plane.receiveShadow = true
plane.position.set(0, 0, 0)
plane.rotation.set(0, Math.PI, 0)
planeContainer.add(plane);

// plane
/* const plane2 = new THREE.Mesh(
	new THREE.PlaneGeometry(300, 300, 100),
	new THREE.MeshPhongMaterial({
		color: 'yellow'
	})
);
plane2.castShadow = false
plane2.receiveShadow = true
plane2.position.set(0, 0, 1)
plane2.rotation.set(0, 0, 0)
planeContainer.add(plane2); */
...