three.js 加载fbx文件并解析

效果：

stl、obj都是静态模型，不可以包含动画，fbx除了包含几何、材质信息，可以存储骨骼动画等数据。

代码：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>.加载FBX并解析骨骼动画</title><script src="../three.js"></script><script src="../OrbitControls.js"></script><script src="../js/FBXLoader.js"></script><script src="../js/inflate.min.js"></script>
</head><body><script>let N = 128;let analyser = null;// 1，创建场景var scene = new THREE.Scene();// 创建STL加载器var fbxLoader = new THREE.FBXLoader();fbxLoader.load('./斯巴达从光晕战斗进化成3D CG模型/0.fbx',obj => {scene.add(obj);console.log(obj);})// 3,创建灯光var point = new THREE.PointLight(0xffffff, 0.5);point.position.set(200, 200, 200);scene.add(point);var point2 = new THREE.PointLight(0xffffff, 0.5);point2.position.set(-200, 200, 200);scene.add(point2);var point3 = new THREE.PointLight(0xffffff);point3.position.set(200, -200, 200);// 4,创建相机对象var width = window.innerWidth;var height = window.innerHeight;var k = width / height;var s = 50;var camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, -2000, 2000);camera.position.set(0, 200, 100);camera.lookAt(scene.position);// 5，创建渲染器var renderer = new THREE.WebGLRenderer();renderer.setSize(width, height);document.body.appendChild(renderer.domElement);function render() {renderer.render(scene, camera);requestAnimationFrame(render);}var controls = new THREE.OrbitControls(camera, renderer.domElement);var axes = new THREE.AxesHelper(500);scene.add(axes);render();</script>
</body></html>

three.js 加载fbx文件并解析相关推荐

html js引用本地资源,【基本解决】js加载本地文件
[背景] 折腾: 期间,可以把问题转换为: 用js,去加载,读取本地的文件. [折腾过程] 1.搜: js load local file js read local file 参考: 试试:func ...
Vue引入Thee.js 加载obj文件和mtl文件并上纹理贴图
目录 1.引入包三个包 2.在vue 组件内 import文件 3.在mound钩子函数内调用 4.效果图部分加载报错另:HTML页面使用three加载obj文件和mtl文件 1.引入包三个包 n ...
vue使用three.js加载.FBX模型文件
1.需要安装的依赖 //three依赖yarn add three//tween.js依赖yarn add @tweenjs/tween.js 2. 封装组件 draw.vue 放在component ...
Html监听Fbx文件加载,FBX格式mesh解析与加载（一）
FBX格式mesh解析与加载(一) FBX格式mesh解析与加载(一) ** 理解FBX格式中Mesh数据结构** fbx文件是现在许多建模动画软件和游戏引擎之间共用的模型文件格式.fbx文件分为两种 ...
.net使用pdfobject.js加载pdf文件
1.下载pdfobject.js文件 2. 1 <script type="text/javascript" src="<%= Application[&qu ...
js加载音频文件并播放，代码实例
功能:实现前端自动循环播放音频范围:所有js网页 js的代码: var mp3 = "/music/yy.mp3";var mp3 = new Audio(mp3);mp3.pl ...
动态加载Fbx模型文件
为什么80%的码农都做不了架构师?>>> 动态加载FBX文件方法1(已测试过) 1 将模型拖动到场景中 ,调整好位置.(制作prefab需要) 2 新建Resources(如 ...
Three.js加载.stl格式模型
.stl格式模型加载本文是Three.js电子书的14.2节基本所有的三维软件都支持导出.stl格式的三维模型文件,.stl格式的三维模型不包含材质Material信息,只包含几何体顶点数据的信息 ...
Three.js加载.obj和.mtl文件(无法加载材质、路径错误问题)
加载.obj模型文件本文是Three.js电子书的14.3节使用三维软件导出.obj模型文件的时候,会同时导出一个材质文件.mtl, .obj和.stl文件包含的信息一样都是几何体顶点相关数据,材 ...
js加载并显示excel文件
亲测可用,若有疑问请私信 js 加载并显示 excel 文件养成先放效果在开讲的好习惯~ 项目演示和代码地址:codesandbox/js-xlsx-demo js-xlsx-demo - Code ...

three.js 加载fbx文件并解析

three.js 加载fbx文件并解析相关推荐

最新文章

热门文章