WebGL教程_Three.js教程_郭隆邦技术博客 郭隆邦_技术博客 一对一班

Three.js 三维坐标系 AxesHelper

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分类。

2.Three.js 网格平面

本站版权所有,本站任何内容未经允许不得转载   备案号:豫ICP备16004767号 QQ群:187740169 (WebGL-Three.js教程)   邮箱:guolongbang@163.com