three.js spot light test
HTML
<script type="importmap">
{
"imports": {
"three": "https://unpkg.com/[email protected]/build/three.module.js",
"three/addons/": "https://unpkg.com/[email protected]/examples/jsm/"
}
}
</script>
CSS
body {
margin: 0px;
}
JavaScript
import * as THREE from 'three';
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
let mesh, renderer, scene, camera, controls;
init();
animate();
function init() {
// renderer
renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.setPixelRatio( window.devicePixelRatio );
document.body.appendChild( renderer.domElement );
// scene
scene = new THREE.Scene();
// camera
camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 10000 );
camera.position.set( 20, 20, 20 );
// controls
controls = new OrbitControls( camera, renderer.domElement );
const spotLightOne = new THREE.SpotLight(0xfff5bc);
spotLightOne.name = 'spotLightOne';
spotLightOne.intensity = 100;
spotLightOne.target.position.set(-3.5, 0, 2);
spotLightOne.position.set(0, 20, 10);
spotLightOne.penumbra = 0.3;
scene.add(spotLightOne, spotLightOne.target);
const spotLightTwo = new THREE.SpotLight(0xfff5bc);
spotLightTwo.name = 'spotLightTwo';
spotLightTwo.intensity = 100;
spotLightTwo.target.position.set(0.5, 0, -0.5);
spotLightTwo.position.set(0, 20, -10);
spotLightTwo.penumbra = 0.1;
scene.add(spotLightTwo, spotLightTwo.target);
const spotLightThree = new THREE.SpotLight(0xfff5bc);
spotLightThree.name = 'spotLightThree';
spotLightThree.intensity = 100;
spotLightThree.target.position.set(-3, 0, -2);
spotLightThree.position.set(-20, 20);
spotLightThree.penumbra = 0.3;
scene.add(spotLightThree, spotLightThree.target);
// axes
scene.add( new THREE.AxesHelper( 20 ) );
// geometry
const geometry = new THREE.SphereGeometry( 5, 12, 8 );
// material
const material = new THREE.MeshPhongMaterial( {
color: 0x00ffff,
flatShading: true
} );
// mesh
mesh = new THREE.Mesh( geometry, material );
scene.add(...