Extension Autodesk Forge: My control panel doesn't connect to the Revit model after adding my own extension to the package - autodesk-forge

Question

I used this package (https://github.com/petrbroz/forge-iot-extensions-demo). After that, I added my own extension code (RobotExt.js). The Control panel and Icon of the my extension were added to the Autodesk Forge website. But unfortunately, the control panel doesn't work.
There are these errors:
This is the source code of the my extension file:
class RobotExtension extends Autodesk.Viewing.Extension {
constructor(viewer, options) {
super(viewer, options);
this.viewer = viewer;
//this.tree = null;
this.tree = this.viewer.model.getData().instanceTree;
this.defaultState = null;
this.customize = this.customize.bind(this);
this.createUI = this.createUI.bind(this);
this.setTransformation = this.setTransformation.bind(this);
this.getFragmentWorldMatrixByNodeId = this.getFragmentWorldMatrixByNodeId.bind(this);
this.assignTransformations = this.assignTransformations.bind(this);
this.findNodeIdbyName = this.findNodeIdbyName.bind(this);
}
load() {
console.log('RobotExtension is loaded!');
this.createUI();
this.setTransformation();
return true;
}
unload() {
console.log('RobotExtension is now unloaded!');
this.viewer.restoreState(this.defaultState);
return true;
}
setTransformation() {
let tree = this.tree;
/* ====================== right 0 ================= */
let ID_BaseRod = 4806;
let ID_LowerArmBody = 4806;
let Pivot_BaseRod = new THREE.Mesh(new THREE.BoxGeometry(20, 20, 20), new THREE.MeshBasicMaterial({ color: 0xff0000 }));
let Position_BaseRod = this.getFragmentWorldMatrixByNodeId(ID_BaseRod).matrix[0].getPosition().clone();
//print the returned value from getFragmentWorldMatrixByNodeId method and using this we can inspect the....
// output of the fucntion(method) whether working or not
console.log(Position_BaseRod);
//console.log(position);
Pivot_BaseRod.position.x = 0;
Pivot_BaseRod.position.y = Position_BaseRod.y;
Pivot_BaseRod.position.z = Position_BaseRod.z-2.84;
viewer.impl.scene.add(Pivot_BaseRod);
let Helper_LowerArmBody = new THREE.Mesh();
let Position_LowerArmBody = this.getFragmentWorldMatrixByNodeId(ID_LowerArmBody).matrix[0].getPosition().clone();
Helper_LowerArmBody.position.x = - Position_LowerArmBody.x + Math.abs(Position_LowerArmBody.x - Pivot_BaseRod.position.x);
Helper_LowerArmBody.position.y = - Position_LowerArmBody.y + Math.abs(Position_LowerArmBody.y - Pivot_BaseRod.position.y);
Helper_LowerArmBody.position.z = - Position_LowerArmBody.z + Math.abs(Position_LowerArmBody.z - Pivot_BaseRod.position.z);
Pivot_BaseRod.add(Helper_LowerArmBody);
console.log(Position_LowerArmBody);
// // /* ====================== left 0 ================= */
let ID_BaseRod10 = 4851;
let ID_LowerArmBody10 = 4851;
let Pivot_BaseRod10 = new THREE.Mesh(new THREE.BoxGeometry(0.1, 0.1, 0.1), new THREE.MeshBasicMaterial({ color: 0xff0000 }));
let Position_BaseRod10 = this.getFragmentWorldMatrixByNodeId(ID_BaseRod10).matrix[0].getPosition().clone();
//print the returned value from getFragmentWorldMatrixByNodeId method and using this we can inspect the....
// output of the fucntion(method) whether working or not
console.log(Position_BaseRod10);
Pivot_BaseRod10.position.x = 0;
Pivot_BaseRod10.position.y = Position_BaseRod10.y;
Pivot_BaseRod10.position.z = Position_BaseRod10.z-2.84;
viewer.impl.scene.add(Pivot_BaseRod10);
console.log(Pivot_BaseRod10);
let Helper_LowerArmBody10 = new THREE.Mesh();
let Position_LowerArmBody10 = this.getFragmentWorldMatrixByNodeId(ID_LowerArmBody10).matrix[0].getPosition().clone();
Helper_LowerArmBody10.position.x = Position_LowerArmBody10.x + Math.abs(Position_LowerArmBody10.x - Pivot_BaseRod10.position.x);
Helper_LowerArmBody10.position.y = -Position_LowerArmBody10.y + Math.abs(Position_LowerArmBody10.y - Pivot_BaseRod10.position.y);
Helper_LowerArmBody10.position.z = -Position_LowerArmBody10.z + Math.abs(Position_LowerArmBody10.z - Pivot_BaseRod10.position.z);
Pivot_BaseRod10.add(Helper_LowerArmBody10);
console.log(Position_LowerArmBody10);
let ID_BaseRod15 = 4886;
let ID_LowerArmBody15 = 4886;
let Pivot_BaseRod15= new THREE.Mesh(new THREE.BoxGeometry(0.1, 0.1, 0.1), new THREE.MeshBasicMaterial({ color: 0xff0000 }));
let Position_BaseRod15 = this.getFragmentWorldMatrixByNodeId(ID_BaseRod15).matrix[0].getPosition().clone();
//print the returned value from getFragmentWorldMatrixByNodeId method and using this we can inspect the....
// output of the fucntion(method) whether working or not
console.log(Position_BaseRod15);
Pivot_BaseRod15.position.x = 0;
Pivot_BaseRod15.position.y = Position_BaseRod15.y;
Pivot_BaseRod15.position.z = Position_BaseRod15.z-2.84;
viewer.impl.scene.add(Pivot_BaseRod15);
console.log(Pivot_BaseRod15);
let Helper_LowerArmBody15 = new THREE.Mesh();
let Position_LowerArmBody15 = this.getFragmentWorldMatrixByNodeId(ID_LowerArmBody15).matrix[0].getPosition().clone();
Helper_LowerArmBody15.position.x = Position_LowerArmBody15.x + Math.abs(Position_LowerArmBody15.x - Pivot_BaseRod15.position.x);
Helper_LowerArmBody15.position.y = -Position_LowerArmBody15.y + Math.abs(Position_LowerArmBody15.y - Pivot_BaseRod15.position.y);
Helper_LowerArmBody15.position.z = -Position_LowerArmBody15.z + Math.abs(Position_LowerArmBody15.z - Pivot_BaseRod15.position.z);
Pivot_BaseRod15.add(Helper_LowerArmBody15);
console.log(Position_LowerArmBody15);
There was an error for limitation character in Stackoverflow I had to delete some parts of my code.
[![enter image description here][2]][2]

Answer 1

In the setTransformation method of your extension class, you have the following line of code:
viewer.impl.scene.add(Pivot_BaseRod1);
The viewer variable is not defined, however. The line of code should instead look like this:
this.viewer.impl.scene.add(Pivot_BaseRod1);