babylon.js 学习笔记(2)

菩提树下的杨过

发布于 2023-05-23 17:17:55

5620

发布于 2023-05-23 17:17:55

如何在网页中嵌入设计好的模型？

接上回继续，我们设计好精美的模型后，最终总要展示给客户，比如利用playground画了1个方块：

const createScene =  () => {
    const scene = new BABYLON.Scene(engine);

    const camera = new BABYLON.ArcRotateCamera("camera", -Math.PI / 2, Math.PI / 2.5, 3, new BABYLON.Vector3(0, 0, 0));
    camera.attachControl(canvas, true);

    const light = new BABYLON.HemisphericLight("light", new BABYLON.Vector3(0, 1, 0));

    const box = BABYLON.MeshBuilder.CreateBox("box", {});

    return scene;
}

Playground平台可以直接导出为.babylon文件

随便弄个html，只需要下面2行即可：

<script src="https://cdn.babylonjs.com/viewer/babylon.viewer.js"></script>
...

<babylon model="./scene.babylon"></babylon>
...

效果：

在线地址：https://yjmyzz.github.io/babylon_js_study/day02/01.html

除此之外，还有另1种导入方式，基本用法如下：

BABYLON.SceneLoader.ImportMeshAsync(model_name, folder_path, file_name, scene);

第1个参数model_name有以下3种变化：

BABYLON.SceneLoader.ImportMeshAsync("", "/relative path/", "myFile"); //第1个参数为空，表示导入myFile中的所有模型
BABYLON.SceneLoader.ImportMeshAsync("model1", "/relative path/", "myFile"); //仅导入model1（根据名称）
BABYLON.SceneLoader.ImportMeshAsync(["model1", "model2"], "/relative path/", "myFile"); //第1个参数，可以传入数组，导入指定的多个模型

另外实际开发中，经常会写一些必要的重复代码，可以直接利用下面的html模板：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Babylon Template</title>

    <style>
        html,
        body {
            overflow: hidden;
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }

        #renderCanvas {
            width: 50%;
            height: 50%;
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            margin: auto;
            touch-action: none;
        }

        #canvasZone {
            width: 100%;
            height: 100%;
        }
    </style>

    <!-- <script src="https://cdn.babylonjs.com/babylon.js"></script>
    <script src="https://cdn.babylonjs.com/loaders/babylonjs.loaders.min.js"></script>
    <script src="https://code.jquery.com/pep/0.4.3/pep.js"></script> -->

    <!-- 导入babylon核心功能 -->
    <script src="../js/babylon.js"></script>
    <!-- 允许scene中导入model -->
    <script src="../js/babylonjs.loaders.min.js"></script>
    <!-- 允许使用触屏 -->
    <script src="../js/pep.js"></script>
</head>

<body>
    <canvas id="renderCanvas" touch-action="none"></canvas>

    <script>
        const canvas = document.getElementById("renderCanvas");
        const engine = new BABYLON.Engine(canvas, true);

        //在这里添加自己的核心代码
        const createScene = function () {
            const scene = new BABYLON.Scene(engine);

            //导入当前目录下的scene.babylon中的所有模型
            BABYLON.SceneLoader.ImportMeshAsync("", "./", "scene.babylon");
            const camera = new BABYLON.ArcRotateCamera("camera", -Math.PI / 2, Math.PI / 2.5, 3, new BABYLON.Vector3(0, 0, 0));
            camera.attachControl(canvas, true);
            const light = new BABYLON.HemisphericLight("light", new BABYLON.Vector3(1, 1, 0));

            return scene;
        };

        const scene = createScene();

        engine.runRenderLoop(function () {
            scene.render();
        });

        window.addEventListener("resize", function () {
            engine.resize();
        });
    </script>
</body>

</html>

只需在createScene()中添加自己的代码实现即可，导入model时，注意下目录的相对位置（参考下图）