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-08
    目录

    1. 3D建模软件搭建3D场景

    # 3D建模软件搭建3D场景

    转行web3d可视化的同学,除了小部分了解3d建模,大部分都不了解,所以有必要,给大家科普下3D建模。

    下面还会给大家介绍一款3D软件Blender。

    # 常见疑问:三维场景搭建

    以前经常有学生提问,三维场景里面模型是threejs代码写的,还是建模软件绘制的。

    前面课程,给大家演示过,threejs代码创建一个长方体网格模型Mesh。

    // 长方体网格模型
    const geometry = new THREE.BoxGeometry(100, 100, 100); 
    const material = new THREE.MeshBasicMaterial({
        color: 0x0000ff,
    }); 
    const mesh = new THREE.Mesh(geometry, material);
    scene.add(mesh);
    

    对于长方体、球体这种简单模型,你可以用threejs提供API可以直接创建。

    对于一些Web3D可视化项目 (opens new window)中物体,比如一座桥、一栋房子、一辆车,这种不规则形状,一般需要通过3D建模软件来实现,或者其它逆向建模工具。

    在线查看一些项目3D场景 (opens new window)

    # 常用三维建模软件

    3D美术常用的三维建模软件,比如Blender、3dmax、C4D、maya等等

    • 3dmax
    • C4D
    • Blender(轻量开源)

    各种工程领域常用3D建模软件,一般平时不常用,只是有些项目,甲方可能会提供这类软件的素材。

    • 机械相关:SW、UG等
    • 建筑相关:草图大师、revit

    # 分工合作问题

    一般3D建模通常是美术(3D建模师)来做,然后把做好的模型交给程序员,程序员负责用threejs渲染,添加交互代码。

    就是普通web网页,UI设计师,提供一个设计稿,然后前端写代码,3D相似。美术提供3d模型,程序员处理模型,用代码渲染。

    # 程序员学习建模问题

    虽然程序员并不负责专业建模工作,不过也需要稍微了解一点建模常识,这样有助于和美术协调工作。

    # 建模软件选择

    对于美术而言,一般根据自己专业习惯,随便选择都行。

    程序员的话,建议选择Blender,本课程后面紧跟着几节Blender讲解,不熟悉建模的话,可以跟着视频提示安装、并操作体验下Blender。

    如果以后时间充足的话,可以稍微学学Blender基础建模,是否精通倒是无所谓,主要是了解Blender能做什么。

    我邀请一位美术录制的:Blender课程链接推荐链接 (opens new window)

    10. Canvas插入vue3组件(ref方式)【选修】
    2. Blender下载、安装、中文界面

    ← 10. Canvas插入vue3组件(ref方式)【选修】 2. Blender下载、安装、中文界面→

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