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

👨‍⚕️ 主页： gis分享者

👨‍⚕️ 感谢各位大佬点赞👍 收藏⭐ 留言📝 加关注✅!

👨‍⚕️ 收录于专栏：threejs gis工程师

文章目录

一、🍀前言
- [1.1 ☘️THREE.AssimpJSONLoader assimp2json模型加载器](#1.1 ☘️THREE.AssimpJSONLoader assimp2json模型加载器)
[二、🍀导入assimp & assimp2json格式的模型](#二、🍀导入assimp & assimp2json格式的模型)
- [1. ☘️实现思路](#1. ☘️实现思路)
- [2. ☘️代码样例](#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. ☘️代码样例

html 复制代码

<!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>

效果如下：