Three.js入门学习笔记19：如何导入fbx静态模型

最新推荐文章于 2024-07-10 14:42:15 发布
最新推荐文章于 2024-07-10 14:42:15 发布
阅读量2.6k 收藏 9
点赞数
分类专栏： Three.js 文章标签： javascript webgl js 3d
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jbwhysy/article/details/106272579
版权

参考资料：https://www.jianshu.com/p/906072e60197

1.在JS里引入下面两个文件

  <script type="text/javascript" src="js/FBXLoader.js"></script>
  <script type="text/javascript" src="js/inflate.min.js"></script>

2.引入fbx文件，fbx文件放在页面同级文件夹里
在这里插入图片描述

var loader = new THREE.FBXLoader();
    loader.load("fbx/dijifbx.FBX", function(objectBottom) {
   
    objectBottom.traverse(function(child) {
   
        if (child instanceof THREE.Mesh) {
   
            child.material.side = THREE.DoubleSide; 
        }
    });
        objectBottom.scale.multiplyScalar(0.5);//0.5倍大小 
        objectBottom.position.set(0,0,0);
        objectBottom.rotation.y = -Math.PI;//旋转180度
        scene.add(objectBottom);
    });

完整代码记录

<!DOCTYPE html>
<html lang="en">
<head>
<title>3D</title>
<meta charset="utf-8">
<!-- 自适应 -->
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<style>
* {
   
    margin: 0;
    padding: 0;
}
</style>
</head>
<body>
<script src="js/three.js"></script> 
<script type="text/javascript" src="js/OrbitControls.js"></script> 
<script type="text/javascript" src="js/FBXLoader.js"></script> 
<script type="text/javascript" src="js/inflate.min.js"></script> 
<script type="text/javascript" src="js/DirectionalLightHelper.js"></script> 
<script>
        	var stats
最低0.47元/天 解锁文章
月亮实验室
关注
专栏目录
Threejs 展示——fbx 格式模型导入
虎康的博客
01-29 821
导入fbx 格式的模型数据。
three.js导入外部模型—FBX
赵佳佳的博客
03-19 8936
导入fbx格式的模型 基于上一篇关于导入obj模型，此篇主要讲述如何导入fbx格式的模型。 两者区别： obj模型只是静态模型，而fbx模型是可以带有动画的模型。 导入静态fbx模型 1、引入fbx模型加载库FBXLoader.js <script src="js/FBXLoader.js"></script> 2、引入inflate.js文件 <scriipt src="js/inflate.js"></script> 如果不引入该文件会出现报错信息：T
Three.js导入fbx三维模型
上山看海
03-06 3970
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> </head> <body> <script type="module"> import * as THREE from 'https://threejs.org/build/three.module.js'; import Stats from 'https:/.
vite使用threejs加载fbx模型
最新发布
weixin_55209970的博客
07-10 359
会动的fbx模型 去mixamo上下载就行。
Three.js fbx文件导入
热门推荐
Krisez的博客
03-08 3万+
源码 下载 https://download.csdn.net/download/qq_34206863/10361429 其实可以先看看官方案例 你想要的东西 官方里面都有，就看你找不找得到了。。。。 话不多说 我们先看看这个例子吧 &amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html lang=&quot;en&quot;&amp;gt; &amp;lt;head&am
Three.js fbx文件导入 源码
04-26
Three.js fbx文件导入源码实例。 博客查看，https://blog.csdn.net/qq_34206863/article/details/79486518
threeJS导入FBX模型
大白兔奶糖的博客
10-31 1282
three
Three模型换装项目，引入FBX模型并且修改渲染器大小和模型居中
weixin_48070278的博客
06-08 2266
Three.js进行换装
js加载fbx模型文件
weixin_45799001的博客
01-04 1595
html <div class="ui-layout-center"> <div class="container-div"> <div class="row" style=" background: #fff;" > <div class="ibox float-e-margins" style="margin: 15px;padding: 20px;min-height: 650px;">
Threejs-master网盘地址.txt
12-14
网盘中有多个版本的three.js-master文件，没必须要全都下载，你可以根据自己的需要选择版本，版本号越大越新。
微信小程序压缩库zlib.js
07-17
微信小程序的压缩库--zlib.js，用法跟JS库的用法相同，我是根据JS库修改过来的，亲自测试可用
Three.js入门学习笔记07：外部模型导入-C4D转成json文件供网页使用-fbx导入
基本无害的博客
03-12 6219
上一篇用的obj导入，转成json发现有些材质加载不进去，不知是什么原因。 比如blender导入obj模型的时候，只要obj和mtl材质文件在同一个文件夹内，正常情况，导入obj的同时就能直接导入同文件夹下的mtl。 在blender中可以看到有完整材质的obj模型，但是用three.js插件转成json放在网页里时，材质有缺失。 这个问题还没解决。 于是我换成用c4d转fbx，fbx导入ble...
Three.js入门学习笔记18：如何用blender导出json文件
基本无害的博客
04-14 4430
参考教程： https://www.jianshu.com/p/f7b45d9b957b 需要在blender中安装导出three.js的插件 blender需要2.79版本才行 方法1：把js放入网页中 参考教程 https://blog.csdn.net/cj9551/article/details/80307426 https://www.jianshu.com/p/f7b45d9b957...
three html 引入本地fbx模型
macangyewangs的博客
09-01 1261
<!DOCTYPE html> <html lang="en"> <head> <title>2-1three.js FBX loader</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.
Three.js加载FBX并解析骨骼动画
u014291990的博客
12-03 1万+
加载FBX并解析骨骼动画 本文是Three.js电子书的14.4节 通过Threejs先加载一个.FBX格式的三维模型文件，然后解析该文件中的骨骼动画信息。 加载器FBXLoader.js 引入FBX加载器相关文件 <!-- 引入fbx模型加载库FBXLoader --> <script src="http://www.yanhuangxueyuan.com/versions/...
threejs中导入fbx模型相关问题
gao123ming的专栏
04-11 7867
        最近有兴趣在学习threejs，对于模型导入一直存在一个问题，我是想在网上下载一下好看的模型，做简单的关键帧动画，然后通过3dmax导出fbx模型，在导入threejs中，但是一直不成功，要不就是提示不支持二进制格式的模型，要不就是说fbx版本过低。        试错经历：       1、一开始用的max2014,问题一直存在无法解决       2、听有人说高版本的max导出...
帮我写一个three.js导入FBX模型代码
03-04
好的，下面是一个使用Three.js导入FBX模型的代码示例： 首先，你需要引入Three.js和FBXLoader.js文件： ```html <script src="https://cdn.rawgit.com/mrdoob/three.js/r129/build/three.min.js"></script> <script src="https://cdn.rawgit.com/mrdoob/three.js/r129/examples/js/loaders/FBXLoader.js"></script> ``` 然后，创建一个场景、相机和渲染器： ```javascript const scene = new THREE.Scene(); const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); const renderer = new THREE.WebGLRenderer(); renderer.setSize(window.innerWidth, window.innerHeight); document.body.appendChild(renderer.domElement); ``` 接着，创建一个FBXLoader对象，加载FBX模型文件，并在加载完成后将模型添加到场景中： ```javascript const loader = new THREE.FBXLoader(); loader.load('path/to/your/fbx/model.fbx', (object) => { scene.add(object); }); ``` 最后，使用相机和渲染器来渲染场景： ```javascript function animate() { requestAnimationFrame(animate); renderer.render(scene, camera); } animate(); ``` 希望这个例子能帮助你开始使用Three.js导入FBX模型。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值