Babylon.js 入门 - 第 1 章 - 第一个场景、模型、应用

企业开发 2024-11-01 19:41:58 阅读次数: 0

Babylon.js 入门 - 第 1 章 - 第一个场景、模型、应用

        现在是时候一起开始我们的学习之旅了。第一步将向您介绍使用 Babylon.js 创建场景、编写简单模型并将其导出的基础知识。Babylon.js 不仅可以创建模型，还可以将在其他软件中创建的一系列模型类型导入 Babylon.js。我们将向您展示如何将模型导入场景、将其显示在 Web 上或从中创建 Web 应用程序。从通常的 Hello World 开始，我们将逐步构建一个简单的世界。在旅程的最后，我们将创建一个展示 Babylon.js 功能的小村庄。

第一个场景

第一个场景和模型

        无论您是创建一个完整的世界还是只是将一个模型放入网页中，您都需要一个包含该世界或模型的场景、一台摄像机来观察它、一个光源照亮它，当然，至少还有一个可视对象作为模型。所有模型，无论是一个盒子还是一个复杂的角色，都是由三角形或面的网格制成的。

        我们可以直接在 Babylon.js 中用代码创建大量网格，也可以把其他软件创建的网格导入为模型。让我们从一个盒子开始。

向你的第一个世界问好

        所有使用 Babylon.js 引擎的项目都需要一个添加了相机和光源的场景。然后我们可以创建我们的盒子。

        等等……你问的 Babylon.js 引擎是什么？很好的问题。下面看到的引擎变量是负责与 WegGL、Audio 等较低级别 API 交互的类。创建一个 Babylon.js 中的场景(将视觉呈现到屏幕的上下文)的构造函数需要引擎与这些较低级别的 API 进行交互。这就是创建场景时需要引擎变量的原因。

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), scene);
camera.attachControl(canvas, true);
const light = new BABYLON.HemisphericLight("light", new BABYLON.Vector3(0, 1, 0), scene);
const box = BABYLON.MeshBuilder.CreateBox("box", {}, scene);

        像大多数使用 MeshBuilder 创建的网格一样，创建的盒子的中心位于原点，并且创建需要三个参数。它们是名称(string)、选项(object)、和场景(scene)。通过将选项设置为空对象 {}，盒子将默认其宽度、高度和深度为一个单位大小。

        为了更方便，我们需要将它们放在一个名为 createScene 的函数中，该函数必须返回一个场景。

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;
}

        由于此时只有一个场景，您可能会注意到参数场景(scene)可以在创建相机、灯光和盒子的参数中删除，因为默认情况下将它们放置在当前场景中。

示例链接

示例代码：

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Babylon.js sample code</title>
    <!-- Babylon.js -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.6.2/dat.gui.min.js"></script>
    <script src="https://preview.babylonjs.com/ammo.js"></script>
    <script src="https://preview.babylonjs.com/cannon.js"></script>
    <script src="https://preview.babylonjs.com/Oimo.js"></script>
    <script src="https://preview.babylonjs.com/earcut.min.js"></script>
    <script src="https://preview.babylonjs.com/babylon.js"></script>
    <script src="https://preview.babylonjs.com/materialsLibrary/babylonjs.materials.min.js"></script>
    <script src="https://preview.babylonjs.com/proceduralTexturesLibrary/babylonjs.proceduralTextures.min.js"></script>
    <script src="https://preview.babylonjs.com/postProcessesLibrary/babylonjs.postProcess.min.js"></script>
    <script src="https://preview.babylonjs.com/loaders/babylonjs.loaders.js"></script>
    <script src="https://preview.babylonjs.com/serializers/babylonjs.serializers.min.js"></script>
    <script src="https://preview.babylonjs.com/gui/babylon.gui.min.js"></script>
    <script src="https://preview.babylonjs.com/inspector/babylon.inspector.bundle.js"></script>
    <style>
        html,
        body {
            overflow: hidden;
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }

        #renderCanvas {
            width: 100%;
            height: 100%;
            touch-action: none;
        }
    </style>
</head>

<body>
    <canvas id="renderCanvas"></canvas>
    <script>
        var canvas = document.getElementById("renderCanvas");
        var startRenderLoop = function (engine, canvas) {
            engine.runRenderLoop(function () {
                if (sceneToRender && sceneToRender.activeCamera) {
                    sceneToRender.render();
                }
            });
        }
        var engine = null;
        var scene = null;
        var sceneToRender = null;
        var createDefaultEngine = function () {
            return new BABYLON.Engine(canvas, true, {
                preserveDrawingBuffer: true,
                stencil: true,
                disableWebGL2Support: false
            });
        };
        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;
        }
        window.initFunction = async function () {
            var asyncEngineCreation = async function () {
                try {
                    return createDefaultEngine();
                } catch (e) {
                    console.log(
                        "the available createEngine function failed. Creating the default engine instead"
                    );
                    return createDefaultEngine();
                }
            }
            window.engine = await asyncEngineCreation();
            if (!engine) throw 'engine should not be null.';
            startRenderLoop(engine, canvas);
            window.scene = createScene();
        };
        initFunction().then(() => {
            sceneToRender = scene
        });
        // Resize
        window.addEventListener("resize", function () {
            engine.resize();
        });
    </script>
</body>

</html>

增强您的网站效果

网页上的第一个模型

        如果模型的文件类型是 Babylon.js 可以识别的文件类型，那么您可以使用 Babylon.js 的查看器通过 <babylon> 元素在网页上显示您的场景或模型。可以被 Babylon.js 识别的模型文件类型有 .babylon、.gltf 和 .glb，推荐使用 .glb。无论场景是使用 Babylon.js 构建还是使用您最喜欢的设计软件创建，都没有区别。<babylon> 元素将自动调整大小以适应其容器。

        为了使用查看器，您需要将以下代码添加到 HTML 页面的 <script> 元素中。

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

         添加后，您将 <babylon> 元素放置在适当的容器中，并将其模型属性指向文件源。

<babylon model="Path to File"></babylon>

示例链接

示例代码：

<!DOCTYPE html>
<html>

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

    <title>Babylon.js Viewer 1 Example</title>

    <script src="https://cdn.babylonjs.com/viewer/babylon.viewer.js"></script>
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/normalize/3.0.3/normalize.min.css" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    </meta>

    <style>
        body {
            height: 600px;
        }

        #header {
            font-size: 6em;
            padding: 5px;
        }

        .cell {
            width: 30%;
            height: 40%;
            margin: 8px;
            float: left;
            padding: 3px;
            background-color: #BBBBBB;
        }

        @media screen and (max-width: 900px) {
            body {
                height: unset;
            }

            .cell {
                width: unset;
                padding: 0;
                font-size: 18px;
            }

            .babylon {
                width: 100%;
                margin: 0;
                padding: 8px;
                box-sizing: border-box;
                background: unset;
            }
        }
    </style>
</head>

<body>
    <div id="header">
        Viewer News
    </div>
    <div class="cell babylon">
        <babylon model="https://assets.babylonjs.com/meshes/box.glb"></babylon>
    </div>
    <div class="cell">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
        magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
        pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
        laborum.
    </div>
    <div class="cell">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
        magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
        pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
        laborum.
    </div>
    <div class="cell">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
        magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
        pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
        laborum.
    </div>
    <div class="cell">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
        magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
        pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
        laborum.
    </div>
    <div class="cell">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
        magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
        pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
        laborum.
    </div>

</body>

</html>

使用模型

        此页面上的示例包含可以定位、旋转和缩放的模型(在此示例中为房屋)。介绍完基础知识后(例如导入模型并将您的项目放在网页上)，我们将为您详细介绍如何使用 Babylon.js 完成此任务。

导入场景或模型
        当您将模型添加到场景中时，您的浏览器就开始加载它。您可能已经知道，从网站加载任何内容都是异步的。因此，在对模型进行操作之前，首先必须确保它们已被成功加载。您可以使用 SceneLoader 的 ImportMeshAsync 方法执行此操作，可以按如下方式完成：

BABYLON.SceneLoader.ImportMeshAsync(model name, folder path, file name, scene);

        场景参数是可选的，默认为当前场景。第一个参数可以是三种类型中的任何一种，具体取决于您是要加载所有模型、一个模型还是模型列表。 

// 第一个参数为空，加载所有模型
BABYLON.SceneLoader.ImportMeshAsync("", "/relative path/", "myFile");
// 第一个参数为名称字符串，加载当前名称的模型
BABYLON.SceneLoader.ImportMeshAsync("model1", "/relative path/", "myFile");
// 第一个参数为名称数组，加载当前名称数组里面的所有模型
BABYLON.SceneLoader.ImportMeshAsync(["model1", "model2"], "/relative path/", "myFile");

        请注意，上面的任何调用都只会加载模型。但是，您将无法以任何方式操纵它们。在内部，设置并返回了一个 Promise 对象，但上面的代码对该 Promise 的结果没有任何作用。以下两个示例，仅导入第一个参数范围内的模型。

示例链接

示例代码：

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Babylon.js sample code</title>
    <!-- Babylon.js -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.6.2/dat.gui.min.js"></script>
    <script src="https://preview.babylonjs.com/ammo.js"></script>
    <script src="https://preview.babylonjs.com/cannon.js"></script>
    <script src="https://preview.babylonjs.com/Oimo.js"></script>
    <script src="https://preview.babylonjs.com/earcut.min.js"></script>
    <script src="https://preview.babylonjs.com/babylon.js"></script>
    <script src="https://preview.babylonjs.com/materialsLibrary/babylonjs.materials.min.js"></script>
    <script src="https://preview.babylonjs.com/proceduralTexturesLibrary/babylonjs.proceduralTextures.min.js"></script>
    <script src="https://preview.babylonjs.com/postProcessesLibrary/babylonjs.postProcess.min.js"></script>
    <script src="https://preview.babylonjs.com/loaders/babylonjs.loaders.js"></script>
    <script src="https://preview.babylonjs.com/serializers/babylonjs.serializers.min.js"></script>
    <script src="https://preview.babylonjs.com/gui/babylon.gui.min.js"></script>
    <script src="https://preview.babylonjs.com/inspector/babylon.inspector.bundle.js"></script>
    <style>
        html,
        body {
            overflow: hidden;
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }

        #renderCanvas {
            width: 100%;
            height: 100%;
            touch-action: none;
        }
    </style>
</head>

<body>
    <canvas id="renderCanvas"></canvas>
    <script>
        var canvas = document.getElementById("renderCanvas");
        var startRenderLoop = function (engine, canvas) {
            engine.runRenderLoop(function () {
                if (sceneToRender && sceneToRender.activeCamera) {
                    sceneToRender.render();
                }
            });
        }
        var engine = null;
        var scene = null;
        var sceneToRender = null;
        var createDefaultEngine = function () {
            return new BABYLON.Engine(canvas, true, {
                preserveDrawingBuffer: true,
                stencil: true,
                disableWebGL2Support: false
            });
        };
        const createScene = function () {
            const scene = new BABYLON.Scene(engine);
            const camera = new BABYLON.ArcRotateCamera("camera", -Math.PI / 2, Math.PI / 2.5, 15, new BABYLON.Vector3(0, 0, 0));
            camera.attachControl(canvas, true);
            const light = new BABYLON.HemisphericLight("light", new BABYLON.Vector3(1, 1, 0));
            BABYLON.SceneLoader.ImportMeshAsync("semi_house", "https://assets.babylonjs.com/meshes/", "both_houses_scene.babylon");
            return scene;
        };
        window.initFunction = async function () {
            var asyncEngineCreation = async function () {
                try {
                    return createDefaultEngine();
                } catch (e) {
                    console.log(
                        "the available createEngine function failed. Creating the default engine instead"
                    );
                    return createDefaultEngine();
                }
            }
            window.engine = await asyncEngineCreation();
            if (!engine) throw 'engine should not be null.';
            startRenderLoop(engine, canvas);
            window.scene = createScene();
        };
        initFunction().then(() => {
            sceneToRender = scene
        });
        // Resize
        window.addEventListener("resize", function () {
            engine.resize();
        });
    </script>
</body>

</html>

示例链接

示例代码：

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Babylon.js sample code</title>
    <!-- Babylon.js -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.6.2/dat.gui.min.js"></script>
    <script src="https://preview.babylonjs.com/ammo.js"></script>
    <script src="https://preview.babylonjs.com/cannon.js"></script>
    <script src="https://preview.babylonjs.com/Oimo.js"></script>
    <script src="https://preview.babylonjs.com/earcut.min.js"></script>
    <script src="https://preview.babylonjs.com/babylon.js"></script>
    <script src="https://preview.babylonjs.com/materialsLibrary/babylonjs.materials.min.js"></script>
    <script src="https://preview.babylonjs.com/proceduralTexturesLibrary/babylonjs.proceduralTextures.min.js"></script>
    <script src="https://preview.babylonjs.com/postProcessesLibrary/babylonjs.postProcess.min.js"></script>
    <script src="https://preview.babylonjs.com/loaders/babylonjs.loaders.js"></script>
    <script src="https://preview.babylonjs.com/serializers/babylonjs.serializers.min.js"></script>
    <script src="https://preview.babylonjs.com/gui/babylon.gui.min.js"></script>
    <script src="https://preview.babylonjs.com/inspector/babylon.inspector.bundle.js"></script>
    <style>
        html,
        body {
            overflow: hidden;
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }

        #renderCanvas {
            width: 100%;
            height: 100%;
            touch-action: none;
        }
    </style>
</head>

<body>
    <canvas id="renderCanvas"></canvas>
    <script>
        var canvas = document.getElementById("renderCanvas");
        var startRenderLoop = function (engine, canvas) {
            engine.runRenderLoop(function () {
                if (sceneToRender && sceneToRender.activeCamera) {
                    sceneToRender.render();
                }
            });
        }
        var engine = null;
        var scene = null;
        var sceneToRender = null;
        var createDefaultEngine = function () {
            return new BABYLON.Engine(canvas, true, {
                preserveDrawingBuffer: true,
                stencil: true,
                disableWebGL2Support: false
            });
        };
        const createScene = function () {
            const scene = new BABYLON.Scene(engine);
            const camera = new BABYLON.ArcRotateCamera("camera", -Math.PI / 2, Math.PI / 2.5, 15, new BABYLON.Vector3(0, 0, 0));
            camera.attachControl(canvas, true);
            const light = new BABYLON.HemisphericLight("light", new BABYLON.Vector3(1, 1, 0));
            BABYLON.SceneLoader.ImportMeshAsync(["ground", "semi_house"], "https://assets.babylonjs.com/meshes/", "both_houses_scene.babylon");
            return scene;
        };
        window.initFunction = async function () {
            var asyncEngineCreation = async function () {
                try {
                    return createDefaultEngine();
                } catch (e) {
                    console.log(
                        "the available createEngine function failed. Creating the default engine instead"
                    );
                    return createDefaultEngine();
                }
            }
            window.engine = await asyncEngineCreation();
            if (!engine) throw 'engine should not be null.';
            startRenderLoop(engine, canvas);
            window.scene = createScene();
        };
        initFunction().then(() => {
            sceneToRender = scene
        });
        // Resize
        window.addEventListener("resize", function () {
            engine.resize();
        });
    </script>
</body>

</html>

         我们可以使用 Promise 的 then 方法来调用一个带有 Promise 结果的函数，来对 Promise 结果里面被加载的模型进行操作。结果是一个对象，其中包含所有被加载模型的网格属性和一些其他的东西。我们可以使用这个数组或它们的名称来操作每个网格。

BABYLON.SceneLoader.ImportMeshAsync("", "/relative path/", "myFile").then((result) => {
    result.meshes[1].position.x = 20;
    const myMesh1 = scene.getMeshByName("myMesh_1");
    myMesh1.rotation.y = Math.PI / 2;
});

        以下示例导入所有模型并更改其位置：

示例链接

示例代码：

<!DOCTYPE html>
<html>

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

    <title>Babylon.js sample code</title>
    <!-- Babylon.js -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.6.2/dat.gui.min.js"></script>
    <script src="https://preview.babylonjs.com/ammo.js"></script>
    <script src="https://preview.babylonjs.com/cannon.js"></script>
    <script src="https://preview.babylonjs.com/Oimo.js"></script>
    <script src="https://preview.babylonjs.com/earcut.min.js"></script>
    <script src="https://preview.babylonjs.com/babylon.js"></script>
    <script src="https://preview.babylonjs.com/materialsLibrary/babylonjs.materials.min.js"></script>
    <script src="https://preview.babylonjs.com/proceduralTexturesLibrary/babylonjs.proceduralTextures.min.js"></script>
    <script src="https://preview.babylonjs.com/postProcessesLibrary/babylonjs.postProcess.min.js"></script>
    <script src="https://preview.babylonjs.com/loaders/babylonjs.loaders.js"></script>
    <script src="https://preview.babylonjs.com/serializers/babylonjs.serializers.min.js"></script>
    <script src="https://preview.babylonjs.com/gui/babylon.gui.min.js"></script>
    <script src="https://preview.babylonjs.com/inspector/babylon.inspector.bundle.js"></script>
    <style>
        html,
        body {
            overflow: hidden;
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }

        #renderCanvas {
            width: 100%;
            height: 100%;
            touch-action: none;
        }
    </style>
</head>

<body>
    <canvas id="renderCanvas"></canvas>
    <script>
        var canvas = document.getElementById("renderCanvas");
        var startRenderLoop = function (engine, canvas) {
            engine.runRenderLoop(function () {
                if (sceneToRender && sceneToRender.activeCamera) {
                    sceneToRender.render();
                }
            });
        }
        var engine = null;
        var scene = null;
        var sceneToRender = null;
        var createDefaultEngine = function () {
            return new BABYLON.Engine(canvas, true, {
                preserveDrawingBuffer: true,
                stencil: true,
                disableWebGL2Support: false
            });
        };
        const createScene = function () {
            const scene = new BABYLON.Scene(engine);
            const camera = new BABYLON.ArcRotateCamera("camera", -Math.PI / 2, Math.PI / 2.5, 15, new BABYLON.Vector3(0, 0, 0));
            camera.attachControl(canvas, true);
            const light = new BABYLON.HemisphericLight("light", new BABYLON.Vector3(1, 1, 0));
            BABYLON.SceneLoader.ImportMeshAsync("", "https://assets.babylonjs.com/meshes/", "both_houses_scene.babylon").then((result) => {
                const house1 = scene.getMeshByName("detached_house");
                house1.position.y = 2;
                const house2 = result.meshes[2];
                house2.position.y = 1;
            });
            return scene;
        };
        window.initFunction = async function () {
            var asyncEngineCreation = async function () {
                try {
                    return createDefaultEngine();
                } catch (e) {
                    console.log(
                        "the available createEngine function failed. Creating the default engine instead"
                    );
                    return createDefaultEngine();
                }
            }
            window.engine = await asyncEngineCreation();
            if (!engine) throw 'engine should not be null.';
            startRenderLoop(engine, canvas);
            window.scene = createScene();
        };
        initFunction().then(() => {
            sceneToRender = scene
        });
        // Resize
        window.addEventListener("resize", function () {
            engine.resize();
        });
    </script>
</body>

</html>

设置您的第一个 Web 应用程序

        您已经发现所有案例都需要的公用代码是：

var createScene = function () {
    var scene = new BABYLON.Scene(engine);
    // 将相机添加到场景并将其附加到画布
    // 将光源添加到场景
    // Your Code
    return scene;
};

        通过遵循公用代码格式，您可以使用以下模板快速开发您的 Web 应用程序。

示例链接

示例代码：

<!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: 100%;
            height: 100%;
            touch-action: none;
        }
    </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>
</head>

<body>
    <!-- touch-action="none" 获得 PEP 的最佳结果 -->
    <canvas id="renderCanvas" touch-action="none"></canvas>
    <script>
        // 获取画布元素
        const canvas = document.getElementById("renderCanvas");
        // 生成 BABYLON 3D 引擎
        const engine = new BABYLON.Engine(canvas, true);
        // 在此处添加与公用代码格式类似的代码
        // 调用 createScene 函数
        const scene = createScene();
        // 注册渲染循环以重复渲染场景
        engine.runRenderLoop(function () {
            scene.render();
        });
        // 监视浏览器/画布调整尺寸事件
        window.addEventListener("resize", function () {
            engine.resize();
        });
    </script>
</body>

</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: 100%;
            height: 100%;
            touch-action: none;
        }
    </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>
</head>

<body>
    <!-- touch-action="none" 获得 PEP 的最佳结果 -->
    <canvas id="renderCanvas" touch-action="none"></canvas>
    <script>
        // 获取画布元素
        const canvas = document.getElementById("renderCanvas");
        // 生成 BABYLON 3D 引擎
        const engine = new BABYLON.Engine(canvas, true);
        // 在此处添加与公用代码格式类似的代码
        // 调用 createScene 函数
        const createScene = function () {
            const scene = new BABYLON.Scene(engine);
            BABYLON.SceneLoader.ImportMeshAsync("", "https://assets.babylonjs.com/meshes/", "box.babylon");
            const camera = new BABYLON.ArcRotateCamera("camera", -Math.PI / 2, Math.PI / 2.5, 15, new BABYLON.Vector3(0, 0, 0));
            camera.attachControl(canvas, true);
            const light = new BABYLON.HemisphericLight("light", new BABYLON.Vector3(1, 1, 0));
            return scene;
        };
        // 调用 createScene 函数
        const scene = createScene();
        // 注册渲染循环以重复渲染场景
        engine.runRenderLoop(function () {
            scene.render();
        });
        // 监视浏览器/画布调整尺寸事件
        window.addEventListener("resize", function () {
            engine.resize();
        });
    </script>
</body>

</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: 100%;
            height: 100%;
            touch-action: none;
        }
    </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>
</head>

<body>
    <!-- touch-action="none" 获得 PEP 的最佳结果 -->
    <canvas id="renderCanvas" touch-action="none"></canvas>
    <script>
        // 获取画布元素
        const canvas = document.getElementById("renderCanvas");
        // 生成 BABYLON 3D 引擎
        const engine = new BABYLON.Engine(canvas, true);
        // 在此处添加与公用代码格式类似的代码
        // 调用 createScene 函数
        const createScene = function () {
            const scene = new BABYLON.Scene(engine);
            BABYLON.SceneLoader.ImportMeshAsync("", "https://assets.babylonjs.com/meshes/", "box.babylon");
            const camera = new BABYLON.ArcRotateCamera("camera", -Math.PI / 2, Math.PI / 2.5, 15, new BABYLON.Vector3(0, 0, 0));
            camera.attachControl(canvas, true);
            const light = new BABYLON.HemisphericLight("light", new BABYLON.Vector3(1, 1, 0));
            return scene;
        };
        // 调用 createScene 函数
        const scene = createScene();
        // 注册渲染循环以重复渲染场景
        engine.runRenderLoop(function () {
            scene.render();
        });
        // 监视浏览器/画布调整尺寸事件
        window.addEventListener("resize", function () {
            engine.resize();
        });
    </script>
</body>

</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: 100%;
            height: 100%;
            touch-action: none;
        }
    </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>
</head>

<body>
    <!-- touch-action="none" 获得 PEP 的最佳结果 -->
    <canvas id="renderCanvas" touch-action="none"></canvas>
    <script>
        // 获取画布元素
        const canvas = document.getElementById("renderCanvas");
        // 生成 BABYLON 3D 引擎
        const engine = new BABYLON.Engine(canvas, true);
        // 在此处添加与公用代码格式类似的代码
        const createScene = function () {
            const scene = new BABYLON.Scene(engine);
            BABYLON.MeshBuilder.CreateBox("box", {})
            const camera = new BABYLON.ArcRotateCamera("camera", -Math.PI / 2, Math.PI / 2.5, 15, new BABYLON.Vector3(0, 0, 0));
            camera.attachControl(canvas, true);
            const light = new BABYLON.HemisphericLight("light", new BABYLON.Vector3(1, 1, 0));
            return scene;
        };
        // 调用 createScene 函数
        const scene = createScene();
        // 注册渲染循环以重复渲染场景
        engine.runRenderLoop(function () {
            scene.render();
        });
        // 监视浏览器/画布调整尺寸事件
        window.addEventListener("resize", function () {
            engine.resize();
        });
    </script>
</body>

</html>

猜你喜欢

转载自blog.csdn.net/ttod/article/details/143332279
今日推荐
周排行
浏览器的兼容问题[转]
WBS工作分解结构的说明与分解细则
写 链表 注意事项
nginx 配置转发
python环境变量、python当前工作目录。：：：：：：：：概念详解：：：：：：：：：
ubuntu mysql手动安装及简明配置
2018-11-14 MIDI音乐格式笔记学习
Hadoop HDFS 集群安全模式
2017-2018-2偏微分方程复习题解析7
息县装修“化妆台的选择”
每日归档
更多
2025-01-29(0)
2025-01-28(0)
2025-01-27(0)
2025-01-26(0)
2025-01-25(0)
2025-01-24(0)
2025-01-23(0)
2025-01-22(0)
2025-01-21(0)
2025-01-20(0)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022