three.js Point Light
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.MeshLambertMaterial({
// 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.
color: 0x99ff00
}),
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.position.y = 1.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);