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

目录
相关文章
|
1月前
|
数据可视化 前端开发 JavaScript
vue3+threejs可视化项目——引入threejs加载钢铁侠模型(第二步)
vue3+threejs可视化项目——引入threejs加载钢铁侠模型(第二步)
198 3
Cesium系列:加载单个模型
Cesium如何加载单个三维模型数据
357 0
|
14天前
|
机器学习/深度学习 PyTorch 算法框架/工具
【从零开始学习深度学习】47. Pytorch图片样式迁移实战:将一张图片样式迁移至另一张图片,创作自己喜欢风格的图片【含完整源码】
【从零开始学习深度学习】47. Pytorch图片样式迁移实战:将一张图片样式迁移至另一张图片,创作自己喜欢风格的图片【含完整源码】
|
1月前
|
JavaScript 开发工具 git
Three.js第1篇,Three.js新手教学,如何在项目中使用Three.js(three.js使用流程详细,three.js的使用方式,three.js创建3d物体)
Three.js封装了WebGL的底层细节,是一款运行在浏览器中的 3D 引擎,可以用它创建各种三维场景,包括了摄影机、光影、材质等各种对象,目前在Git上已经拥有90k+的star。
43 0
Three.js第1篇,Three.js新手教学,如何在项目中使用Three.js(three.js使用流程详细,three.js的使用方式,three.js创建3d物体)
|
1月前
|
存储
THREEJS实战6_加载fbx模型
THREEJS实战6_加载fbx模型
195 1
|
JSON 算法 数据可视化
⚡Three.js-在场景中导入3D动画模型
⚡Three.js-在场景中导入3D动画模型
47032 4
⚡Three.js-在场景中导入3D动画模型
|
11月前
Threejs入门进阶实战案例(2):正常静态渲染和渲染动画的解决方案
Threejs入门进阶实战案例(2):正常静态渲染和渲染动画的解决方案
74 0
|
Android开发
Android图片加载开源库对比
Android图片加载开源库对比
80 0
|
JavaScript 数据库
three.js实现酷炫散点模型
three.js实现酷炫散点模型
three.js实现酷炫散点模型
|
移动开发 JavaScript 数据可视化
基于Three.js的全景展示框架-TPano
在一些全景展示类应用中,经常需要对采集到全景照片进行展示,一般情况下,可以通过制作人员使用pano2vr进行数据处理(教程可参见:实战!使用pano2vr生成html5全景页面),将处理好的数据发布至静态服务器,再关联相应位置即可完成全景展示(详情见基于Leaflet的全景综合展示实战)
633 1
基于Three.js的全景展示框架-TPano