whs.js/examples/basic/fogexp/script.js

import * as UTILS from '@utils';
import {connect} from '@api'; // eslint-disable-line
const {ready} = connect();

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 fogModule = new WHS.FogModule({color: 0xaaaaaa, near: 10, far: 200});

const app = new WHS.App([
  new WHS.ElementModule(),
  new WHS.SceneModule(),
  cameraModule,
  new WHS.RenderingModule(UTILS.appDefaults.rendering, {
    shadow: true
  }),
  controlsModule,
  new StatsModule(),
  new WHS.ResizeModule(),
  fogModule
]);

controlsModule.controls.minDistance = 15;
controlsModule.controls.maxDistance = 400;

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: 300,
    height: 152
  },

  position: [5, -1.5, -22],

  rotation: {
    y: 0,
    x: -Math.PI / 2
  },

  shadow: {
    cast: false
  },

  modules: [
    new WHS.TextureModule({
      url: `${process.assetsPath}/textures/metal-floor.png`,
      repeat: new THREE.Vector2(30, 30)
    }
  )],

  material: new THREE.MeshPhongMaterial({
  })
}).addTo(app);

new WHS.Box({
  geometry: {
    width: 300,
    height: 120,
    depth: 10
  },

  position: [5, 58, 50],

  shadow: {
    cast: false
  },

  modules: [
    new WHS.TextureModule({
      url: `${process.assetsPath}/textures/wall-brick.jpg`,
      repeat: new THREE.Vector2(10, 5)
    }
  )],

  material: new THREE.MeshPhongMaterial({
  })
}).addTo(app);

new WHS.Box({
  geometry: {
    width: 300,
    height: 120,
    depth: 10
  },

  position: [5, 58, -100],

  shadow: {
    cast: false
  },

  modules: [
    new WHS.TextureModule({
      url: `${process.assetsPath}/textures/wall-brick.jpg`,
      repeat: new THREE.Vector2(10, 5)
    }
  )],

  material: new THREE.MeshPhongMaterial({
  })
}).addTo(app);

// z wall
new WHS.Box({
  geometry: {
    width: 150,
    height: 120,
    depth: 10
  },

  rotation: {
    y: -Math.PI / 2,
    x: 0
  },

  position: [150, 58, -25],

  shadow: {
    cast: false
  },

  modules: [
    new WHS.TextureModule({
      url: `${process.assetsPath}/textures/wall-brick.jpg`,
      repeat: new THREE.Vector2(10, 5)
    }
  )],

  material: new THREE.MeshPhongMaterial({
  })
}).addTo(app);

new WHS.Sphere({
  geometry: {
    radius: 2,
    widthSegments: 16,
    heightSegments: 16
  },

  position: [-10, 0.8, 30],

  shadow: {
    cast: false,
    receive: false
  },

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

  material: new THREE.MeshPhongMaterial({
  })
}).addTo(app);

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

app.start();
ready();