Light can't look at origin

Hi,

I’m using engine to develop my project not editor and I found that I can’t make light look at the origin like bellow.

const light1 = new pc.Entity('light1');
const light1Light = new pc.Entity("light1Light");
light1Light.addComponent('light', {
    type: "spot",
    innerConeAngle: 0,
    outerConeAngle: 5,
    range: 20,
    intensity: 100,
});
light1.addComponent("script");
light1.addChild(light1Light);
light1.setPosition(0, -5, 0);
light1.lookAt(pc.Vec3.ZERO);

I call the code above before app.start().

The forward vector of light1 after lookAt is still (0,0,-1), and the most strange thing is the value will keep changing when I orbit control camera and call lookAt to orgin every frames.

export class LightControl extends pc.ScriptType {
    initialize(): void {
        this.entity.lookAt(pc.Vec3.ZERO);
    }

    update(dt: number): void {
        this.entity.lookAt(pc.Vec3.ZERO);
    }
}

I can make sure that My CameraController (bellow) script is attached to Camera entity not Light Entity.

import * as pc from "playcanvas";

export class CameraController extends pc.ScriptType {

  private leftDown = false;

  private rightDown = false;

  private rotation = new pc.Mat4().setIdentity();

  private center = new pc.Vec3();

  private distanceFromCenter = 3;

  public initialize(): void {
    const { app } = this;

    this.updateTransform();

    app.mouse.disableContextMenu();

    app.mouse.on(pc.EVENT_MOUSEDOWN, this.onMouseDown, this);
    app.mouse.on(pc.EVENT_MOUSEMOVE, this.onMouseMove, this);
    app.mouse.on(pc.EVENT_MOUSEUP, this.onMouseUp, this);
    app.mouse.on(pc.EVENT_MOUSEWHEEL, this.onMouseWheel, this);

    this.on("destroy", () => {
      app.mouse.off(pc.EVENT_MOUSEDOWN, this.onMouseDown);
      app.mouse.off(pc.EVENT_MOUSEMOVE, this.onMouseMove);
      app.mouse.off(pc.EVENT_MOUSEUP, this.onMouseUp);
    });
  }

  private onMouseDown(event: pc.MouseEvent) {
    switch (event.button) {
      case pc.MOUSEBUTTON_LEFT:
        this.leftDown = true;
        break;
      case pc.MOUSEBUTTON_RIGHT:
        this.rightDown = true;
        break;
      default:
        break;
    }
  }

  private onMouseMove(event: pc.MouseEvent) {
    if (this.leftDown) {
      const deltaY = new pc.Mat4().setFromEulerAngles(0, -event.dx / 10, 0);
      const deltaX = new pc.Mat4().setFromEulerAngles(-event.dy / 10, 0, 0);

      this.rotation = deltaY.mul(this.rotation.mul(deltaX));
      this.updateTransform();
    } else if (this.rightDown) {
      const offset = this.rotation.transformVector(new pc.Vec3(-event.dx / 1000, event.dy / 1000, 0));
      this.center.add(offset);
      this.updateTransform();
    }
  }

  private onMouseUp(event: pc.MouseEvent) {
    switch (event.button) {
      case pc.MOUSEBUTTON_LEFT:
        this.leftDown = false;
        break;
      case pc.MOUSEBUTTON_RIGHT:
        this.rightDown = false;
        break;
      default:
        break;
    }
  }

  private onMouseWheel(event: pc.MouseEvent) {
    this.distanceFromCenter /= Math.pow(0.9, event.wheelDelta);

    this.distanceFromCenter = Math.max(this.distanceFromCenter, 0.5)
    this.distanceFromCenter = Math.min(this.distanceFromCenter, 10)

    this.updateTransform();
  }

  private updateTransform() {
    const translation = new pc.Mat4().setTranslate(this.center.x, this.center.y, this.center.z);
    const delta = new pc.Mat4().setTranslate(0, 0, this.distanceFromCenter);
    const transform = translation.mul(this.rotation.clone().mul(delta))
    this.entity.setRotation(new pc.Quat().setFromEulerAngles(transform.getEulerAngles()))
    this.entity.setPosition(transform.getTranslation())
  }
}

Hi @Jyunan_Zou and welcome!

I’m not sure if it is the problem here, but I suggest to take a look at my topic below.

Try something like this:

spotlight.lookAt(target, pc.Vec3.RIGHT);
spotlight.rotateLocal(90, 0, 0);