8. 建模软件与threejs坐标系xyz对应
# 建模软件与threejs坐标xyz对应问题
三维建模软件导出gltf模型时候,有一点要注意下,不同建模软件和threejs的坐标系,xyz轴对应关系问题,下面以Blender为例展示。
threejs中坐标系y轴默认向上,Blender建模软件中坐标系默认z轴朝上
# Blender导出配置
Blender导出gltf时候,一般软件默认勾选y向上,这样的话,Blender中模型沿着z平移,相当于threejs沿着y向上平移,也就是都是朝上。
或者我换个说法,勾选y向上时候,Blender模型向上平移,threejs同样向上平移,保证视觉上一致
# 模型平移导出测试
Blender长方体模型从坐标原点向上平移100(沿着z),导出gltf时候,勾选y向上,使用上节课gltf加载代码测试,threejs加载模型也是向上平移100(沿着y)。
# 导出gltf测试:Blender x轴平移
Blender导出gltf模型,勾选y向上情况下,threejs和Blender的x轴是对应的。
# 勾选y向上:轴对应关系
Blender | Three.js |
---|---|
x | x |
z | y |
-y | z |
首先x和x对应,勾选y向上,z和y对应,这时候你调整下Blender右上角坐标轴,z朝上情况下,让x轴朝向右侧,threejs,同时调整threejs场景,y向上,x朝向右侧,你观察下,同样方位情况下,Blender的-y对应threejs的+z。
# 导出gltf测试:Blender y轴平移
Blender沿着y平移模型-100,然后导出,threejs中加载查看,模型沿着z平移100,如果这时候z朝上,x朝右,Blender和threejs中模型都是朝向屏幕外移动。