whs.js/examples/textures/phong/script.js

import * as UTILS from '@utils';

const app = new WHS.App([
  ...UTILS.appModules()
]);

const shadow = {
  cast: false,
  recieve: false
};

// Map
const box = new WHS.Box({ // Create box comonent.
  geometry: [10, 10, 10],

  material: new THREE.MeshPhongMaterial({
    color: UTILS.$colors.mesh
  }),

  shadow,

  modules: [
    new WHS.TextureModule({
      url: `${process.assetsPath}/textures/box.jpg`
    })
  ],

  position: [-15, 0, 0]
});

const label = new UTILS.Label({
  text: 'Map',
  scale: [10, 10, 1],
  position: [-15, 7, 0]
});

box.addTo(app);
label.addTo(app);

// normalMap

const boxNormal = new WHS.Box({ // Create box comonent.
  geometry: [10, 10, 10],

  material: new THREE.MeshPhongMaterial({
    color: UTILS.$colors.mesh
  }),

  shadow,

  modules: [
    new WHS.TextureModule({
      url: `${process.assetsPath}/textures/box.jpg`
    }, {
      type: 'normalMap',
      url: `${process.assetsPath}/textures/normalBox.png`
    })
  ],

  position: [0, 0, 0]
});

const labelNormal = new UTILS.Label({
  text: 'normalMap',
  scale: [10, 10, 1],
  position: [0, 7, 0]
});

boxNormal.addTo(app);
labelNormal.addTo(app);

// displacementMap

const boxDisplace = new WHS.Box({ // Create box comonent.
  geometry: [10, 10, 10, 100, 100, 100],

  material: new THREE.MeshPhongMaterial({
    color: UTILS.$colors.mesh
  }),

  shadow,

  modules: [
    new WHS.TextureModule({
      url: `${process.assetsPath}/textures/box.jpg`
    }, {
      type: 'displacementMap',
      url: `${process.assetsPath}/textures/displacementBox.png`
    })
  ],

  position: [15, 0, 0]
});

const labelDisplace = new UTILS.Label({
  text: 'displacementMap',
  size: 30,
  scale: [10, 10, 1],
  position: [15, 7, 0]
});

boxDisplace.addTo(app);
labelDisplace.addTo(app);

new WHS.PointLight({
  distance: 100,
  position: [0, 0, 10]
}).addTo(app);

UTILS.addBasicLights(app);

app.start(); // Start animations and physics simulation.