学习threejs，导入babylon格式的模型

news2025/1/10 10:25:13

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

文章目录

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

一、🍀前言

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

1.1 ☘️THREE.BabylonLoader babylon模型加载器

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

babylon：
Babylon三维格式，即.babylon格式，是Babylon.js定义的一种用于存储3D场景和模型的格式。

特性：

基于JSON：Babylon格式基于JavaScript Object Notation（JSON）进行描述，这使得它具有良好的可读性和可扩展性。
完整性：该格式不仅包含3D模型的几何结构、材质、纹理等信息，还包含了场景设置、摄像机参数、光照效果等，用于完整地描述一个3D场景。
高效渲染：Babylon.js引擎能够高效地解析和渲染Babylon格式的场景和模型，提供逼真的视觉效果。

应用场景：

Babylon三维格式广泛应用于Web开发和游戏开发领域。开发者可以使用Babylon.js引擎加载和渲染Babylon格式的3D模型，创建各种精美的3D场景和动画效果。此外，Babylon格式还支持与其他3D模型格式进行互转，如.glb/.gltf、.stl、.obj等，这进一步扩大了其应用场景。

转换工具与方法：

在线转换工具（链接地址）：可以使用在线的模型转换工具，如3D转Babylon网站，将其他格式的3D模型转换为Babylon格式。这些工具通常支持多种模型格式文件之间的互转，并且操作简便。
Babylon.js官方工具：Babylon.js官方也提供了一些工具和方法，用于将3D模型转换为Babylon格式。例如，可以使用Babylon.js的在线模型查看工具导出Babylon格式的模型，或者通过编写脚本使用Babylon.js的API进行格式转换。

支持的软件与平台：
Babylon三维格式得到了多款软件和平台的支持。例如，一些3D建模软件（如Blender、3DMAX等）可以导入和导出Babylon格式的模型。此外，Babylon.js引擎本身也支持在多种浏览器和平台上运行，使得开发者可以在不同的环境中展示和使用Babylon格式的3D模型。
注意事项：

文件大小与转换时间：转换时间长度主要与模型的大小和面数相关，文件越大、模型面数越多，转换需要的时间就越长。
兼容性：虽然Babylon三维格式得到了广泛的支持，但在某些特定的软件或平台上可能仍然存在兼容性问题。因此，在进行格式转换之前，最好先确认目标软件或平台是否支持Babylon格式。

二、🍀导入babylon格式的模型

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.BabylonLoader加载器loader，loader调用load方法加载‘skull.babylon’模型。在load回调函数中，回调函数获取babylon场景对象loadedScene，loadedScene设置第一个子对象材质为THREE.MeshLambertMaterial漫反射材质，loadedScene赋值给scene。具体代码参考代码样例。
6、加入THREE.OrbitControls鼠标交互控件，加入stats监控器，监控帧数信息。

2. ☘️代码样例

<!DOCTYPE html>

<html>

<head>
    <title>导入babylon格式的模型</title>
    <script type="text/javascript" src="../libs/three.js"></script>
    <script type="text/javascript" src="../libs/BabylonLoader.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 id="WebGL-output">
</div>

<!-- Javascript code that runs our Three.js examples -->
<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 gui = new dat.GUI();


        var loader = new THREE.BabylonLoader();
        var group = new THREE.Object3D();
        loader.load("../assets/models/babylon/skull.babylon", function (loadedScene) {
        	// 场景方式加载babylon模型
            loadedScene.children[1].material = new THREE.MeshLambertMaterial()
            scene = loadedScene;
        });


        render();

        function render() {
            stats.update();

            orbit.update();

            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>