GLTF Model not following my camera

Questions
, ,
1

So im using cannon es for my fps inplementation but for some reason i dont know how to make my gltf model follow where my camera is pointing to, i will leave here the two prints that shows my issue

print1
print11918×902 66.6 KB

print2
print21919×897 37.9 KB

Is there any way to make my hands point to where the camera is looking at?

PS: Ignore the right black hand, the issue is when i turn around, my model dont rotates with the camera

2

U move and turn the hands and the camera follows the hands instead

3

this is my player class

import * as THREE from "three";
import * as CANNON from "cannon";
import { PointerLockControlsCannon } from "../cannon-es-master/examples/js/PointerLockControlsCannon.js";

const instructions = document.getElementById("locker");
const itemName = document.getElementById("itemName");

export class Player {
  constructor(radius, world, camera, app) {
    this.lastCallTime = performance.now();
    this.camera = camera;
    this.world = world;
    this.sphereShape = new CANNON.Sphere(radius);
    this.sphereBody = new CANNON.Body({ mass: 65 });
    this.sphereBody.addShape(this.sphereShape);
    this.sphereBody.position.set(0, 160, 0);
    this.sphereBody.linearDamping = 0.9;
    this.world.addBody(this.sphereBody);
    this.app = app;
    this.ray = new THREE.Raycaster(
      new THREE.Vector3(),
      new THREE.Vector3(0, -1, 0),
      0,
      60
    );

    this.controls = new PointerLockControlsCannon(this.camera, this.sphereBody);

    this.controls.velocityFactor = 0.5;

    instructions.addEventListener("click", () => {
      this.controls.lock();
    });

    this.controls.addEventListener("lock", () => {
      this.controls.enabled = true;
      instructions.style.display = "none";
    });

    this.controls.addEventListener("unlock", () => {
      this.controls.enabled = false;
      instructions.style.display = null;
    });
  }

  setPosition(x, y, z) {
    this.sphereBody.position.set(x, y, z);
  }

  getMesh() {
    return this.controls.getObject();
  }

  update() {
    const time = performance.now() / 1000;
    const dt = time - this.lastCallTime;
    this.lastCallTime = time;

    if (this.controls.enabled) {
      this.world.step(1 / 60, dt);

      this.ray.ray.origin.copy(this.controls.getObject().position);
      this.ray.ray.origin.y -= 10;
      this.ray.ray.direction = this.camera.getWorldDirection(
        new THREE.Vector3()
      );

      this.ray.setFromCamera(new THREE.Vector2(0, 0), this.camera);
      const intersects = this.ray.intersectObject(this.app.getScene(), true);

      if (intersects.length == 0) {
        itemName.style.display = "none";
      }

      if (intersects.length > 0) {
        let object = intersects[0].object;
        itemName.style.display = "";
        itemName.innerHTML = object.parent.name
          ? object.parent.name
          : object.name;
      }
    }

    this.controls.update(dt);
  }
}

and this is where i upload my hands

gltfLoader.load("../assets/scene.gltf", (arms) => {
  const mixer = new THREE.AnimationMixer(arms.scene);

  arms.animations.forEach((clip) => {
    mixer.clipAction(clip).play();
  });

  arms.update = function () {
    const delta = clock.getDelta();
    mixer.update(delta);

    arms.scene.position.copy(
      player.controls.lockEvent.target.cannonBody.position
    );
    arms.scene.position.y =
      player.controls.lockEvent.target.cannonBody.position.y - 1;

    arms.scene.position.z =
      player.controls.lockEvent.target.cannonBody.position.z - 1;
  };

  arms.getMesh = function () {
    return arms.scene;
  };

  app.add(arms);
});
1 Like
4

i dont get it how am i going to implement it , can you show me an example pls?