whs.js/examples/design/easter/script.js

import * as UTILS from '@utils';

const app = new WHS.App([
  new WHS.ElementModule(),
  new WHS.SceneModule(),
  new PHYSICS.WorldModule({
    ammo: process.ammoPath,
    gravity: {
      x: 0,
      y: -10,
      z: 0
    },
  }),
  new WHS.DefineModule('camera', new WHS.PerspectiveCamera({
    position: new THREE.Vector3(-8, 5, 20),
    fov: 45,
    far: 2000
  })),
  new WHS.RenderingModule({
    bgColor: 0xffffff,

    renderer: {
      antialias: true,
      shadowmap: {
        type: THREE.PCFSoftShadowMap
      }
    }
  }),
  new WHS.ResizeModule()
]);

const camera = app.manager.get('camera');

// camera.lookAt(new THREE.Vector3(0, 0, 0));

// Start rendering.
app.start();

new WHS.Box({
  geometry: {
    width: 100,
    height: 1,
    depth: 100
  },
  modules: [
    new PHYSICS.BoxModule({
      mass: 0
    })
  ],

  material: new THREE.MeshPhongMaterial({
    color: 0xffffff
  }),

  position: {
    x: 0,
    y: -1,
    z: 0
  }
}).addTo(app);

const egg = new WHS.Importer({
  url: `${process.assetsPath}/models/easter/egg_light.json`,

  modules: [
    new PHYSICS.ConvexModule({
      path: `${process.assetsPath}/models/easter/egg_low.json`
    }),
    new WHS.TextureModule({
      url: `${process.assetsPath}/textures/easter/egg1.jpg`
    })
  ],

  useCustomMaterial: true,

  material: new THREE.MeshPhongMaterial({
    shading: THREE.SmoothShading,
    side: THREE.DoubleSide
  }),

  position: {
    y: 0,
    x: -10
  },

  rotation: {
    x: Math.PI / 2,
    y: Math.PI / 8
  }
});

const rabbit = new WHS.Importer({
  url: `${process.assetsPath}/models/easter/rabbit.json`,

  modules: [
    new PHYSICS.ConcaveModule({
      path: `${process.assetsPath}/models/easter/rabbit_low.json`,
      scale: new THREE.Vector3(0.5, 0.5, 0.5)
    })
  ],

  position: {
    y: 5,
    x: -3
  },

  rotation: {
    x: Math.PI / 2
  },

  scale: [0.5, 0.5, 0.5]
});

rabbit.addTo(app);

new WHS.SpotLight({
  color: 0xffffff,
  decay: 1,
  distance: 150,
  intensity: 1,

  shadowmap: {
    left: -20,
    top: 20,
    bottom: -20,
    right: 20,

    bias: -0.0001,

    width: 4096,
    height: 4096,

    near: 1,
    far: 100,

    fov: 10
  },

  position: {
    z: 20,
    x: 20,
    y: 20
  },

  target: {
    x: -10,
    y: 0,
    z: 0
  }
}).addTo(app);

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

let egg2, egg3, egg4, egg5, egg6, egg7, egg8, egg9;

egg.addTo(app).then((object) => {
  egg2 = object.clone(false, true);
  egg2.material.map = WHS.TextureModule.load(`${process.assetsPath}/textures/easter/egg2.jpg`);

  egg2.addTo(app).then((obj) => {
    obj.rotation.y = -Math.PI / 8;
    obj.position.setX(-8.5);
    obj.position.setZ(1.5);
  });

  egg3 = object.clone(false, true);
  egg3.material.map = WHS.TextureModule.load(`${process.assetsPath}/textures/easter/egg3.jpg`);

  egg3.addTo(app).then((obj) => {
    obj.rotation.y = -Math.PI / 8;
    obj.position.setX(-8.5);
    obj.position.setZ(1.5);
  });

  egg4 = object.clone(false, true);
  egg4.material.map = WHS.TextureModule.load(`${process.assetsPath}/textures/easter/egg4.jpg`);

  egg4.addTo(app).then((obj) => {
    obj.rotation.y = -Math.PI / 8;
    obj.position.setX(0);
    obj.position.setZ(-1.5);
  });

  egg5 = object.clone(false, true);
  egg5.material.map = WHS.TextureModule.load(`${process.assetsPath}/textures/easter/egg1.jpg`);

  egg5.addTo(app).then((obj) => {
    obj.rotation.y = -Math.PI / 8;
    obj.position.setX(2);
    obj.position.setZ(2.5);
  });

  egg6 = object.clone(false, true);
  egg6.material.map = WHS.TextureModule.load(`${process.assetsPath}/textures/easter/egg2.jpg`);

  egg6.addTo(app).then((obj) => {
    obj.rotation.y = -Math.PI / 8;
    obj.position.setX(0.5);
    obj.position.setZ(1.5);
  });

  egg7 = object.clone(false, true);
  egg7.material.map = WHS.TextureModule.load(`${process.assetsPath}/textures/easter/egg3.jpg`);

  egg7.addTo(app).then((obj) => {
    obj.rotation.y = -Math.PI / 8;
    obj.position.setX(2);
    obj.position.setZ(-1.5);
  });

  egg8 = object.clone(false, true);
  egg8.material.map = WHS.TextureModule.load(`${process.assetsPath}/textures/easter/egg4.jpg`);

  egg8.addTo(app).then((obj) => {
    obj.rotation.y = -Math.PI / 8;
    obj.position.setX(1);
    obj.position.setZ(2.5);
  });

  egg9 = object.clone(false, true);
  egg9.material.map = WHS.TextureModule.load(`${process.assetsPath}/textures/easter/egg1.jpg`);

  egg9.addTo(app).then((obj) => {
    obj.rotation.y = -Math.PI / 8;
    obj.position.setX(3);
    obj.position.setZ(-1.5);
  });
});

camera.native.lookAt(new THREE.Vector3(-4, 0, 0));

document.body.addEventListener('mousemove', (e) => {
  camera.position.x = -8 + (e.screenX - window.innerWidth / 2) / 40;
  camera.position.y = 5 + (e.screenY - window.innerHeight / 2) / 80;
  camera.native.lookAt(new THREE.Vector3(-4, 0, 0));
});

document.body.addEventListener('click', () => {
  rabbit.use('physics').setLinearVelocity(new THREE.Vector3(0, 5, 0));
  egg.use('physics').setAngularVelocity(new THREE.Vector3(0, 10, 0));
  egg2.use('physics').setAngularVelocity(new THREE.Vector3(0, -10, 0));
  egg3.use('physics').setAngularVelocity(new THREE.Vector3(0, -10, 0));
  egg4.use('physics').setAngularVelocity(new THREE.Vector3(0, 10, 0));
  egg5.use('physics').setAngularVelocity(new THREE.Vector3(0, -10, 0));
  egg6.use('physics').setAngularVelocity(new THREE.Vector3(0, -10, 0));
  egg7.use('physics').setAngularVelocity(new THREE.Vector3(0, 10, 0));
  egg8.use('physics').setAngularVelocity(new THREE.Vector3(0, -10, 0));
  egg9.use('physics').setAngularVelocity(new THREE.Vector3(0, -10, 0));
});