threejs实战_加载fbx模型

简介: threejs实战_加载fbx模型

加载fbx模型原理

3D模型
模型由面构成,面包括三角形、四边形与多边形,轻量级的优秀模型面数一般都是三角形,面又由多条边构成,边由多个顶点构成。
这里我做了一个简单模型
image.png

烘培导出fbx模式
image.png

ok,没问题!
image.png

threejs加载fbx原理

顶点数据
|顶点位置| 顶点颜色|顶点法向量数据
|--|--|--
geometry.attributes

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

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

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 );//模型

    } );

20200419013241830.gif

ok,没问题!

目录
相关文章
|
6月前
|
数据可视化 前端开发 JavaScript
vue3+threejs可视化项目——引入threejs加载钢铁侠模型(第二步)
vue3+threejs可视化项目——引入threejs加载钢铁侠模型(第二步)
587 3
|
6月前
|
机器学习/深度学习 数据可视化 PyTorch
PyTorch基础之模型保存与重载模块、可视化模块讲解(附源码)
PyTorch基础之模型保存与重载模块、可视化模块讲解(附源码)
143 1
|
1月前
|
JavaScript
Threejs加载MMD
这篇文章详细介绍了如何在Three.js中加载和使用MMD(MikuMikuDance)模型,包括模型的导入、动画的播放以及与MMD相关的文件格式和操作流程。
55 2
Threejs加载MMD
|
1月前
ThreeJs设置模型的边线
这篇文章介绍了如何在Three.js中为3D模型添加边线效果,并提供了实现这一功能的代码示例。
41 2
|
1月前
|
移动开发 JavaScript 前端开发
ThreeJs简介
这篇文章介绍了Three.js的基础知识,包括其相对于WebGL的优势以及如何使用Three.js创建基本的3D场景。
43 1
|
1月前
|
编解码 前端开发 JavaScript
ThreeJs制作模型图片
这篇文章介绍了如何使用Three.js将一张图片转化为3D场景中的像素化模型,通过提取图片的像素颜色并将它们应用到3D立方体上,形成一种特殊的图像展示效果。
28 0
ThreeJs制作模型图片
|
1月前
|
应用服务中间件 nginx
ThreeJs导入外部3D模型
这篇文章详细介绍了如何在Three.js中导入并显示外部的3D模型,包括所需的准备工作和具体实现步骤。
120 0
|
3月前
|
Web App开发 JSON JavaScript
WebGL简易教程(十五):加载gltf模型
WebGL简易教程(十五):加载gltf模型
114 1
|
3月前
|
编解码 缓存 算法
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加载优化后的模型。
428 12
|
3月前
|
Web App开发 应用服务中间件 定位技术
three.js:三维模型加载量测试
three.js:三维模型加载量测试
179 4
下一篇
无影云桌面