THREE.JS自定义中心旋转轴

three.js中自带围绕X,Y,Z轴旋转的api，但要想实现任一方向的中心旋转功能尚未找到简单易懂的资料以供参考。

起初想到的是能否借助四元数来实现？但是四元数还是不太友好，不太容易理解。在吃饭反途中灵光一现，之前看到过有网友借助group实现了中心的自定义，是否同样能借助group来实现旋转轴的自定义呢？

想到这里，顿时激动起来。跑会机房开始验证。

果然可以实现！

原理很简单，借助已有的api即可实现。

首先创建模型，并将其加入一个group中

 let cloud= creatPointCloudByGeometry(geom);

 let group=new THREE.Group();group.position.set(0,0,0);group.add(cloud);

通过模型自带的旋转api控制模型围绕自身的哪个轴旋转，即确定相对自身的旋转方向。

cloud.rotation.x += gui.x;
cloud.rotation.y += gui.y;
cloud.rotation.z += gui.z;

通过旋转group实现模型的旋转相对于场景方向的控制

 group.rotation.x=gui.GroupX;group.rotation.y=gui.GroupY;group.rotation.z=gui.GroupZ;

这是我的render函数

function render(){group.rotation.x=gui.GroupX;group.rotation.y=gui.GroupY;group.rotation.z=gui.GroupZ;if(gui.rotation){cloud.rotation.x += gui.x;cloud.rotation.y += gui.y;cloud.rotation.z += gui.z;}renderer.render(scene,camera);requestAnimationFrame(render);}

通过dat.gui实现参数的调节，效果很不错。

总结：本方法借助已有的api实现了对任意轴的中心旋转功能。

思路：

1.通过模型的旋转api确定模型相对自身的旋转方向；

2.通过group的旋转控制模型相对场景的方向

THREE.JS自定义中心旋转轴相关推荐

原生html js css绘制折现图,HTML5教程 Chart.js自定义提示折线图
本篇教程探讨了HTML5教程 Chart.js自定义提示折线图,希望阅读本篇文章以后大家有所收获,帮助大家HTML5+CSS3从入门到精通 . < var randomScalingFactor ...
js自定义函数及参数问题
js自定义函数的过程中,往往我们希望指定一些参数的默认值很容易的会写出如下的js 方法 function test(a,b,c=1,d='id'){ return 1; } 但是定义完之后,浏览器会 ...
html 自定义js,js 自定义事件
js怎么自定义事件,并能让用on事件监听你这个问题全部内容应该是如下吧: 在视频播放的时候,能够用on监听事件的触发,如下: player.on('pause',function(){ consol ...
Ajax异步请求（重渲染DOM元素时，如何自动调用并执行JS自定义函数【含代码】）- 案例篇
文章目录 Ajax异步请求(重渲染DOM元素时,如何自动调用并执行JS自定义函数[含代码])- 案例篇效果截图: 重要代码: 附:全部HTML代码: Ajax异步请求(重渲染DOM元素时,如何自动调 ...
Vue.js自定义指令的用法与实例
市面上大多数关于Vue.js自定义指令的文章都在讲语法,很少讲实际的应用场景和用例,以致于即便明白了怎么写,也不知道怎么用.本文不讲语法,就讲自定义指令的用法. 自定义指令是用来操作DOM的.尽管Vu ...
Vue+bpmn.js自定义流程图之palette（二）
自定义bpmn.js左侧工具栏palette样式一.回顾 1.预览 2.目录结构二.代码 1.paletteProvider.js文件 2.css文件 3.index.js文件三.总结一.回顾 ...
js：Vue.js自定义指令实现scroll下滑滚动翻页
Vue.js自定义指令实现scroll下滑滚动翻页核心代码 import Vue from 'vue'// v-scroll Vue.directive('scroll', {bind(el, bi ...
Bpmn.js自定义文件说明
Bpmn.js自定义文件说明由于工作需要(其实不是很需要),在公司项目的基础上开源了一个基于 bpmn-js + Vue 2.x + ElementUI 的一个流程编辑器 Bpmn Process ...
JS 自定义实现数字滚动处理
一.浏览器端js自定义实现数字滚动使用示例: <!DOCTYPE html> <html lang="en"><head><meta c ...
js自定义随机16进制颜色
js自定义随机16进制颜色 function colorfn() {let str = Math.random().toString().slice(2, 8);if (str.length < ...

THREE.JS自定义中心旋转轴

THREE.JS自定义中心旋转轴相关推荐

最新文章

热门文章