如何在網頁中嵌入設計好的模型？
接上回繼續，我們設計好精美的模型後，最終總要展示給客戶，比如利用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時，注意下目錄的相對位置（參考下圖）
在線地址：https://yjmyzz.github.io/babylon_js_study/day02/03.html
參考文檔：
https://doc.babylonjs.com/features/introductionToFeatures/chap1/first_import