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.

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



Geometry defaults

  // ...

  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.


  // ...

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


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:

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