OrbitControls更改相机位置

时间:2019-12-17 20:53:57

标签: javascript three.js

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

这是代表我的问题的动画gif This is an animated gif that represents my problem

这是我的代码:

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

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

2 个答案:

答案 0 :(得分:1)

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

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

答案 1 :(得分:0)

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

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