three.js Point Light

by Christian Sonne

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r74/three.min.js"></script>

CSS

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

Babel + JSX

'use strict';

const
		renderer = new THREE.WebGLRenderer({ antialias: true }),
		scene = new THREE.Scene(),
		camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 1000),
		shape = new THREE.IcosahedronGeometry(1, 0),
    // MeshBasicMaterial will not react to light.
    // Use MeshLambertMaterial or MeshPhongMaterial.
    material = new THREE.MeshPhongMaterial({
      // Color represents "light sensitivity"
      // more-so than "be this color"
      // i.e. pure green won't render under a
      // pure red light - it needs a red value.
      transparent: true,
      opacity: 1,
      blending: THREE.AdditiveBlending,
      color: 0xffffff,
      side: THREE.DoubleSide
    }),
    mesh = new THREE.Mesh(shape, material),
    // Visualize mesh faces with a wireframe overlay.
    wire = new THREE.WireframeHelper(mesh, 0x000000),
    // Base level of light.
    amb = new THREE.AmbientLight(0x404040),
    // Pure red light.
    light = new THREE.PointLight(0xff0000),
    // Visualize point light location.
    helper = new THREE.PointLightHelper(light, 0.1);
      
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

camera.position.z = 5;

light.intensity = 2;

scene.add(mesh);
scene.add(wire);
//scene.add(amb);
scene.add(light);
scene.add(helper);

const render = function() {
	requestAnimationFrame(render);
  
  mesh.rotation.x+=0.01;
  mesh.rotation.y+=0.01;
  mesh.rotation.z+=0.01;
  
	renderer.render(scene, camera);
};
window.addEventListener(`resize`, ()=> {
	camera.aspect = window.innerWidth / window.innerHeight;
	camera.updateProjectionMatrix();

	renderer.setSize(window.innerWidth, window.innerHeight);
});
requestAnimationFrame(render);