首页 文章

Three.js和OrbitControls.js - 平行于地平面的平移相机（如谷歌地球）

提问于
浏览 次
6

我正在研究一个使用OrbitControls.js的简单Three.js演示 .

我想改变OrbitControls中的平移行为 . 目前，当您平移相机时，它会将相机移动到垂直于查看方向的平面中 . 我想改变它，使相机与地平面保持恒定距离并平行移动 . Google地球使用类似的控件设置 .

编辑：我应该首先提到这个细节，但是我也想要点击并开始拖动以在整个拖动过程中直接保持在光标下方 . 鼠标移动与用户期望在屏幕上发生的事情之间需要牢固的连接 . 否则，当我试图在场景中移动时，感觉好像我正在“滑倒” .

有人可以给我一个关于如何做到这一点的高级解释（有没有OrbitControls.js）？

three.js

4 回答

  • 4

    前段时间我正在研究这个问题，即将OrbitControls.js改编为 Map 导航 .

    回复于
  • 4

    编辑： OrbitControls 现在支持与"ground plane"并行的平移，它是默认值 .

    要平行屏幕空间（传统行为），请设置：

    controls.screenSpacePanning = true;

    也可以使用 MapControls ，其API类似于Google Earth .

    three.js r.94

    回复于
  • 0

    我想到了 . 这是概述：

    • 将mousedown事件存储在某个地方 .

    • 当鼠标移动时，获取新的mousedown事件 .

    • 对于每个点，找到这些点击所在平面上的点（您需要将点放入相机空间，将它们转换为世界空间，然后从相机通过每个点发射光线以找到它们与飞机交叉 . This page解释了射线平面相交测试） .

    • 从世界空间末端交叉点减去世界空间起点交叉点以获得偏移量 .

    • 减去相机的偏移's target point and you'完成！

    在OrbitControl.js的情况下，摄像机始终查看目标点，其位置相对于该点 . 因此，当您更改目标时，相机会随之移动 . 由于目标始终位于平面上，因此摄像机平行于该平面移动（只要您正在平移） .

    回复于
  • 3

    你应该把你的相机'向上'设置为z ax：

    camera.up.set(0,0,1)

    然后，OrbitControl的主要问题是它的panUp（）函数 . 它应该是固定的 .

    我的拉动请求：https://github.com/mrdoob/three.js/pull/12727

    y ax相对于摄像机轴，应该相对于世界上的固定计划 . 为了定义预期的y轴，基于世界z ax对相机x ax进行90°旋转 .

    v.setFromMatrixColumn( objectMatrix, 0 ); // get X column of objectMatrix
v.applyAxisAngle( new THREE.Vector3( 0, 0, 1 ), Math.PI / 2 );
v.multiplyScalar( distance );
panOffset.add( v )

    请享用！

    回复于

相关问题