whs.js/examples/lights/SpotLight/script.js

import * as UTILS from '@utils';

const white = 0xffffff;
const lightIntensity = 1;
const lightDistance = 80;

const cameraModule = new WHS.DefineModule('camera', new WHS.PerspectiveCamera({
  position: {
    z: -30,
    y: 20,
    x: -20
  },
  far: 20000,
  near: 1
}));

const controlsModule = new WHS.OrbitControlsModule();

const app = new WHS.App([
  ...UTILS.appModules({
    position: new THREE.Vector3(0, 10, 200),
    renderer: {
      shadowmap: {
        type: THREE.BasicShadowMap
      }
    }
  }),
  controlsModule,
  cameraModule,
  new WHS.ResizeModule()
]);
controlsModule.controls.autoRotate = true;

new WHS.Box({
  geometry: [10, 10, 10, 100, 100, 100],
  material: new THREE.MeshPhongMaterial({
    bumpScale: 2,
    displacementBias: -0.5,
    displacementScale: 0.5
  }),
  shadow: {
    receive: false
  },
  modules: [
    new WHS.TextureModule({
      url: `${process.assetsPath}/textures/box.jpg`
    }, {
      url: `${process.assetsPath}/textures/normalBox.png`,
      type: 'normalMap'
    }, {
      url: `${process.assetsPath}/textures/bumpBox.png`,
      type: 'bumpMap'
    }, {
      url: `${process.assetsPath}/textures/displacementBox.png`,
      type: 'displacementMap'
    }
  )
  ],
  position: [0, 4, 0]
}).addTo(app);

new WHS.Box({
  geometry: {
    width: 2000,
    height: 2000
  },
  position: [0, -1.5, 0],
  rotation: {
    y: 0,
    x: -Math.PI / 2
  },
  shadow: {
    cast: false
  },
  material: new THREE.MeshPhongMaterial({
    side: THREE.DoubleSide
  })
}).addTo(app);

new WHS.AmbientLight({
  color: 0xffffff,
  intensity: 0.05
}).addTo(app);

const spotLight = new WHS.SpotLight({
  color: white,
  intensity: lightIntensity,
  distance: lightDistance,
  angle: Math.PI / 4,

  position: {
    x: 0,
    y: 20,
    z: -15
  },
  material: new THREE.MeshBasicMaterial({
    color: white
  })
});
spotLight.addTo(app);

const cylinder = new WHS.Cylinder({
  geometry: {
    radiusTop: 0,
    radiusBottom: 1.7,
    height: 2
  },
  position: {
    x: -1,
    y: -1,
    z: -1
  },
  shadow: {
    cast: false
  },
  material: new THREE.MeshBasicMaterial({
  })

});
cylinder.addTo(spotLight);
cylinder.rotation = new THREE.Euler(-Math.PI / 4, 0, 0);

app.start();