Possible Inconsistencies with the LookAt Feature in Three.js

Question

Possible Inconsistencies with the LookAt Feature in Three.js

Attempting to use the lookAt function to make zombies move towards the character has been a challenge. The problem lies in the fact that they are not turning correctly but at odd angles. Here is the code snippet I tried:

var pos = new THREE.Vector3(self.position.x - player.x, self.position.y, self.position.z - player.z) self.lookAt(pos)

I suspect the issue may be related to obtaining the relative position of the player, but I am unsure how to achieve this.

Another attempt was made with the code:

lookAt(Player)

Unfortunately, this approach also failed to produce the desired result: view error screenshot

javascript three.js

Answer 1

Answer №1

If both the zombies and the player are not parented to anything, you can utilize this code:

zombieMesh.lookAt(playerMesh.position);

It's important to note that the lookAt function aligns the positive Z axis of the model towards the target.

'use strict';  // eslint-disable-line

/* global THREE, document, requestAnimationFrame  */

function main() {
  const canvas = document.querySelector('#c');
  const renderer = new THREE.WebGLRenderer({canvas: canvas});

  const fov = 60;
  const aspect = 2;  // the canvas default
  const zNear = 0.1;
  const zFar = 1000;
  const camera = new THREE.PerspectiveCamera(fov, aspect, zNear, zFar);
  camera.position.set(14, 8, 6);
  camera.lookAt(-2, -2, 0);

  const scene = new THREE.Scene();

  {
    const light = new THREE.DirectionalLight(0xffffff, 1);
    light.position.set(0, 20, 0);
    scene.add(light);
  }

  {
    const light = new THREE.DirectionalLight(0xffffff, 1);
    light.position.set(1, 2, 4);
    scene.add(light);
  }

  const groundGeometry = new THREE.PlaneBufferGeometry(50, 50);
  const groundMaterial = new THREE.MeshPhongMaterial({color: 0xCC8866});
  const groundMesh = new THREE.Mesh(groundGeometry, groundMaterial);
  groundMesh.rotation.x = Math.PI * -.5;
  groundMesh.receiveShadow = true;
  scene.add(groundMesh);
  
  const zombieGeo = new THREE.ConeBufferGeometry(1, 1, 6);
  zombieGeo.applyMatrix(new THREE.Matrix4().makeRotationX(Math.PI * 0.5));
  const zombieMat = new THREE.MeshPhongMaterial({color: 'green', flatShading: true});
  const zombieMeshes = [];
  function makeZombie(x, z) {
    const zombieMesh = new THREE.Mesh(zombieGeo, zombieMat);
    scene.add(zombieMesh);
    zombieMesh.position.set(x, 1, z);
    zombieMeshes.push(zombieMesh);
  }
    
  for (let v = -5; v <= 5; v += 5) {
    makeZombie(v, -10);
    makeZombie(v,  10);
    makeZombie(-5, v);
    makeZombie( 5, v);
  }
  
  const playerGeo = new THREE.SphereBufferGeometry(1, 6, 4);
  const playerMat = new THREE.MeshPhongMaterial({color: 'red', flatShading: true});
  const playerMesh = new THREE.Mesh(playerGeo, playerMat);
  scene.add(playerMesh);
    
  function resizeRendererToDisplaySize(renderer) {
    const canvas = renderer.domElement;
    const width = canvas.clientWidth;
    const height = canvas.clientHeight;
    const needResize = canvas.width !== width || canvas.height !== height;
    if (needResize) {
      renderer.setSize(width, height, false);
    }
    return needResize;
  }

  function render(time) {
    time *= 0.001;

    if (resizeRendererToDisplaySize(renderer)) {
      const canvas = renderer.domElement;
      camera.aspect = canvas.clientWidth / canvas.clientHeight;
      camera.updateProjectionMatrix();
    }
    
    playerMesh.position.set(Math.sin(time) * 6, 1, Math.cos(time) * 6);

    for (const zombieMesh of zombieMeshes) {
      zombieMesh.lookAt(playerMesh.position);
    }

    renderer.render(scene, camera);

    requestAnimationFrame(render);
  }

  requestAnimationFrame(render);
}

main();

body { margin: 0; }
canvas { width: 100vw; height: 100vh; display: block; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/99/three.min.js"></script>
<canvas id="c"></canvas>

Answer 2

If both the zombies and the player are not parented to anything, you can utilize this code:

zombieMesh.lookAt(playerMesh.position);

It's important to note that the lookAt function aligns the positive Z axis of the model towards the target.

'use strict';  // eslint-disable-line

/* global THREE, document, requestAnimationFrame  */

function main() {
  const canvas = document.querySelector('#c');
  const renderer = new THREE.WebGLRenderer({canvas: canvas});

  const fov = 60;
  const aspect = 2;  // the canvas default
  const zNear = 0.1;
  const zFar = 1000;
  const camera = new THREE.PerspectiveCamera(fov, aspect, zNear, zFar);
  camera.position.set(14, 8, 6);
  camera.lookAt(-2, -2, 0);

  const scene = new THREE.Scene();

  {
    const light = new THREE.DirectionalLight(0xffffff, 1);
    light.position.set(0, 20, 0);
    scene.add(light);
  }

  {
    const light = new THREE.DirectionalLight(0xffffff, 1);
    light.position.set(1, 2, 4);
    scene.add(light);
  }

  const groundGeometry = new THREE.PlaneBufferGeometry(50, 50);
  const groundMaterial = new THREE.MeshPhongMaterial({color: 0xCC8866});
  const groundMesh = new THREE.Mesh(groundGeometry, groundMaterial);
  groundMesh.rotation.x = Math.PI * -.5;
  groundMesh.receiveShadow = true;
  scene.add(groundMesh);
  
  const zombieGeo = new THREE.ConeBufferGeometry(1, 1, 6);
  zombieGeo.applyMatrix(new THREE.Matrix4().makeRotationX(Math.PI * 0.5));
  const zombieMat = new THREE.MeshPhongMaterial({color: 'green', flatShading: true});
  const zombieMeshes = [];
  function makeZombie(x, z) {
    const zombieMesh = new THREE.Mesh(zombieGeo, zombieMat);
    scene.add(zombieMesh);
    zombieMesh.position.set(x, 1, z);
    zombieMeshes.push(zombieMesh);
  }
    
  for (let v = -5; v <= 5; v += 5) {
    makeZombie(v, -10);
    makeZombie(v,  10);
    makeZombie(-5, v);
    makeZombie( 5, v);
  }
  
  const playerGeo = new THREE.SphereBufferGeometry(1, 6, 4);
  const playerMat = new THREE.MeshPhongMaterial({color: 'red', flatShading: true});
  const playerMesh = new THREE.Mesh(playerGeo, playerMat);
  scene.add(playerMesh);
    
  function resizeRendererToDisplaySize(renderer) {
    const canvas = renderer.domElement;
    const width = canvas.clientWidth;
    const height = canvas.clientHeight;
    const needResize = canvas.width !== width || canvas.height !== height;
    if (needResize) {
      renderer.setSize(width, height, false);
    }
    return needResize;
  }

  function render(time) {
    time *= 0.001;

    if (resizeRendererToDisplaySize(renderer)) {
      const canvas = renderer.domElement;
      camera.aspect = canvas.clientWidth / canvas.clientHeight;
      camera.updateProjectionMatrix();
    }
    
    playerMesh.position.set(Math.sin(time) * 6, 1, Math.cos(time) * 6);

    for (const zombieMesh of zombieMeshes) {
      zombieMesh.lookAt(playerMesh.position);
    }

    renderer.render(scene, camera);

    requestAnimationFrame(render);
  }

  requestAnimationFrame(render);
}

main();

body { margin: 0; }
canvas { width: 100vw; height: 100vh; display: block; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/99/three.min.js"></script>
<canvas id="c"></canvas>

Answer 3

Answer №2

From what I can tell, this game appears to be in first person perspective. To address this, there's a clever workaround that you might find useful...

function UpdateZombieDirection(o){
    console.log("The camera has been repositioned");
    zombie.lookAt(camera.position);
    console.log("The zombie has now been oriented towards you");
}

controls.addEventListener('change', UpdateZombieDirection);

Essentially, due to the fact that you're always seeing things through the camera, the zombies can easily follow your line of sight. This function alters the zombie's position based on the camera's movement, with the event listener keeping track of any changes.

Although there's no specific code provided, ensure that your lookAt commands are properly linked to the object. I've experienced issues with that in the past...

Answer 4

From what I can tell, this game appears to be in first person perspective. To address this, there's a clever workaround that you might find useful...

function UpdateZombieDirection(o){
    console.log("The camera has been repositioned");
    zombie.lookAt(camera.position);
    console.log("The zombie has now been oriented towards you");
}

controls.addEventListener('change', UpdateZombieDirection);

Essentially, due to the fact that you're always seeing things through the camera, the zombies can easily follow your line of sight. This function alters the zombie's position based on the camera's movement, with the event listener keeping track of any changes.

Although there's no specific code provided, ensure that your lookAt commands are properly linked to the object. I've experienced issues with that in the past...

Answer 5

Answer №3

If you utilize the lookAt function in ThreeJS, it handles the calculations automatically based on the objects' positions. However, your current code is not working because you are attempting to calculate the direction around the object instead of where it should be looking.

To simplify your code, just use:

self.lookAt(player);

Answer 6

If you utilize the lookAt function in ThreeJS, it handles the calculations automatically based on the objects' positions. However, your current code is not working because you are attempting to calculate the direction around the object instead of where it should be looking.

To simplify your code, just use:

self.lookAt(player);

Possible Inconsistencies with the LookAt Feature in Three.js

Answer №1

Answer №2

Answer №3

Similar questions

The Vue/Nuxt application displays content duplication on each page, rendering the content twice without duplicating the components

Tips to center a circular progress bar in Material UI

What is the optimal placement for promises in Angular: Factory or Controller?

Unable to access 'this' within a custom operator in RxJs

Tips for ensuring sequential execution of $.post requests without ajax alternative

Running npm commands from the root directory while the package.json file is located elsewhere

Resize a div within another div using overflow scroll and centering techniques

Tips for defining a function without an arrow as a parameter

Enhancing Kendo Grid with Checkbox Columns

Retrieving data from the database into a DIV using ajax

When I receive a 404 response from the API, I aim to start my observable

Socket IO: Error - The call stack has exceeded the maximum size limit

How can I use ngx-editor to insert an HTML block at the current cursor position by clicking a button?

What is the reason for findUser.username returning as unidentified?

The next-auth/discord callbacks do not make any changes to the data

Executing JavaScript code within an AJAX request

Understanding how to properly handle the data sent by an ajax request in a NodeJS server

Can different versions of Node be used simultaneously for various Node scripts?

Mobile Devices and Local Storage: What You Need to Know for Safe and Efficient Use. Looking for advice from experienced developers

Error: The "toString" property of an undefined variable cannot be read in uploadify