Three.js中文网 Three.js中文网
首页
免费视频
系统课 (opens new window)
  • Three.js基础课程
  • Vue3+Threejs 3D可视化
  • Threejs进阶课程
  • 展厅3D预览漫游
  • Threejs Shader
  • Blender建模基础
  • Three.js基础课程(旧版本) (opens new window)
  • 文章
WebGPU教程
  • WebGL教程
  • WebGL教程(旧版本) (opens new window)
3D案例
  • 本站部署(打开快) (opens new window)
  • 原英文官网文档 (opens new window)
首页
免费视频
系统课 (opens new window)
  • Three.js基础课程
  • Vue3+Threejs 3D可视化
  • Threejs进阶课程
  • 展厅3D预览漫游
  • Threejs Shader
  • Blender建模基础
  • Three.js基础课程(旧版本) (opens new window)
  • 文章
WebGPU教程
  • WebGL教程
  • WebGL教程(旧版本) (opens new window)
3D案例
  • 本站部署(打开快) (opens new window)
  • 原英文官网文档 (opens new window)
Web3D系统课程视频
  • 0.学前说明

  • 1.Vue+Three.js基础

  • 2.场景搭建Three+Blender

    • 1. 3D建模软件搭建3D场景
    • 2. Blender下载、安装、中文界面
    • 3. Blender基本操作:旋转缩放平移
    • 4. Blender编辑、保存网格模型
    • 5. GLTF格式简介(Web3D领域JPG)
    • 6. Blender生成gltf,threejs加载
    • 7. Blender导出gltf设置半透明材质
    • 8. 建模软件与threejs坐标系xyz对应
      • 9. 层级模型、获取模型节点
      • 10. 模型材质共享问题
      • 11. 加载gltf,相机设置(收费站)
      • 12. 练习题-相机参数设置(园区)
      • 13. 加载gltf模型相机.lookAt()设置
    • 3.渲染效果提升(材质光照)

    • 4.渲染性能、模型压缩

    • 5.封装、进度条、切视角

    • js 3D可视化
    • 2.场景搭建Three+Blender
    郭隆邦
    2024-03-09
    目录

    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中模型都是朝向屏幕外移动。

    7. Blender导出gltf设置半透明材质
    9. 层级模型、获取模型节点

    ← 7. Blender导出gltf设置半透明材质 9. 层级模型、获取模型节点→

    Theme by Vdoing | Copyright © 2016-2025 豫ICP备16004767号-2
    • 跟随系统
    • 浅色模式
    • 深色模式
    • 阅读模式