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

目录
相关文章
|
数据可视化 物联网
Threejs物联网,工厂3D可视化
Threejs物联网,工厂3D可视化
1055 15
Threejs物联网,工厂3D可视化
|
数据可视化 前端开发 JavaScript
vue3+threejs可视化项目——引入threejs加载钢铁侠模型(第二步)
vue3+threejs可视化项目——引入threejs加载钢铁侠模型(第二步)
1133 3
Threejs实现天空盒,全景场景,地面草地
Threejs实现天空盒,全景场景,地面草地
1712 0
Threejs实现天空盒,全景场景,地面草地
|
移动开发 前端开发 JavaScript
js 简单图片取色器
基于 JavaScript(js) 的简单的图片颜色识别
1556 0
js 简单图片取色器
|
存储 SQL 数据库连接
MPPDB分布式结构化数据库
1.MPPDB简介 MPP,它是一款 Shared Nothing 架构的分布式并行数据库集群,具备高性能、高可用、高扩展特性,可以为超大规模数据管理提供高性价比的通用计算平台,并广泛地用于支撑各类数据仓库系统、BI 系统和决策支持系统。
6968 0
|
存储
THREEJS实战6_加载fbx模型
THREEJS实战6_加载fbx模型
1139 1
|
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
3074 4
Three.js第2篇,加载glb / gltf模型,Vue加载glb / gltf模型(如何在vue中使用three.js,vue使用threejs加载glb模型)
|
JavaScript 前端开发 测试技术
Vue 3 组合式 API 中的 nextTick 深入解析
Vue 3 组合式 API 中的 nextTick 深入解析
Three.js模拟沿着路径进行运动,模拟飞机飞行,并保持运动方向
Three.js模拟沿着路径进行运动,模拟飞机飞行,并保持运动方向
1567 0
Three.js模拟沿着路径进行运动,模拟飞机飞行,并保持运动方向
|
数据采集 Dart Apache
Github 2024-05-07 Python开源项目日报 Top10
在2024年5月7日的Github Trendings中,Python开源项目占据主导,共有10个项目上榜。其中热门项目包括:yt-dlp,一个增强版的youtube-dl分支,具有64K+星标;Home Assistant,专注本地控制和隐私的开源家庭自动化项目,拥有65K+星标;以及openpilot,一个开源驾驶辅助系统,支持多种车型,45K+星标。其他项目涵盖爬虫工具、实时应用框架Flet、可观测性平台Logfire等,涉及Python、Dart和C++等多种语言。
739 10