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.CylinderGeometry( 1, 1, 8, 16 ),
    // 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: 0.8,
      blending: THREE.AdditiveBlending,
      color: 0xffffff,
      side: THREE.BackSide,
      castShadow: true,
    }),
    mesh = new THREE.Mesh(shape, material),
    // Base level of light.
    light = new THREE.PointLight(new THREE.Color("hsl(180, 100%, 50%)")),
    light2 = new THREE.PointLight(0x00ff00),
    // Visualize point light location.
    helper = new THREE.PointLightHelper(light, 0.1),
    helper2 = new THREE.PointLightHelper(light2, 0.1);
    light2.position.y+=2;
      
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(amb);
scene.add(light);
scene.add(light2);
scene.add(helper);
scene.add(helper2);

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);