Three.js使用OrbitControls后修改相机旋转方向无效解决办法

 更新时间:2024年01月04日 14:44:20   作者:YanisWu  
three.js是用javascript写的基于webGL的第三方3D库,下面这篇文章主要给大家介绍了关于Three.js使用OrbitControls后修改相机旋转方向无效的解决办法,文中通过代码介绍的非常详细,需要的朋友可以参考下

1.问题复现

在项目中添加了OrbitControls控制器来控制相机的旋转和平移,但是需要修改初始的相机角度,于是我把相机的角度进行修改,如下:

const camera = new THREE.PerspectiveCamera(75, viewport.offsetWidth / viewport.offsetHeight, 0.01, 20);
camera.position.set(0,1,7);
//修改相机初始角度
camera.rotation.set(0,-Math.PI/2,0);
const controls = new OrbitControls(camera, renderer.domElement);
controls.update();

运行项目后发现相机的位置并没有发生变化。原因是相机旋转和移动被OrbitControls控制器托管了。

2.解决方法

方法1.于是我尝试创建一个组,将相机加入组里,通过改变组的旋转角度从而改变相机的初始角度,如下:

	const cameraRigY = new THREE.Group();
	scene.add(cameraRigY);

    const camera = new THREE.PerspectiveCamera(75, viewport.offsetWidth / viewport.offsetHeight, 0.01, 20);
	camera.position.set(0,1,7);
    //相机加入组里
	cameraRigY.add(camera);
	//修改整体相机Y轴旋转
	cameraRigY.rotation.set(0,Math.PI/2,0);

	const controls = new OrbitControls(camera, renderer.domElement);
	controls.update();

进过测试,相机的初始角度修改成功了。

方法2:也可以设置焦点:OrbitControls控制器上有target用来设置焦点。相机角度和位置要同步修改才行。

	controls.target = new THREE.Vector3(0, 0, 0);//控制焦点

3.重置相机

在相机旋转操作了之后,想重置到原来的状态,发现上诉方法也无效了。而OrbitControls控制器提供了两个方法来实现:

     /**
     * Save the current state of the controls. This can later be
     * recovered with .reset.
     */
    saveState(): void;

    /**
     * Reset the controls to their state from either the last time
     * the .saveState was called, or the initial state.
     */
    reset(): void;

先调用saveState()方法保存当前的相机状态,然后使用reset()方法重置到之前保存的状态即可。

总结

到此这篇关于Three.js使用OrbitControls后修改相机旋转方向无效解决办法的文章就介绍到这了,更多相关Three.js修改相机旋转方向无效内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • 一文学会JavaScript如何手写防抖节流

    一文学会JavaScript如何手写防抖节流

    其实防抖和节流不仅仅在面试中会让大家手写,在实际项目中也可以起到性能优化的作用,所以还是很有必要掌握的。这篇文章就带大家彻底学会JavaScript手写防抖节流,希望对大家有所帮助
    2022-11-11
  • JavaScript实现简单音乐播放器

    JavaScript实现简单音乐播放器

    这篇文章主要为大家详细介绍了JavaScript实现简单音乐播放器,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-11-11
  • JSX在render函数中的应用详解

    JSX在render函数中的应用详解

    这篇文章主要介绍了JSX在render函数中的应用详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-09-09
  • JavaScript实现输入框(密码框)出现提示语

    JavaScript实现输入框(密码框)出现提示语

    有时候我们需要在登陆表单有一些提示语言,比如“请输入用户名”和“请输入密码”等语言,通过本文给大家介绍JavaScript实现输入框(密码框)出现提示语的相关知识,对js实现输入框提示相关知识感兴趣的朋友一起学习吧
    2016-01-01
  • 详解maxlength属性在textarea里奇怪的表现

    详解maxlength属性在textarea里奇怪的表现

    这篇文章主要介绍了maxlength属性在textarea里奇怪的表现的相关资料,需要的朋友可以参考下
    2015-12-12
  • Bootstrap面板(Panels)的简单实现代码

    Bootstrap面板(Panels)的简单实现代码

    这篇文章主要为大家详细介绍了Bootstrap面板(Panels)的简单实现代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-03-03
  • 详解JavaScript发送埋点请求的两种方式

    详解JavaScript发送埋点请求的两种方式

    对于发送埋点请求这种应用场景,我们有两种简单的处理方式:动态创建<script>和<img>两种方式。本文就详细讲讲二种方式的实现,需要的可以参考一下
    2022-06-06
  • JS循环发送请求时控制请求并发数实例

    JS循环发送请求时控制请求并发数实例

    这篇文章主要介绍了JS循环发送请求时控制请求并发数实例,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-12-12
  • JS使用正则表达式验证身份证号码

    JS使用正则表达式验证身份证号码

    这篇文章主要介绍了JS使用正则表达式验证身份证号码的相关资料,需要的朋友可以参考下
    2017-06-06
  • Javascript & DHTML上传文件控件

    Javascript & DHTML上传文件控件

    首先来做一个实例,批量上传的UI控件。以后一般做的示例也是以UI控件为主的。都是封装成Object或者用Function封装成"Class"类。
    2008-07-07

最新评论