threejs轨道控制问题



我是threejs的新手,我希望轨道控制在一个点上旋转,而不是围绕一个物体旋转,它在相机位置z设置为0.01的情况下工作,但当我为相机增加高度时,它试图围绕场景旋转,而非居中,下面包括gif,代码:

const init = () => {
scene = new THREE.Scene();
scene.background = new THREE.Color("whiteSmoke");
renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setPixelRatio(window.devicePixelRatio);
renderer.shadowMap.enabled = true;




camera = new THREE.PerspectiveCamera(90, window.innerWidth / window.innerHeight, 0.1, 100);
camera.lookAt(new THREE.Vector3(0, player.height, 0));
// camera.position.y = 2;
camera.position.z = 0.01;
controls = new OrbitControls(camera, renderer.domElement);
controls.enableDamping = true;
controls.enableZoom = false;
controls.rotateSpeed = - 0.30;
controls.enablePan = false;
scene.add(camera);


// axe helper
const axesHelper = new AxesHelper(20);
scene.add(axesHelper);
loadModels(scene)

animate();
};
const animate = () => {
// this loops to create frames
requestAnimationFrame(animate);
// update controls every frame  for first person
// controls.update(0.3)
renderer.render(scene, camera);
};
const onWindowResize = () => {
// for first person controls handle window resize
controls.handleResize();
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
}
init();

当没有设置相机高度时我所拥有的=>gif此处

vs当我添加camera.postion.y=2=>另一张gif在这里

我找到了一个解决方案,但并不是我想要的。尽管如此,它仍然有效。在blender中,我向下移动了模型/场景的垂直对齐,用于绕其自身旋转而不是绕对象旋转的轨道控制仅在相机或控件静止时有效,并且其z位置设置为0.01!

最新更新