OrbitControls更改相机位置

Question

我正在THREE.js和Blender中从事一项学术项目。 在我的main.js中，我具有创建场景，创建渲染器，相机，轨道控件等的代码。 问题是，每次加载网页时，摄像头都在某个位置camera.lookAt(0,0,90)上，但是每次尝试移动对象时，摄像头都在另一个位置上。

这是代表我的问题的动画gif

这是我的代码：

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();

在移动对象时如何保持相同的初始位置？

Answer 1

lookAt()方法可能很挑剔。首先，最好为其提供向量对象，在这种情况下为Vector3()。对于您的相机似乎会翻转方向的问题，可能不是因为您的相机和OrbitControls的方向是up，而是这种情况。我还不清楚当对象本身位于0, 0, 90时为什么要让相机看着0, 0, 0的位置？

不过，个人而言，我会使用OrbitControls附带的target属性。应该像controlos.target = new THREE.Vector3(0, 0, 0);这样。

Answer 2

没关系。我发现将camera.lookAt()代码更改为循环功能是可行的。仍然不是最好的解决方案...

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