THREEJS实战6_加载fbx模型

简介: THREEJS实战6_加载fbx模型
加载fbx模型原理

3D模型

模型由面构成,面包括三角形、四边形与多边形,轻量级的优秀模型面数一般都是三角形,面又由多条边构成,边由多个顶点构成。

这里我做了一个简单模型

烘培导出fbx模式

ok,没问题!

threejs加载fbx原理

顶点数据

顶点位置 顶点颜色 顶点法向量数据

geometry.attributes

  • position
  • color
  • normal
    顶点法向量与光照阴影有关


    漫反射光的颜色=几何体表面基色光线颜色光线入射角
    光线方向是一个向量,顶点有一个法向量
    这里是三维空间向量

    VTK文件格式
    Vtk模型是一种以文本方式表示的3D模型文件,其能够表示点面信息,
    而且能够以人类易读易懂的方式以文本的形式存储下来。
    ASCII表示该文件的格式,是ascii版本,该位置也可以写binary,那
    么这个文件就是二进制格式的了。
    VTK简介
    代码重构
    直接使用loadfbx.js框架
    核心部分
var loader = new THREE.FBXLoader();
  loader.load( '../models/UI.fbx', function ( object ) 
  {//加载路径fbx文件
    object.traverse( function ( child ) 
    {
      if ( child.isMesh )
      {
        child.castShadow = true;
        child.receiveShadow = true;
      }
    } );
    scene.add( object );//模型
    } );

ok,没问题!


目录
相关文章
|
7月前
|
数据可视化 前端开发 JavaScript
vue3+threejs可视化项目——引入threejs加载钢铁侠模型(第二步)
vue3+threejs可视化项目——引入threejs加载钢铁侠模型(第二步)
608 3
|
7月前
three.js的3D模型渲染主要构成
three.js的3D模型渲染主要构成
114 0
Cesium系列:加载单个模型
Cesium如何加载单个三维模型数据
539 0
|
2月前
|
JavaScript
Threejs加载MMD
这篇文章详细介绍了如何在Three.js中加载和使用MMD(MikuMikuDance)模型,包括模型的导入、动画的播放以及与MMD相关的文件格式和操作流程。
60 2
Threejs加载MMD
|
2月前
ThreeJs设置模型的边线
这篇文章介绍了如何在Three.js中为3D模型添加边线效果,并提供了实现这一功能的代码示例。
47 2
|
2月前
|
移动开发 JavaScript 前端开发
ThreeJs简介
这篇文章介绍了Three.js的基础知识,包括其相对于WebGL的优势以及如何使用Three.js创建基本的3D场景。
45 1
|
2月前
|
应用服务中间件 nginx
ThreeJs导入外部3D模型
这篇文章详细介绍了如何在Three.js中导入并显示外部的3D模型,包括所需的准备工作和具体实现步骤。
172 0
|
4月前
|
Web App开发 JSON JavaScript
WebGL简易教程(十五):加载gltf模型
WebGL简易教程(十五):加载gltf模型
130 1
|
4月前
|
编解码 缓存 算法
Three.js如何降低3D模型的大小以便更快加载
为加快600MB的3D模型在Three.js中的加载速度,可采用多种压缩方法:1) 减少顶点数,使用简化工具或LOD技术;2) 压缩纹理,降低分辨率或转为KTX2等格式;3) 采用高效文件格式如glTF 2.0及draco压缩;4) 合并材质减少数量;5) 利用Three.js内置优化如BufferGeometry;6) 按需分批加载模型;7) Web Workers后台处理;8) 多模型合并减少绘制;9) 使用Texture Atlas及专业优化工具。示例代码展示了使用GLTFLoader加载优化后的模型。
473 12
|
4月前
|
Web App开发 应用服务中间件 定位技术
three.js:三维模型加载量测试
three.js:三维模型加载量测试
192 4