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系统课程视频
  • 1.Blender入门基础

    • 1. Blender入门基础
    • 2. Blender下载、安装、中文界面
    • 3. 基本操作:旋转、缩放、平移
    • 4. 编辑、保存网格模型
    • 5. Blender导出gltf(与threejs协作)
    • Blender教程
    • 1.Blender入门基础
    郭隆邦
    2023-11-27
    目录

    5. Blender导出gltf(与threejs协作)

    # Blender导出gltf(美术与程序员协作)

    通过Blender制作好3D模型,一般需要导出模型文件,然后通过代码渲染这个模型。

    # Blender导出不同格式模型文件

    图片有.jpg、.png等各种格式。

    3D模型文件和图片文件一样,也有多种格式,不同格式能包含的模型数据也不完全相同。

    你可以用Blender导出你需要的格式,比如.stl、.fbx、.gltf格式文件

    # Blender导入不同格式模型文件

    实际开发的时候,美术也不一定就使用Blender软件,不同软件之间,就需要共同支持的格式来协作。

    比如用3dmax、c4d导出gltf、fbx等常见格式文件,然后再用blender打开这些文件。

    通过菜单-文件-导入功能,你可以查看blender能打开的模型文件。

    # .gltf格式文件(美术——程序协作)

    Blender能够导出很多种格式,不过除了特殊需求外,大家一般导出gltf格式模型文件即可。对于threejs、cesium、BabylonJS任何一款3D引擎,加载gltf格式模型都是非常方便的。

    你可以把gltf格式模型,当做图片领域的jpg格式,非常常用。

    web3d可视化项目,最常见的方式是Blender导出gltf格式的模型文件

    • 美术:制作3D模型
    • 程序员:渲染外部模型、设置交互

    # gltf二进制格式.glb

    导出gltf格式模型的时候,除了后缀名.gltf,也可以选择导出gltf的二进制格式.glb

    # 【扩展】three.js加载解析gltf模型文件

    你可以尝试用three.js引擎加载上面你导出的gltf格式模型文件。

    具体代码去学习threejs基础课程的讲解6.3. 加载.gltf文件 (opens new window)

    Blender课件中我也放了一个threejs加载gltf的代码,你可以用来测试你导出的gltf模型。

    提醒:不管你是美术还是程序员,以后开发,都可以用这个代码去验证你的gltf模型文件是否正常导出。

    4. 编辑、保存网格模型

    ← 4. 编辑、保存网格模型

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