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

最新推荐文章于 2024-07-10 14:42:15 发布

月亮实验室

最新推荐文章于 2024-07-10 14:42:15 发布

阅读量2.6k

点赞数

分类专栏： Three.js 文章标签： javascript webgl js 3d

本文链接：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