学习threejs，导入assimp assimp2json格式的模型

👨‍⚕️ 主页： gis分享者
👨‍⚕️ 感谢各位大佬点赞👍 收藏⭐ 留言📝 加关注✅!
👨‍⚕️ 收录于专栏：threejs gis工程师

文章目录

一、🍀前言
- 1.1 ☘️THREE.AssimpJSONLoader assimp2json模型加载器
二、🍀导入assimp & assimp2json格式的模型
- 1. ☘️实现思路
- 2. ☘️代码样例

一、🍀前言

本文详细介绍如何基于threejs在三维场景中导入assimp & assimp2json格式的模型，亲测可用。希望能帮助到您。一起学习，加油！加油！

1.1 ☘️THREE.AssimpJSONLoader assimp2json模型加载器

THREE.AssimpJSONLoader用于加载和处理assimp2json格式3D模型文件的扩展。

Assimp：
Assimp是一个用于加载和处理多种3D数据格式的几何场景库。它旨在从不同来源导入资产，并将其存储为特定于引擎的格式，便于快速加载。该库还能对导入的数据进行后处理，如索引网格转换、法线计算等，并支持从右手坐标系转换至左手坐标系。

AWD支持的模型格式：包括但不限于

3D Manufacturing Format (.3mf)
Collada (.dae, .xml)
Blender (.blend)
3D Studio Max 3DS (.3ds)
glTF (.glTF)
FBX格式（ASCII和二进制）(.fbx)
Stanford Polygon Library (.ply)
AutoCAD DXF (.dxf)
IFC-STEP (.ifc)
Neutral File Format (.nff)
Valve Model (.smd, .vta)
Quake I (.mdl)
Quake II (.md2)
Quake III (.md3)
Quake 3 BSP (.pk3)
RtCW (.mdc)
Doom 3 (.md5mesh, .md5anim, .md5camera)
DirectX X (.x)
Quick3D (.q3o, .q3s)
Raw Triangles (.raw)
AC3D (.ac, .ac3d)
Stereolithography (.stl)
3D GameStudio Model (.mdl)
3D GameStudio Terrain (.hmp)
Ogre (.mesh.xml, .skeleton.xml, .material)
OpenGEX-Fomat (.ogex)
Milkshape 3D (.ms3d)
LightWave Model (.lwo)
LightWave Scene (.lws)
Modo Model (.lxo)
CharacterStudio Motion (.csm)
Stanford Ply (.ply)
TrueSpace (.cob, .scn)
XGL-3D-Format (.xgl)

相关网站：

ASSIMP在线转换
github assimp项目

二、🍀导入assimp & assimp2json格式的模型

1. ☘️实现思路

1、初始化renderer渲染器
2、初始化Scene三维场景scene
3、初始化camera相机，定义相机位置 camera.position.set，设置相机方向camera.lookAt。
4、创建三个THREE.DirectionalLight平行光源dir1、dir2、dir3，设置平行光源的位置，scene中添加dir1、dir2、dir3。创建THREE.SpotLight聚光灯光源spotLight，设置spotLight的位置信息，场景scene中添加spotLight。
5、加载几何模型：创建THREE.AssimpJSONLoader加载器loader，loader调用load方法加载‘spider.obj.assimp.json’模型。在load回调函数中，回调函数获取网格对象model，设置model的范围大小，场景scene中添加model。具体代码参考代码样例。
6、加入stats监控器，监控帧数信息。

2. ☘️代码样例

<!DOCTYPE html>
<html>
<head><title>导入assimp & assimp2json格式的模型</title><script type="text/javascript" src="../libs/three.js"></script><script type="text/javascript" src="../libs/AssimpJSONLoader.js"></script><script type="text/javascript" src="../libs/stats.js"></script><script type="text/javascript" src="../libs/dat.gui.js"></script><script type="text/javascript" src="../libs/OrbitControls.js"></script><style>body {/* 设置页面外间距和滚动条 */margin: 0;overflow: hidden;}</style>
</head>
<body><div id="Stats-output">
</div>
<!-- Div which will hold the Output -->
<div id="WebGL-output">
</div><!-- js代码 -->
<script type="text/javascript">// 初始化function init() {var stats = initStats();// 创建三维场景var scene = new THREE.Scene();// 创建相机var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);// 创建渲染器并设置大小var webGLRenderer = new THREE.WebGLRenderer();webGLRenderer.setClearColor(new THREE.Color(0x000, 1.0));webGLRenderer.setSize(window.innerWidth, window.innerHeight);webGLRenderer.shadowMapEnabled = true;// 设置相机位置和方向camera.position.x = 30;camera.position.y = 30;camera.position.z = 30;camera.lookAt(new THREE.Vector3(0, 0, 0));var orbit = new THREE.OrbitControls(camera);var dir1 = new THREE.DirectionalLight();dir1.position.set(-30, 30, -30);scene.add(dir1);var dir2 = new THREE.DirectionalLight();dir2.position.set(-30, 30, 30);scene.add(dir2);var dir3 = new THREE.DirectionalLight();dir3.position.set(30, 30, -30);scene.add(dir3);// 添加聚光灯，并设置位置var spotLight = new THREE.SpotLight(0xffffff);spotLight.position.set(30, 30, 30);scene.add(spotLight);// 渲染器绑定页面元素document.getElementById("WebGL-output").appendChild(webGLRenderer.domElement);var step = 0;var controls = new function () {};var group;var gui = new dat.GUI();var loader = new THREE.AssimpJSONLoader();var group = new THREE.Object3D();loader.load("../assets/models/assimp/spider.obj.assimp.json", function (model) {model.traverse(function (child) {if (child instanceof THREE.Mesh) {console.log(child.geometry);}});model.scale.set(0.1, 0.1, 0.1);scene.add(model);});render();function render() {stats.update();orbit.update();if (group) {group.rotation.y += 0.006;}requestAnimationFrame(render);webGLRenderer.render(scene, camera);}function initStats() {var stats = new Stats();stats.setMode(0);stats.domElement.style.position = 'absolute';stats.domElement.style.left = '0px';stats.domElement.style.top = '0px';document.getElementById("Stats-output").appendChild(stats.domElement);return stats;}}window.onload = init;
</script>
</body>
</html>