Currently, I am working with three.js version r97 and Angular 7.
While I can successfully run and serve the application locally, I encounter type errors when attempting to build for production.
Error TS2339: Property 'isMesh' does not exist on type 'Object3D'.
Error TS2339: Property 'material' does not exist on type 'Object3D'.
Error TS2339: Property 'geometry' does not exist on type 'Object3D'.
These errors occur after the object is loaded and I start traversing its parts.
The issue lies in child.isMesh and the subsequent modifications made to the child object which are generating errors.
Being new to TypeScript, I'm uncertain if there's a more effective way to handle these manipulations. As far as I can tell, forcing a production build seems to be out of reach. Any guidance or suggestions on resolving this problem would be greatly appreciated.
this.loader = new THREE.FBXLoader();
this.loader.load('assets/models/C4D_Export.fbx', object => {
object.traverse( child => {
if( child.type == "Group"){
child.name = 'ToolGroup';
}
if ( child.isMesh ) {
const oldMat = child.material;
//CONVERT MATERIAL TO STANDARD MATERIAL.
child.material = new THREE.MeshStandardMaterial({
color: oldMat.color,
map: oldMat.map,
});
child.castShadow = true;
child.receiveShadow = true;
child.material.combine = THREE.MixOperation;
child.material.envMap = envMap;
child.material.shininess=10;
child.material.refractionRatio=1;
child.material.reflectivity=1;
//child.material.normalMap = texture;
//child.material.normalMapType = 0;
child.material.metalness=1;
child.geometry.applyMatrix(new THREE.Matrix4().makeTranslation(5, 0, 0));
//child.material.color.setHex( 0xffffff );
var f2 = gui.addFolder('Position'+child.name);
f2.add(controller, 'positionX', -50, 50).onChange( function() {
child.position.x = (controller.positionX);
});
f2.add(controller, 'positionY', -50, 50).onChange( function() {
child.position.y = (controller.positionY);
});
f2.add(controller, 'positionZ', -50, 50).onChange( function() {
child.position.z = (controller.positionZ);
});
var sphereAxis = new THREE.AxesHelper(200);
child.add(sphereAxis);
}
});
object.position.y = -20;
object.scale.set(1,1,1);
object.rotation.z = (-90*(Math.PI/180));
objholder.add(object);
});
To address the issue, I attempted to create an interface for Object3D with defined properties:
interface Object3D{
isMesh?: any,
geometry?: any,
material?: any,
}
Unfortunately, the error persists despite this modification.
Edit: Update 2
A temporary solution that seems to work is adding //@ts-ignore above each problematic line causing errors. Although unsure if this is considered bad practice, it resolves the issue for now.