Three.js轨迹球控制无滚动

2024-06-26

有谁知道是否/如何修改轨迹球控件以保持地平线水平,但仍然允许您在物体周围和上方旋转?

通过将 axis.x 和 axis.z 设置为 0,它会停止滚动,但也会停止在对象上旋转的能力。

轨道控制接近我正在寻找的东西,但没有平移的能力。

有什么帮助吗?


自从提出这个问题以来已经有一段时间了,但我遇到了同样的问题,并且在网上没有找到太多讨论,所以我想我应该发布我的解决方案。

如果您必须使用 TrackballControls 并且想要平坦的地平线,则可以通过将以下行添加到“this.rotateCamera”方法的末尾来简单地编辑 TrackballControls.js 库

this.object.up = new THREE.Vector3(0,1,0); 这会将相机向上锁定在 (0,1,0) 方向(即 y 方向)。整个修改后的方法函数将如下所示:

this.rotateCamera = function () {

var angle = Math.acos( _rotateStart.dot( _rotateEnd ) / _rotateStart.length() / _rotateEnd.length() );

if ( angle ) {

    var axis = ( new THREE.Vector3() ).crossVectors( _rotateStart, _rotateEnd ).normalize();
        quaternion = new THREE.Quaternion();

    angle *= _this.rotateSpeed;

    quaternion.setFromAxisAngle( axis, -angle );

    _eye.applyQuaternion( quaternion );
    _this.object.up.applyQuaternion( quaternion );

    _rotateEnd.applyQuaternion( quaternion );

    if ( _this.staticMoving ) {

        _rotateStart.copy( _rotateEnd );

    } else {

        quaternion.setFromAxisAngle( axis, angle * ( _this.dynamicDampingFactor - 1.0 ) );
        _rotateStart.applyQuaternion( quaternion );

    }

}

// Lock the camera up direction
this.object.up = new THREE.Vector3(0,1,0);

};
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Three.js轨迹球控制无滚动 的相关文章

  • 解决 Three.js / webGL 中的 gl_PointSize 限制

    我正在使用 Three js 创建交互式数据可视化 此可视化涉及渲染 68000 个节点 其中每个不同的节点具有不同的大小和颜色 最初我尝试通过渲染网格来实现此目的 但事实证明这非常昂贵 我当前的尝试是使用 Three js 粒子系统 每个
  • 在 Webpack 中使用 Three.js 以便我可以使用 OrbitControls 的正确方法是什么?

    在我的 webpack 配置中 resolve alias three path resolve node modules three build three js OrbitControls path resolve node modul
  • 在 Three.js 中从 Web Worker 加载纹理

    当将大纹理图像应用到网格上一段明显的时间时 Three js 会锁定浏览器的主线程 让我们考虑以下示例 var texLoader new THREE TextureLoader texLoader load someLargeTextur
  • 无面点云 (PLY) 文件的 Web 查看器

    我在尝试Three Js https github com mrdoob three js 用于通过网络查看 PLY 文件 使用这个例子 http threejs org examples webgl loader ply html作为参考
  • 使用文件 API 将资源加载到 Three.js 中

    我想创建导入 3D 模型以在浏览器中查看的功能 方法是使用File API http www html5rocks com en tutorials file dndfiles Three js 加载器在我托管的文件上运行良好 我的理解是加
  • ThreeJS 中阴影的奇怪行为

    所以我有一个 ThreeJS 场景 并且添加了一些球体 多材质 我还添加了定向光 this light new THREE DirectionalLight 0xFFFFFF 1 this light position set 2 10 2
  • 如何在 Three.js 中进入全屏?

    我已经尝试了数十种不同的方法几个小时 但没有一个有效 如下所示 document body addEventListener keydown function THREEx FullScreen request false 如何让Three
  • 从matrix4()获取翻译

    对于大多数 Three js 开发人员来说 这可能看起来像是一个虚拟问题 但是如何从转换矩阵中提取翻译呢 实际上 我手动提取它指向 矩阵数组位置 12 13 14 提前致谢 如果要从矩阵中提取平移分量 请使用以下模式 var vec new
  • Tween JS 基础知识之三个 JS 立方体

    我是 Tween JS 的新手 尝试使用 Tween 制作一个向右移动的简单动画 下面是我在 init 函数中的代码 我使用的是三个 JS var geometry new THREE CylinderGeometry 200 200 20
  • 使用 Three.js 遮挡现实世界的对象

    我在实验性增强现实网络浏览器中使用 Three js 该浏览器称为 Argon 本质上 Argon 使用高通的 Vuforia AR SDK 来跟踪手机摄像头中的图像和物体 Argon 将跟踪信息发送到 Javascript 中 在 Jav
  • 使用 Three.js 中的设备方向控件进行对象旋转

    我正在迈出使用 JavaScript 进行编码并使用 Three js 的第一步 我正在尝试 Threejs org 的这个例子 http trijs org examples misc controls deviceorientation
  • Morph 目标为 Three.js

    我正在尝试开始使用变形目标和 Three js 然而 关于这个主题的文档似乎并不多 当我查看源代码时 morphTargetInfluences 似乎是有魔力 这是如何运作的 我该如何使用这个 值为1就是全力吗 如何区分同一模型上的不同变形
  • React-Three-Fiber:JSON 中位置 3 出现意外标记 c 错误

    我正在尝试使用 React Three Fiber 加载 glb 文件 但出现以下错误 Error Unexpected token c in JSON at position 3 我不确定我做错了什么 看来此问题最常见的解决方案是将 gl
  • 三种js更新纹理生成Canvas的最佳性能方式

    I have THREE Points with THREE PointsMaterial As a map我使用生成的动态cavas image 我需要重新渲染canvas在每一帧上 我的部分代码 function makeEnemyBa
  • Three.js WebGL 从着色器绘制圆形自定义填充和边框颜色

    我将 Three js 与 WebGLRenderer 一起使用 我试图找出或查看如何使用 CircleGeometry 绘制圆圈的示例 并能够从顶点或片段着色器控制其填充和边框颜色 如果不使用图像作为纹理 这是否可能 抱歉 如果这真的很简
  • 三个 JS Orbitcontrols 设置目标而不用 LookAt

    我正在尝试制作一个用于构建模型的 3D 查看器 我们已加载模型并尝试与模型进行某种交互 因此 我们使用 OrbiControls 来旋转 平移和缩放模型 我们希望在查看器中具有这样的行为 当用户单击并拖动 从而旋转 时 旋转中心位于用户单击
  • ThreeJS无法加载Json文件

    首先 我已经读过这个问题 https stackoverflow com questions 17201888 three js exporter export object not working with jsonloader r58没
  • 了解截断二十面体的几何形状,以进行渲染

    我正在尝试使用可点击区域来渲染像上面这样的截断二十面体Three js http stemkoski github io Three js js Three js 我找到了正二十面体的代码 var t 1 Math sqrt 5 2 var
  • 只有geometry.elementsNeedUpdate 会导致内存分配 - 为什么?

    如果我有一个简单的动画功能 function animate geometry elementsNeedUpdate true allocates memory without geometry faces 0 color requestA
  • 三 JS 网格在模型的另一侧可见

    所以我使用在 Blender 中为 ThreeJS 制作的自定义模型 我将其导出为 obj 文件 并使用 Three js 转换实用程序创建 json 文件 我将其设置为旋转 当它旋转时 您可以看到模型的另一侧 这是我用来加载它的代码 lo

随机推荐

  • 如何制作可扩展的文本框?

    我想制作一本以给定宽度 高度开始的教科书 然后 如果用户输入的内容超过给定的空间量 文本框就会向下扩展 我该怎么做呢 我使用 CSS 吗 当用户超过允许的行数时 基本文本框仅显示滚动条 如何使文本框将行数再扩展 5 行
  • 如何将 JSON 对象解析为 TypeScript 对象

    我目前正在尝试将收到的 JSON 对象转换为具有相同属性的 TypeScript 类 但无法使其工作 我究竟做错了什么 员工阶层 export class Employee firstname string lastname string
  • 在 JavaScript 中按名字(按字母顺序)对数组进行排序[重复]

    这个问题在这里已经有答案了 我有一个数组 请参阅下面的数组中的一个对象 我需要使用 JavaScript 按名字排序 我该怎么做 var user bio null email email protected cdn cgi l email
  • 服务器上的 Nano 忽略某些语法着色

    我在用着nano通过 ssh 在服务器上 在该系统上 nano默认情况下没有启用语法颜色 所以我复制了这些纳米语法 http code google com p nanosyntax files 对于替代方案 另请参阅 CraigBarne
  • 在多个 EC2 实例上运行的相同 Kinesis Consumer

    我有多个 EC2 实例为同一个微服务运行 其中有一个 Kinesis 使用者正在运行 使用 KCL 我的问题是 当 Kinesis Stream 获取新事件时 由于所有消费者都在轮询 同一事件是否会被所有实例的消费者消费 KCL 的设计使得
  • 如何让 Numpy 将每一行/张量视为一个值

    许多功能 例如in1d https docs scipy org doc numpy 1 13 0 reference generated numpy in1d html and setdiff1d https docs scipy org
  • 以编程方式设置 Jetty GzipHandler

    我在玩码头GzipHandler它的工作方式似乎相当奇怪 它只压缩已经压缩的文件 我的整个设置是 GzipHandler gzipHandler new GzipHandler gzipHandler setHandler myHandle
  • Git 和外部备份。子目录是空的,我宁愿它不是空的。

    我想使用 Git 创建外部备份系统 这部分是受到答案的启发在外部磁盘上备份整个 git 存储库的最佳方法是什么 https stackoverflow com a 4372855 2533127 其中建议如下 您还可以通过启动一个新的存储库
  • locationManager:didRangeBeacons 方法未检测到 BLE 设备

    我正在使用 Nordic BLE nRF8001 开发套件来测试 CoreBluetooth 使用 CBCentralManager 的方法 例如 didDiscoverPeripheral didConnectPeripheral 等 我
  • 如何在 Linux 上正确地将网络接口置于混杂模式

    那么如何正确地做到这一点呢 我知道如何通过创建套接字 然后使用 ioctl 设置 IFF PROMISC 标志来做到这一点 如 如何在C中检查网络设备状态 https stackoverflow com questions 3055622
  • 转置矩阵存储在一维数组中,无需使用额外的内存[重复]

    这个问题在这里已经有答案了 可能的重复 矩阵的就地转置 https stackoverflow com questions 9227747 in place transposition of a matrix 最近参加了技术笔试 通过以下问
  • 在 React Native 中实现警报的最佳方法?

    我需要将警报功能添加到我的反应本机应用程序中 您必须手动停止 暂停的闹钟像这些 https www androidauthority com alarm clock apps android 101618 为此 我一直在浏览以了解应该实施哪
  • 将 WinForms ListBox 绑定到对象属性

    我第一次做一些 WinForms 编码 并尝试使用数据绑定 我有一个列表框 我将其绑定到控制器对象中的字符串数组 并且我还想将列表框中的 SelectedItem 绑定到控制器上的另一个字符串属性 以便我可以跟踪它 listBox Data
  • Codemirror光标位置偏移

    我正在使用代码镜像在网页中显示 突出显示和编辑 xml 但我遇到了光标位置偏离插入位置的问题 因此 如果从闪烁光标所在的位置删除字符 则删除之前的字符您期望的那个会被删除 我假设它与我当前页面存在 css 冲突 因为它在我的页面之外运行良好
  • 有没有办法在 Nokogiri css 中转义非字母数字字符?

    我有一个锚标签 file html stuff morestuff CHP 1 SECT 2 1 尝试提取 Nokogiri 中引用的内容 documentFragment at css stuff morestuff CHP 1 SECT
  • Celery未注册任务KeyError

    我通过在终端中执行以下命令来启动工作程序 celery A cel test worker loglevel INFO concurrency 10 n worker1 h 然后我收到一条长循环错误消息 指出 celery 已收到未注册的任
  • 没有绑定 play.db.Database 的实现

    我在使用 hikaricp 时访问数据库时遇到问题 这是我的reference conf play modules enabled play api db DBModule enabled play api db HikariCPModul
  • 将两个工作区文件夹映射到同一工作目录

    我正在将构建系统从 VSS 迁移到 TFS VSS 解决方案的一部分将两个 VSS 项目中的选定文件获取到同一目录中 由于 TFS 强制您在获取之前显式设置工作文件夹 因此我不确定这是否有效 我在单独使用时遇到了问题工作空间彼此的工作目录重
  • 扩展 AppCompatActivity 与扩展 flutterActivity

    为了https flutter dev docs development platform integration platform channels tab android channel java tab step 3 add an a
  • Three.js轨迹球控制无滚动

    有谁知道是否 如何修改轨迹球控件以保持地平线水平 但仍然允许您在物体周围和上方旋转 通过将 axis x 和 axis z 设置为 0 它会停止滚动 但也会停止在对象上旋转的能力 轨道控制接近我正在寻找的东西 但没有平移的能力 有什么帮助吗