Currently have three.js car model. The car doors open when clicked. My goal is to change this function to where they open based on a true or false statement. ' If true start door open animation' if false start door closing animation' . How do I go about changing the way this function works?
Heres what I have right now. It triggers when clicked.
const MOVABLE_PARTS = {
bonnet_ok_primary_0: {
isOpen: false,
type: 'rotation',
axis: 'x',
offset: Math.PI / 3,
},
boot_dummy: {
isOpen: false,
type: 'rotation',
axis: 'x',
offset: -Math.PI / 6,
},
door_lf: {
isOpen: false,
type: 'rotation',
axis: 'z',
offset: -Math.PI / 3,
},
door_lr: {
isOpen: false,
type: 'rotation',
axis: 'z',
offset: -Math.PI / 3,
},
door_rf: {
isOpen: false,
type: 'rotation',
axis: 'z',
offset: Math.PI / 3,
},
door_rr: {
isOpen: false,
type: 'rotation',
axis: 'z',
offset: Math.PI / 3,
},
door_lf_glass0_0: {
isOpen: false,
type: 'position',
axis: 'z',
offset: -0.2,
},
door_lr_glass0_0: {
isOpen: false,
type: 'position',
axis: 'z',
offset: -0.2,
},
door_rf_glass0_0: {
isOpen: false,
type: 'position',
axis: 'z',
offset: -0.2,
},
door_rr_glass0_0: {
isOpen: false,
type: 'position',
axis: 'z',
offset: -0.2,
},
};
type MovablePartName = keyof typeof MOVABLE_PARTS;
const MOVABLE_PART_NAMES = Object.keys(MOVABLE_PARTS);
const selectControls = new SelectControls(
[this.model],
this.camera,
this.canvas
);
selectControls.addEventListener('select', (event) => {
const e = event as SelectEvent;
if (e.object) {
const obj = e.object;
this.model.handleClick(obj);
const pos = new Vector3();
obj.getWorldPosition(pos);
// eslint-disable-next-line no-console
console.info(obj.name, obj.position.toArray(), pos.toArray(), obj);
}
});
selectControls.activate();
togglePart(name: MovablePartName) {
const part = this._movableParts[name];
const target = this._root?.getObjectByName(name);
if (part && target) {
if (!part.isOpen) {
part.isOpen = true;
new Tween(target)
.to({ [part.type]: { [part.axis]: part.offset } }, 500)
.start();
} else {
part.isOpen = false;
new Tween(target).to({ [part.type]: { [part.axis]: 0 } }, 500).start();
}
}
}
handleClick(obj: Object3D) {
let target: Object3D | null = obj;
while (target !== null && !MOVABLE_PART_NAMES.includes(target.name)) {
if (target.parent) {
target = target.parent;
} else {
target = null;
break;
}
}
if (target) {
const name = target.name as MovablePartName;
this.togglePart(name);
}
}