javascript - 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 时？

但是，就我个人而言，我会使用 target 属性作为 OrbitControls 的一个选项提供。类似 controlos.target = new THREE.Vector3(0, 0, 0);应该做。