Struggling with the camera in three.js?

Question

Struggling with the camera in three.js?

I'm struggling to understand how to utilize the three.js camera effectively.

https://i.sstatic.net/7sYb8.png

My goal is to have a small map where players can spawn at the corners, depicted as cubes labeled 1, 2, 3, and 4 on the sketch provided.

My aim is for the camera to initially be positioned behind the players, represented by the "eye" icon in my sketch, pointing towards cube 1 with an orange line indicating the line of sight. I've also illustrated where I want the camera to be if I were the fourth player.

However, during testing, I encountered unexpected behavior. Currently, this is what I am attempting:

camera.position.set(player.position.x, player.position.y + 2, player.position.z + 3);
camera.lookAt(player.position);

The player variable refers to a THREE.Mesh object. While the camera positioning works correctly when the player spawns in positions 1 or 3, it behaves incorrectly in position 2. When I try to rotate around the player using the mouse, the camera rotates as if it's spinning on the Y-axis and obscures my view of the cube. Initially, I believed that utilizing the lookAt() method on the player would align the camera properly, but evidently, I was mistaken.

Could someone clarify why this isn't functioning as expected?

javascript camera three.js

Answer 1

Answer №1

It's a bit challenging to provide specific guidance without reviewing your code, but I've created a sample that aligns with your description. This example utilizes the lookAt function on an object containing x, y, and z coordinates...

http://jsfiddle.net/vn4t6o6u/1/

var camera, scene, renderer, geometry, material, mesh;

init();
animate();

function init() {

    scene = new THREE.Scene();

    camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 1, 10000);

    // Positioning the camera along the x-axis

    scene.add(camera);
    camera.position.set(-6, -6, 30);
    camera.up = new THREE.Vector3(0, 0, 1);
    camera.lookAt({x: 0, y: 0, z: 0});
    
    setTimeout(function(){
        camera.position.set(14, -6, 30);
        camera.lookAt({x: 8, y: 0, z: 0});  
    }, 1000)
    
    setTimeout(function(){
        camera.position.set(-6, 14, 30);
        camera.lookAt({x: 0, y: 8, z: 0});  
    }, 2000)
    
    setTimeout(function(){
        camera.position.set(14, 14, 30);
        camera.lookAt({x: 8, y: 8, z: 0});  
    }, 3000)

    geometry1 = new THREE.CubeGeometry(2, 2, 2);
    geometry2 = new THREE.CubeGeometry(2, 2, 2);
    geometry3 = new THREE.CubeGeometry(2, 2, 2);
    geometry4 = new THREE.CubeGeometry(2, 2, 2);

    material1 = new THREE.MeshLambertMaterial({color: 0xff0000});
    material2 = new THREE.MeshLambertMaterial({color: 0x00ff00});
    material3 = new THREE.MeshLambertMaterial({color: 0x0000ff});
    material4 = new THREE.MeshLambertMaterial({color: 0x00ffff});

    mesh1 = new THREE.Mesh(geometry1, material1);
    mesh2 = new THREE.Mesh(geometry2, material2);    
    mesh3 = new THREE.Mesh(geometry3, material3);    
    mesh4 = new THREE.Mesh(geometry4, material4);    

    mesh1.position.set(0, 0, 0);
    mesh2.position.set(8, 0, 0);
    mesh3.position.set(0, 8, 0);
    mesh4.position.set(8, 8, 0);

    scene.add(mesh1);
    scene.add(mesh2);
    scene.add(mesh3);
    scene.add(mesh4);

    renderer = new THREE.CanvasRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);

    document.body.appendChild(renderer.domElement);

}

function animate() {
    requestAnimationFrame(animate);
    render();
}

function render() {
    renderer.render(scene, camera);
}

Answer 2

It's a bit challenging to provide specific guidance without reviewing your code, but I've created a sample that aligns with your description. This example utilizes the lookAt function on an object containing x, y, and z coordinates...

http://jsfiddle.net/vn4t6o6u/1/

var camera, scene, renderer, geometry, material, mesh;

init();
animate();

function init() {

    scene = new THREE.Scene();

    camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 1, 10000);

    // Positioning the camera along the x-axis

    scene.add(camera);
    camera.position.set(-6, -6, 30);
    camera.up = new THREE.Vector3(0, 0, 1);
    camera.lookAt({x: 0, y: 0, z: 0});
    
    setTimeout(function(){
        camera.position.set(14, -6, 30);
        camera.lookAt({x: 8, y: 0, z: 0});  
    }, 1000)
    
    setTimeout(function(){
        camera.position.set(-6, 14, 30);
        camera.lookAt({x: 0, y: 8, z: 0});  
    }, 2000)
    
    setTimeout(function(){
        camera.position.set(14, 14, 30);
        camera.lookAt({x: 8, y: 8, z: 0});  
    }, 3000)

    geometry1 = new THREE.CubeGeometry(2, 2, 2);
    geometry2 = new THREE.CubeGeometry(2, 2, 2);
    geometry3 = new THREE.CubeGeometry(2, 2, 2);
    geometry4 = new THREE.CubeGeometry(2, 2, 2);

    material1 = new THREE.MeshLambertMaterial({color: 0xff0000});
    material2 = new THREE.MeshLambertMaterial({color: 0x00ff00});
    material3 = new THREE.MeshLambertMaterial({color: 0x0000ff});
    material4 = new THREE.MeshLambertMaterial({color: 0x00ffff});

    mesh1 = new THREE.Mesh(geometry1, material1);
    mesh2 = new THREE.Mesh(geometry2, material2);    
    mesh3 = new THREE.Mesh(geometry3, material3);    
    mesh4 = new THREE.Mesh(geometry4, material4);    

    mesh1.position.set(0, 0, 0);
    mesh2.position.set(8, 0, 0);
    mesh3.position.set(0, 8, 0);
    mesh4.position.set(8, 8, 0);

    scene.add(mesh1);
    scene.add(mesh2);
    scene.add(mesh3);
    scene.add(mesh4);

    renderer = new THREE.CanvasRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);

    document.body.appendChild(renderer.domElement);

}

function animate() {
    requestAnimationFrame(animate);
    render();
}

function render() {
    renderer.render(scene, camera);
}

Struggling with the camera in three.js?

Answer №1

Similar questions

What is the best way to call a JavaScript function with multiple arguments from a Silverlight project?

Transmit information via AJAX using the React Flux design pattern

Convert data in JavaScript and send it as a string in PHP

Manipulating content for insertion using jQuery's .html() method

Using Array.Map() to retrieve the child array within a React component

What are the best methods for adjusting the size of a game's

"Deactivate the escaping feature in PHP when using heredoc syntax

Webdriverio: exploring the window object

maintaining a specific variable within React

A React child error has occurred in Next.js due to invalid objects being used

Generating fresh line with knockout effect

Is there a way to completely define CSS animation using only JavaScript?

What is the reason behind taps in TypeScript only registering the first tap event?

Automatically divide the interface into essential components and additional features

Enhancing the efficiency of a TypeScript-written file content parsing class

The web page's content remains hidden until it is scrolled into view, despite the fact that the page has finished loading

js TouchEvent: When performing a pinch gesture with two fingers and lifting one of them up, how can you determine which finger was lifted?

Is it possible to use async/await with the React setState method?

Navigating using Backbone Marionette URL to Server Endpoint

Tips for maintaining consistency between server-side Java and client-side JS DTO properties