时间戳

首页 > 解决方案 > OrbitControls 改变相机位置

javascript - OrbitControls 改变相机位置

问题描述

我正在用 THREE.js 和 Blender 做一个学术项目。在我main.js的代码中，我有创建场景、创建渲染器、相机、轨道控制等的代码......问题是，每次我加载网页时，相机都在看某个位置camera.lookAt(0,0,90)，但每次我尝试移动物体，相机看向另一个位置。

这是一个代表我的问题的动画 gif 这是一个代表我的问题的动画 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();

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

标签： javascriptthree.js

解决方案

该lookAt()方法可能很挑剔。首先，最好为它提供一个矢量对象，在本例中为Vector3(). 就您的相机似乎翻转方向的问题而言，可能是您的相机的方向和 OrbitControls 在 which way is up方面存在问题，尽管情况并非如此。我也不清楚你为什么要让相机在0, 0, 90物体本身位于时查看位置0, 0, 0？

然而，就我个人而言，我会使用targetOrbitControls 作为选项提供的属性。controlos.target = new THREE.Vector3(0, 0, 0);应该做的事情。

推荐阅读