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,没问题!


目录
相关文章
|
数据可视化 前端开发 JavaScript
vue3+threejs可视化项目——引入threejs加载钢铁侠模型(第二步)
vue3+threejs可视化项目——引入threejs加载钢铁侠模型(第二步)
1326 3
|
JavaScript API
Vue使用vue-3d-model组件预览3D三维文件、立体文件,支持旋转、自动播放
Vue使用vue-3d-model组件预览3D三维文件、立体文件,支持旋转、自动播放
Threejs实现模拟管道液体流动
Threejs实现模拟管道液体流动
3301 0
Threejs实现模拟管道液体流动
Threejs实现下雨,下雪,阴天,晴天,火焰
Threejs实现下雨,下雪,阴天,晴天,火焰
2508 0
Threejs实现下雨,下雪,阴天,晴天,火焰
|
Web App开发 运维 监控
物联网3D,物业基础设施3D运维,使用webgl(three.js)与物联网设备结合案例。搭建智慧楼宇,智慧园区,3D园区、3D物业设施,3D楼宇管理系统——第八课
物联网相比这些年来,大家都了解很多了,直白的讲,就是万物互联,万物上网。那么这里的物联网3D就是指通过三维可视化的方式展现物联网监控设备。对设备的位置信息,状态信息能一目了然。面向IT设施和资源的一体化综合监控与远程操控方式。通过三维可视化方式展现,解决监控资源繁多、开源工具使用复杂、问题定位困难等问题。
1082 0
物联网3D,物业基础设施3D运维,使用webgl(three.js)与物联网设备结合案例。搭建智慧楼宇,智慧园区,3D园区、3D物业设施,3D楼宇管理系统——第八课
|
JavaScript 前端开发 数据可视化
Three.js第2篇,加载glb / gltf模型,Vue加载glb / gltf模型(如何在vue中使用three.js,vue使用threejs加载glb模型)
Three.js 是一个用于在 Web 上创建和显示 3D 图形的 JavaScript 库。它提供了丰富的功能和灵活的 API,使开发者可以轻松地在网页中创建各种 3D 场景、模型和动画效果。可以用来展示产品模型、建立交互式场景、游戏开发、数据可视化、教育和培训等等。这里记录一下如何在Vue项目中使用Three.js
3788 4
Three.js第2篇,加载glb / gltf模型,Vue加载glb / gltf模型(如何在vue中使用three.js,vue使用threejs加载glb模型)
|
JSON 算法 数据可视化
⚡Three.js-在场景中导入3D动画模型
⚡Three.js-在场景中导入3D动画模型
47542 4
⚡Three.js-在场景中导入3D动画模型
|
编解码 缓存 算法
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加载优化后的模型。
1711 12
Threejs用官方提供的编辑器做一个简单的模型
这篇文章介绍了如何使用Three.js内置的编辑器来创建和编辑简单的3D模型,并提供了相应的操作指南。
1326 1
|
开发框架
threejs做特效:实现物体的发光效果-EffectComposer详解!
【8月更文挑战第7天】实现物体的发光效果-EffectComposer详解!
2217 6
threejs做特效:实现物体的发光效果-EffectComposer详解!