threejs using layers

by mmalex

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/91/three.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

CSS

body {
  overflow: hidden;
}

JavaScript

let renderer;
let camera;
let controls;

let scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(54, window.innerWidth / window.innerHeight, 0.1, 1000);

renderer = new THREE.WebGLRenderer({
  antialias: true
});
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setClearColor(new THREE.Color(0xfefefe));
document.body.appendChild(renderer.domElement);

camera.position.x = 50;
camera.position.y = 50;
camera.position.z = 50;
camera.lookAt(0, 0, 0);

controls = new THREE.OrbitControls(camera);

let gridHelper = new THREE.GridHelper(40, 40);
scene.add(gridHelper);

// ============= example code ===================
// answer to https://stackoverflow.com/questions/54807618/light-mesh-with-specific-light-three-js/54809671#54809671

camera.layers.set(0);

let spheresArray = [];
let CurvesArray = [];
let lightsArray = [];

for (var i = 0; i < 5; i++) {
        var SphereGeometry = new THREE.SphereGeometry(2, 20, 20);
        var SphereMaterial = new THREE.MeshLambertMaterial({ color: 0xffffff });
        var Sphere = new THREE.Mesh(SphereGeometry, SphereMaterial);
        Sphere.position.set(i * 7 -14, 0 + Math.random() * 5 - 2.5, 2);
		Sphere.layers.set(i%3);
        spheresArray.push(Sphere);
        scene.add(Sphere);
    }

for (var i = 0; i < CurvesArray.length; i++) {
        var geometry = new THREE.TubeGeometry( CurvesArray[i], 20, 0.5, 8, false );
        var material = new THREE.MeshBasicMaterial( { color: 0xe3e3e3 } );
        var mesh = new THREE.Mesh( geometry, material );
        scene.add( mesh );
    }

var spotLight = new THREE.SpotLight( 0xff00cc );
    spotLight.position.set( -10, 3, 30, 100 );
	spotLight.layers.set(0);
    lightsArray.push(spotLight);
    scene.add(spotLight);

    var spotLight2 = new THREE.SpotLight( 0xaa99cc );
    spotLight2.position.set( 5, 15, 10, 100 );
	spotLight2.layers.set(1);
    lightsArray.push(spotLight2);
    scene.add(spotLight2);

    var spotLight3 = new THREE.SpotLight( 0x0022bb );
   ...