Create, Compete & Win at Redbrick Connect 2024! 🎉
SnippetMaking Object Always Face Target

Making an Object Always Face a Specific Target

Making an Object Always Face the Player


This can be easily implemented using the .lookAt() method.

look_at_player
const obj = WORLD.getObject("object");
 
function Update(){
    obj.lookAt(PLAYER.position.x, PLAYER.position.y, PLAYER.position.z);
}

Making an Object Always Face the Player (Rotate Only on Y-axis)


There are two methods.
The first method uses .lookAt() to make the object face the player and then sets the x and z rotation values to 0.
The second method calculates the direction vector and rotates only the Y-axis.

Making an Object Always Face the Camera


This can be easily implemented using the .lookAt() method.

look_at_camera
const obj = WORLD.getObject("object");
const camera = WORLD.getObject("MainCamera");
 
function Update(){
    obj.lookAt(camera.position.x, camera.position.y, camera.position.z);
}

Making an Object Always Face the Camera (Using Sprite)


If the object you want to face the camera is an image, you can use the Sprite provided by Three.js.

look_at_camera
const image = WORLD.getObject("image"); // Get the image object added to the scene
const sprite = new THREE.Sprite(new THREE.SpriteMaterial({map: image.material.map})); // Create a Sprite object with the image
 
sprite.position.set(10, 5, 10); // Set the position of the sprite
sprite.scale.set(5, 3, 1); // Set the scale of the sprite
WORLD.add(sprite); // Add to the world for rendering