babylon.js 学习笔记(2)
如何在网页中嵌入设计好的模型？
接上回继续，我们设计好精美的模型后，最终总要展示给客户，比如利用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)的更多相关文章
- js学习笔记：webpack基础入门（一）
之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...
- Vue.js学习笔记（2）vue-router
vue中vue-router的使用:
- JS 学习笔记--9---变量-作用域-内存相关
JS 中变量和其它语言中变量最大的区别就是,JS 是松散型语言,决定了它只是在某一个特定时间保存某一特定的值的一个名字而已.由于在定义变量的时候不需要显示规定必须保存某种类型的值,故变量的值以及保存的 ...
- WebGL three.js学习笔记 使用粒子系统模拟时空隧道（虫洞）
WebGL three.js学习笔记 使用粒子系统模拟时空隧道 本例的运行结果如图: 时空隧道demo演示 Demo地址:https://nsytsqdtn.github.io/demo/sprite ...
- WebGL three.js学习笔记 法向量网格材质MeshNormalMaterial的介绍和创建360度全景天空盒的方法
WebGL学习----Three.js学习笔记(5) 点击查看demo演示 Demo地址:https://nsytsqdtn.github.io/demo/360/360 简单网格材质 MeshNor ...
- WebGL three.js学习笔记 创建three.js代码的基本框架
WebGL学习----Three.js学习笔记(1) webgl介绍 WebGL是一种3D绘图协议,它把JavaScript和OpenGL ES 2.0结合在一起,通过增加OpenGL ES 2.0的 ...
- vue.js 学习笔记3——TypeScript
目录 vue.js 学习笔记3--TypeScript 工具 基础类型 数组 元组 枚举 字面量 接口 类类型 类类型要素 函数 函数参数 this对象和类型 重载 迭代器 Symbol.iterat ...
- 2019-4-29 js学习笔记
js学习笔记一:js数据类型 1:基本数据类型 number类型(整数,小数) String类型 boolean类型 NaN类型其实是一个nu ...
- 一点感悟：《Node.js学习笔记》star数突破1000+
写作背景 笔者前年开始撰写的<Node.js学习笔记> github star 数突破了1000,算是个里程碑吧. 从第一次提交(2016.11.03)到现在,1年半过去了.突然有些感慨, ...
- JS学习笔记5_DOM
1.DOM节点的常用属性(所有节点都支持) nodeType:元素1,属性2,文本3 nodeName:元素标签名的大写形式 nodeValue:元素节点为null,文本节点为文本内容,属性节点为属性 ...
随机推荐
- 解析异步消息加上(→_→)@SuppressLint("HandlerLeak")
在主线程又Handler处理消息出现时这样写会有警告 private Handler handler = new Handler(){ @Override public void handleMess ...
- HUAWEI USG6505E 如何使用光电互斥口
1.display ip interface brief 2.display int g0/0/4 查看端口 是否为光电互斥口,并确定端口当前状态 Copper 电口 Fiber 光口 3.inte ...
- Linux内核中断irq.h头文件找不到的问题
头文件 在vscode中,进行tasklet和work中断实验的时候,对于包含的头文件如下两个一直爆红: #include <linux/irq.h> #include <linux ...
- 多数据库迁移的艺术：Alembic在复杂环境中的精妙应用
title: 多数据库迁移的艺术:Alembic在复杂环境中的精妙应用 date: 2025/05/11 00:35:52 updated: 2025/05/11 00:35:52 author: c ...
- docker中源码安装onnx / tvm
docker安装 可自行到https://tvm.apache.org/docs/install/docker.html 官网下载安装 环境: 系统: ubuntu22.04系统, docker版本: ...
- Docker不装C盘
Docker默认安装在C盘,这未来随着docker使用必定会导致C盘空间吃紧.所以本文提前进行空间布局,将docker默认安装路径软链接到D盘.软链接D盘Docker默认安装路径为C:\Program ...
- WebSocket 实时通信（二）
WebSocket 即时消息推送系统 1. 项目概述 1.1 项目背景 在现代 Web 应用中,实时通信功能越来越重要,例如在线聊天.实时通知.股票行情更新等.本项目基于 WebSocket 技术,构 ...
- ActiveMQ消息投递方式之异步投递【转】
ActiveMQ消息投递方式一共有四种:同步投递.异步投递.延迟投递和定时投递. 同步发送:消息生产者使用持久(Persistent)传递模式发送信息的时候,Producer.send()方法会被阻塞 ...
- Python 设置国内镜像
从Python官网下载.安装python之后(不建议使用brew安装python3) MacOS :打开/User/xxx/.config/pip/pip.conf Windows:打开%APPDAT ...
- 「Note」Linux 命令行
ls 查询目录. -l 详细目录. cd 跳转位置. . 当前目录(原地 TP). .. 父级目录. diff 比较不同. g++ 1.cpp -o 1 -g -Wall 编译. ./1 运行.