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

接上回继续，我们设计好精美的模型后，最终总要展示给客户，比如利用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

babylon.js 学习笔记(2)的更多相关文章

  1. js学习笔记：webpack基础入门（一）

    之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...

  2. Vue.js学习笔记（2）vue-router

    vue中vue-router的使用:

  3. JS 学习笔记--9---变量-作用域-内存相关

    JS 中变量和其它语言中变量最大的区别就是,JS 是松散型语言,决定了它只是在某一个特定时间保存某一特定的值的一个名字而已.由于在定义变量的时候不需要显示规定必须保存某种类型的值,故变量的值以及保存的 ...

  4. WebGL three.js学习笔记 使用粒子系统模拟时空隧道（虫洞）

    WebGL three.js学习笔记 使用粒子系统模拟时空隧道 本例的运行结果如图: 时空隧道demo演示 Demo地址:https://nsytsqdtn.github.io/demo/sprite ...

  5. WebGL three.js学习笔记 法向量网格材质MeshNormalMaterial的介绍和创建360度全景天空盒的方法

    WebGL学习----Three.js学习笔记(5) 点击查看demo演示 Demo地址:https://nsytsqdtn.github.io/demo/360/360 简单网格材质 MeshNor ...

  6. WebGL three.js学习笔记 创建three.js代码的基本框架

    WebGL学习----Three.js学习笔记(1) webgl介绍 WebGL是一种3D绘图协议,它把JavaScript和OpenGL ES 2.0结合在一起,通过增加OpenGL ES 2.0的 ...

  7. vue.js 学习笔记3——TypeScript

    目录 vue.js 学习笔记3--TypeScript 工具 基础类型 数组 元组 枚举 字面量 接口 类类型 类类型要素 函数 函数参数 this对象和类型 重载 迭代器 Symbol.iterat ...

  8. 2019-4-29 js学习笔记

    js学习笔记一:js数据类型   1:基本数据类型       number类型(整数,小数)      String类型          boolean类型        NaN类型其实是一个nu ...

  9. 一点感悟：《Node.js学习笔记》star数突破1000+

    写作背景 笔者前年开始撰写的<Node.js学习笔记> github star 数突破了1000,算是个里程碑吧. 从第一次提交(2016.11.03)到现在,1年半过去了.突然有些感慨, ...

  10. JS学习笔记5_DOM

    1.DOM节点的常用属性(所有节点都支持) nodeType:元素1,属性2,文本3 nodeName:元素标签名的大写形式 nodeValue:元素节点为null,文本节点为文本内容,属性节点为属性 ...

随机推荐

  1. 使用IDEA管理服务器Docker及远程仓库

    目录 配置连接Docker服务器及远程仓库 连接服务器Docker 远程仓库(可选) IDEA管理 确保docker服务器已经开启了远程守护进程访问.[1] 配置连接Docker服务器及远程仓库 连接 ...

  2. linux 安装jdk8

    参考:https://www.cnblogs.com/raoyulu/p/13265419.html 一.卸载现用的JDK 1.查看Linux自带的JDK是否已安装 查看是否安装openjdk jav ...

  3. mysql开启关闭服务

    windows: net start mysql net stop mysql centos: --开启服务 service mysqld start --关闭服务 service mysqld st ...

  4. HarmonyOS NEXT开发实战教程-记账app

    今天分享的实战教程是一款记账app,最近分享的项目都是纯页面,没有服务端,没有数据接口,因为鸿蒙开发主要就是写页面,都是前端嘛.如果有友友想要完整的项目可以找幽蓝君定制,想学服务端开发的话幽蓝君也可以 ...

  5. SQL 月同环比 日期 T+1 自动计算

    对于离线数据的分析, 数据通常是 T+1 的, 即所有数据更新都是到 "昨天". 对于这样的同环比能自动计算是很需要的. -- 以Mysql为例: -- 今天: 2022/3/1 ...

  6. Java应用出现 Public Key Retrieval is not allowed 报错的常见原因和解决方法

    问题现象 Java 应用在运行过程中突然报java.sql.SQLNonTransientConnectionException: Public Key Retrieval is not allowe ...

  7. C++强制类型转换运算符（static_cast、reinterpret_cast、const_cast和dynamic_cast）

    C++ 引入了四种功能不同的强制类型转换运算符以进行强制类型转换:static_cast.reinterpret_cast.const_cast和dynamic_cast,当然C++为保持与C的兼容, ...

  8. ASP.NET Core 之路由相关

    ASP.NET Core中路由的过程:routing middleware把传入的url与一系列模板进行比对,选择相应的endpoint handler,并将其记录在HttpContext上的requ ...

  9. 电脑tips #持续更新ing

    记录日常get 1. Esc+ Fn 打开与锁住F1到F12功能键们 2. 没有找到支持的视频格式和MIME类型 场景:发生在网页嵌入的视频中 原因及解决:--网速不好,重新刷新解决 3. 问题描述: ...

  10. 【最新】MySQL 5.6 保姆级安装详细教程

    MySQL5.6简介 MySQL 5.6 是 MySQL 数据库管理系统的一个重要版本,以其稳定性.性能优化和功能扩充受到广泛关注与使用.该版本在数据库领域中提供了更加高效的数据处理能力.增强的复制功 ...