Model

components / meshes / Model.js

Model class loads geometry from JSON file by url as it's material, but material you can replace with your own. Just add useCustomMaterial property with true value in material parameter object. This class should be used if none of other simple classes can generate such geometry or you basically need to load your custom geometry, that can be for example car or teapot model.

• Basic Model example
• Example with several models of different types

JavaScript

const teapot = new WHS.Model({
  geometry: {
    path: "assets/models/utah-teapot-large.json"
  },

  material: new THREE.MeshPhongMaterial({
    vertexColors: THREE.VertexColors,
    shading: THREE.SmoothShading,
    side: THREE.DoubleSide
  }),
  
  modules: [
  	new WHS.mesh.TextureModule({
    	url: 'assets/textures/teapot.jpg',
      repeat: new THREE.Vector3(2, 2)
    })
  ],
  
  useCustomMaterial: true, // Required if you want to force the use of material you provide

  pos: {
    x: 0,
    y: 100,
    z: 0
  },

  scale: {
    x: 4,
    y: 4,
    z: 4
  }
});

teapot.addTo(world);

Parameters

Geometry defaults

JavaScript

{
  // ...

  geometry: {
    path: '', // String. Url to model file.
    physics: '', // String. Url of physics model. (opional)
    loader: JSONLoader // Three.js loader.
  }
}

These defaults are additional, there are also defaults filled by MeshComponent, etc.

Instructions

JavaScript

{
  // ...

  geometry: ['path', 'physics', 'loader']
}

Clone

Models are asynchronous.
Cloning a model thus require to make sure it is built before invoking clone().

Taking the teapot example above, here is how to clone that object:

JavaScript

teapot.addTo(world).then(teapot => {
  const anotherTeapot = teapot.clone(true, true));
});