I am trying to reduce the number of vertices/meshes in my model by using the SimplifierModifier module. I copied the three js example and ran it with my own gltf model. But I keep getting an error:
Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'clone')
which originates from the .clone() line in the example:
new GLTFLoader().load( 'test.glb', function ( gltf ) {
const mesh = gltf.scene.children[ 0 ];
mesh.position.x = - 3;
mesh.rotation.y = Math.PI / 2;
scene.add( mesh );
const modifier = new SimplifyModifier();
const simplified = mesh.clone();
simplified.material = simplified.material.clone();
simplified.material.flatShading = true;
const count = Math.floor( simplified.geometry.attributes.position.count * 0.875 ); // number of vertices to remove
simplified.geometry = modifier.modify( simplified.geometry, count );
simplified.position.x = 3;
simplified.rotation.y = - Math.PI / 2;
scene.add( simplified );
render();
}
I thought that I might be using an old version so here is my three js versioning:
<script async src="https://unpkg.com/es-module-shims@1.3.6/dist/es-module-shims.js"></script>
<script type="importmap">
{
"imports": {
"three": "https://unpkg.com/three@0.143.0/build/three.module.js"
}
}
</script>
<script type="module">
import * as THREE from 'three';
import { OrbitControls } from 'https://unpkg.com/three@0.143.0/examples/jsm/controls/OrbitControls.js';
import { GLTFLoader } from 'https://unpkg.com/three@0.143.0/examples/jsm/loaders/GLTFLoader.js';
import { SimplifyModifier } from 'https://unpkg.com/three@0.143.0/examples/jsm/modifiers/SimplifyModifier.js';
</script>
But the error is still the same which seems to be stating that there is no function called clone().