路由
下一篇
历史回顾
Babylon.js部分
- Vue实现图形化积木式编程(一) ---- Babylon.js基础场景搭建
- Vue实现图形化积木式编程(二) ---- Babylon.js加载模型到场景中
- Vue实现图形化积木式编程(三) ---- Babylon.js点击拖拽移动模型
- Vue实现图形化积木式编程(四) ---- Babylon.js实现碰撞效果
- Vue实现图形化积木式编程(五) ---- Babylon.js自定义启动界面
- Vue实现图形化积木式编程(六) ---- Babylon.js相机控制与相机动画
- Vue实现图形化积木式编程(七) ---- babylonjs-gui 按钮实现
- Vue实现图形化积木式编程(八) ---- 将3d界面放入可拖动窗口中
Blockly部分
前言
一年前想要做一个web端的图形化积木式编程(类似少儿编程)的案例,当时只是觉得积木模块和3D引擎都是我没有接触过的领域,能把它们结合起来做一个类似游戏案例挺有意思的。
现在回过头来看,在公司接触了流程自动化、HTML网页图文编辑、视频模版自动化等底代码平台的学习和开发之后,我觉得这是低代码的一种表现形式,也是我觉得喜欢和想要坚持的道路。
系统还不够完善,任重而道远。当然啦,停更这么久了,终于闲下来了,还是想要把未完待续给继续下去。这篇文章虽然内容很短,但是算是我重启博客之旅的开始吧哈哈哈哈哈。🏃🏃♀️🏃🏃♀️
TIPS:该案例设计主要参考iRobot Coding,只用做学习用途,侵删。
最终实现效果
本文内容
- Blockly自定义块插件使用,本项目使用的
@blockly/fixed-edges
插件,用于固定左上角边缘。
安装
- 安装使用
npm i @blockly/插件名称
使用
- 具体使用可查看 插件集合,
fixed-edges
插件使用方法如下。
import * as Blockly from 'blockly';
import {FixedEdgesMetricsManager} from '@blockly/fixed-edges';//导入插件
// 配置插件属性,固定左上角
FixedEdgesMetricsManager.setFixedEdges({
top: true,
left: true,
});
//注入blockly
const workspace = Blockly.inject('blocklyDiv', {
toolbox: toolboxCategories,
//配置插件
plugins: {
metricsManager: FixedEdgesMetricsManager,
},
});
后续计划
- 小车控制方法的封装
- 接入js-interpreter,步骤运行block块