Three.js使用OrbitControls(控制器)后修改相机旋转方向无效问题

这篇具有很好参考价值的文章主要介绍了Three.js使用OrbitControls(控制器)后修改相机旋转方向无效问题。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

1、问题

        当我们在项目使用 OrbitControls(控制器)来控制相机进行旋转的时候不可避免就会遇到一个问题,修改相机的 lookAt 和 rotation 无效~

    initCamera = () => {
        /**
   * @param {number} fov 从视图的底部到顶部,以角度表示 默认值是50
   * @param {number} aspect 摄像机视锥体的长宽比
   * @param {number} near 相机近端面。
   * @param {number} far 相机远端面。
   * @param {Vector3} position 相机的起始位置
   * @param {Vector3} lookAt 相机看向某个点 
   */
        this.camera.fov = 60 //
        this.camera.aspect = window.innerWidth / window.innerHeight //
        this.camera.near = 1 //
        this.camera.far = 20000 //
        this.camera.updateProjectionMaÏtrix() //更新相机投影矩阵
        this.camera.rotation.set(-0.156486664,1.53344866,-0.23345885) //修改相机旋转方向
        this.camera.lookAt(0, 150, 350) //旋转对象以面对世界空间中的一个点。
        window.addEventListener('resize', () => {
            this.camera.aspect = window.innerWidth / window.innerHeight
            this.camera.updateProjectionMatrix()
        })
    }

通过 lookAt、和rotation对相机的旋转进行操作后发现相机的位置和角度并没有发生变化,原因是当前相机已经被 OrbitControls 控制器托管了。


2、OrbitControls 介绍

轨道控制允许摄像机围绕一个目标轨道运行

  • 轨道控制器默认指向  THREE.Vector3(0,0,0) ,也就是世界坐标系原点。
  • 通过 OrbotControls 的实例对象来修改控制器的目标方向 controls.target = new THREE.Vector3(0, 350, -1800)
  • 设置控制器的 target 属性,会改变相机的 lookAt 视点,但是修改相机的 lookAt 属性是不会影响控制器的 target 的。

原因是 控制器 的默认目标并不是 相机的聚焦点,查看 OrbotControls 的源码可以得知 控制器的聚焦点是 this.target = new Vector3()

three的orbitcontrols修改重心而不是修改焦点,ThreeJS,react.js


3、解决

如果场景中没有添加 OrbitControls 的话,设置 camera.lookAt 和 camera.rotation.set 是有效果的

        this.camera.rotation.x = -0.3
        this.camera.rotation.y = -0.3
        this.camera.rotation.z = -0.3

three的orbitcontrols修改重心而不是修改焦点,ThreeJS,react.js

当添加了控制器 相机的 lookAtrotation 都会失效(当使用了控制器的时候,一般不会考虑 rotation 的问题),所以想让相机的聚焦点改变的话,就需要改变 OrbitControlstarget 属性文章来源地址https://www.toymoban.com/news/detail-846921.html

this.control.target = new THREE.Vector3(0, 350, -1800)
以上代码会使相机的聚焦上移350,后退1800距离(threejs是右手坐标系)

到了这里,关于Three.js使用OrbitControls(控制器)后修改相机旋转方向无效问题的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Three.js使用OrbitControls后修改相机旋转方向无效

            在项目中添加了OrbitControls控制器来控制相机的旋转和平移,但是需要修改初始的相机角度,于是我把相机的角度进行修改,如下: 运行项目后发现相机的位置并没有发生变化。原因是相机旋转和移动被OrbitControls控制器托管了。         方法1.于是我尝试创建一个组

    2024年02月16日
    浏览(53)
  • three.js OrbitControls.js 修改配置鼠标行为mouse和手势行为touch

    1. 引入three.js和OrbitControls.js 可以看一下OrbitControls.js源码,方便理解:https://threejs.org/examples/jsm/controls/OrbitControls.js 2. 重新配置鼠标和手势

    2024年02月16日
    浏览(48)
  • Git版本控制器使用教程(超详细版)

    目录 一、git安装 二、git 工作原理与常用命令 1.配置用户信息  2.检查用户信息 3.git初始化本地仓库 4. git的各个模块  5. git 工作流程  6.git跟踪文件  7.git修改文件 8.git删除文件 9. git撤销本地文件的修改 10. git 取消暂存 11.git跳过暂存区 12.git版本回退  13.git 撤销提交 14. git 设

    2024年02月16日
    浏览(85)
  • Flutter组件--TabBar使用详情(分段控制器)

      一个显示水平行选项卡的 Widget 。 通常创建为  AppBar  的  AppBar.bottom  部分并与  TabBarView  结合使用 在什么情况下使用TabBar 当你的app内容类别比较多的时候,我们常常会用到 TabBar ,例如网易新闻、京东、B站等,所以TabBar是一个使用非常频繁的组件。 步骤一:创建TabC

    2024年02月02日
    浏览(47)
  • 【云原生】kubernetes控制器deployment的使用

        目录 ​编辑 1 Controller 控制器 1.1 什么是 Controller 1.2 常见的 Controller 控制器 1.3 Controller 如何管理 Pod 2 Deployment 2.1 创建 deployment 2.2 查看 deployment 2.3 扩缩 deployment 2.4 回滚 deployment 2.5 删除 deployment 1 Controller 控制器 官网: 控制器 | Kubernetes 1.1 什么是 Controller Kubernetes 通常不会

    2024年02月13日
    浏览(36)
  • 【Git】版本控制器详解之git的概念和基本使用

    为了能够更⽅便我们管理不同版本的⽂件,便有了 版本控制器 。所谓的版本控制器,就是⼀个可以记录⼯程的每⼀次改动和版本迭代的⼀个管理系统,同时也⽅便多⼈协同作业。 目前最主流的版本控制器就是Git。Git可以控制电脑上所有格式的文件,例如doc、excel、dwg、dgn、

    2024年02月13日
    浏览(38)
  • ESP32控制器使用SX1278 LoRa模块的方法

    LoRa是由Semtech公司引入的一种无线射频技术,旨在用于在不消耗大量功率的情况下将双向信息传输到长距离。如果您不熟悉LoRa,请先查看LoRa模块与Arduino开发板的连接方法。 在本篇文章中,我们将学习如何将LoRa模块SX1278与ESP32结合使用。在这里,我们将使用两个LoRa模块-一个

    2023年04月08日
    浏览(38)
  • VScode 国内下载源 以及 nvm版本控制器下载与使用

    VScode 国内下载源 进入官网 https://code.visualstudio.com/ 点击下载 复制下载链接到新的浏览器标签 将地址中的/stable前的az764295.vo.msecnd.net换成vscode.cdn.azure.cn,再回车就会直接在下载列表啦。 参考大神博客 2.使用nvm 对 node 和npm进行版本控制 安装nvm 下载链接 https://hub.nuaa.cf//coreybu

    2024年02月10日
    浏览(46)
  • JMeter 特殊组件-逻辑控制器与BeanShell PreProcessor 使用示例

      如果您觉得有用的话,记得给 博主点个赞,评论,收藏一键三连啊 ,写作不易啊^ _ ^。   而且听说 点赞的人每天的运气都不会太差 ,实在白嫖的话,那欢迎常来啊!!! 1. 逻辑控制器使用 流程: 1、选择你的HTTP请求; 2、单机右键-选择插入上级 3、选择逻辑控制器 1.1.

    2024年02月12日
    浏览(39)
  • 【GUI】使用PID控制器进行台式过程控制实验,以保持热敏电阻的温度(Matlab代码实现)

    目录 💥1 概述 📚2 运行结果 🎉3 参考文献 🌈4 Matlab代码、操作说明 本实验是温度控制的反馈控制应用。特别是,本实验讲解: 手动和自动控制的区别 生成动态数据的 步进测试 拟合动态数据以构建简单的一阶加死区时间 (FOPDT) 模型 从标准调整规则 获取 PID 控制的 参数

    2024年02月15日
    浏览(50)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包