OrbitControls changing camera position

Question

I'm working on an academic project in THREE.js and Blender. In my main.js I have the code to create a scene, create a renderer, a camera, orbit controls, etc... The problem is, everytime I load the webpage, the camera is looking at a certain position camera.lookAt(0,0,90) but everytime I try to move the object, the camera looks at another position.

This is an animated gif that represents my problem

And this is the code I have:

var cena =  new THREE.Scene();
cena.background = new THREE.Color( 0xFFFFFF );
// Criar uma camara
var camara =  new THREE.PerspectiveCamera(70, 600/530, 0.1, 500);


var canvas = document.getElementById('myCanvas');
// preparar um renderer WebGL com um viewport 800x600 a adicioná-lo à pagina
var renderer = new THREE.WebGLRenderer({ canvas: canvas, antialias: true });

renderer.setSize(600, 530); // tamanho do canvas (da área preta)
renderer.shadowMap.enabled = true
renderer.gammaOutput= true
renderer.setPixelRatio(window.devicePixelRatio)


camara.position.x = 0;
camara.position.y = -5;
camara.position.z = -15;



// OrbitControls.js
var controlos = new THREE.OrbitControls(camara, renderer.domElement);

camara.lookAt(0, 0, 90)


// GLTFLoader (BLENDER PARA THREE.JS)
var carregador = new THREE.GLTFLoader();
carregador.load(
    'blender/mochila.glb', // Nome do ficheiro .gltf
    function(gltf){     // Adicionar o ficheiro à cena a ser renderizada
        cena.add(gltf.scene);
    }
);


// Adicionar pontos de luz
var luzPonto1 = new THREE.PointLight("white");
luzPonto1.position.set(5, -5, -5);
cena.add(luzPonto1);


// Adicionar pontos de luz
var luzPonto1 = new THREE.PointLight("white");
luzPonto1.position.set(-5, -5, 5);
cena.add(luzPonto1);

// Adicionar pontos de luz
var luzPonto1 = new THREE.PointLight("white");
luzPonto1.position.set(1, 1, 1);
cena.add(luzPonto1);

// Adicionar pontos de luz
var luzPonto1 = new THREE.PointLight("white");
luzPonto1.position.set(5, 5, 5);
cena.add(luzPonto1);

// Adicionar pontos de luz
var luzPonto1 = new THREE.PointLight("white");
luzPonto1.position.set(-5, -5, -5);
cena.add(luzPonto1);


function animar(){ 
    requestAnimationFrame(animar);
    renderer.render(cena, camara);
} 
animar();

How can I keep the same initial position when I'm moving the object?

Answer 1

The lookAt() method can be finicky. First off, it's best to supply it with a vector object, in this case a Vector3() . In terms of your problem where the camera seems to flip orientation, it may be that the orientation of your camera and the OrbitControls are having issues with which way is up , although that shouldn't be the case. I'm also unclear on why you want the camera to look at the position 0, 0, 90 , when the object itself is at 0, 0, 0 ?

Personally, however, I would use the target property that comes as an option with OrbitControls. Something like controlos.target = new THREE.Vector3(0, 0, 0); should do.

Answer 2

Nevermind. I figured out that changing the camera.lookAt() code to the loop function works. Not the best solution still...

function animar(){ 
    camara.lookAt(0, -4, 1)
    requestAnimationFrame(animar);
    renderer.render(cena, camara);
} 
animar();