Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

216
Vistas
(Threejs Model Project) How to trigger animation without click

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);
    }
  }
about 4 years ago · Juan Pablo Isaza
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda