Three.js 三维坐标系 AxesHelper - 文章教程

Three.js 三维坐标系 AxesHelper

发布于 2021-08-17 字数 1986 浏览 1282 评论 0

Three.js 提供了一个 AxesHelper 类,可以用来创建一个可视化的三维坐标系,可以用来辅助编写 Three.js 程序。

// 改变AxesHelper构造函数的参数,可以改变三维坐标轴的大小,
// 参数设置坐标轴大小,150,编写程序的时候,可以根据相机参数调整为合适的值,如果太小可以无法显示出来
var axesHelper = new THREE.AxesHelper( 150 );
// 和网格模型Mesh一样,AxesHelper你也可以理解为一个模型对象,需要插入到场景中
scene.add( axesHelper );
// 三维坐标系模型对象axesHelper和普通网格模型对象一样可以通过position属性设置位置
// axesHelper的基类是LineSegments
axesHelper.position.y = -54

三维坐标系对象AxesHelper本质上就是用线模型LineSegments表示的三段直线,可以查看src目录下AxesHelper.js的源码,你可以把AxesHelper类比为网格模型、线模型一样的模型对象来理解。如果你有兴趣,可以自己重新封装一个新的三维坐标系构造函数,比如给坐标轴加上箭头。

XYZ 轴

通过Three.js类AxesHelper创建一个三维坐标系三个坐标轴的颜色分别为红绿蓝(RGB),R、G、B三种颜色坐标轴是分别表示X、Y、Z轴,也就是红色轴是X轴,绿色轴是Y轴,蓝色轴是Z轴,你可以通过设置一个网格模型的.position属性去验证。

AxisHelper

老版本Three.js三维坐标系的类名是AxisHelper,新版本已更改为AxesHelper。如果使用老版本的API,浏览器控制会有警告提示THREE.AxisHelper has been renamed to THREE.AxesHelper.,表达的意思就是THREE.AxisHelper已经被替换为THREE.AxesHelper

其它 helpers 类

除了三维坐标系对象AxesHelper,Three.js还提供了箭头ArrowHelper、网格GridHelper、相机CameraHelper、点光源PointLightHelper等类,通过PointLightHelper可以可视化表示点光源的信息,通过CameraHelper可以可视化表示相机对象的信息,更多helpers类可以查看Three.js官方文档helpers分类。

如果你对这篇文章有疑问,欢迎到本站 社区 发帖提问或使用手Q扫描下方二维码加群参与讨论,获取更多帮助。

扫码加入群聊

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

目前还没有任何评论,快来抢沙发吧!

关于作者

偏爱自由

这个人比较懒,什么都没有填写!

17 文章
2 评论
20790 人气
更多

推荐作者

qq_iQVWB

文章 0 评论 0

gyhjy

文章 0 评论 0

dianjvnan

文章 0 评论 0