Vue实现图形化积木式编程(三)

最新推荐文章于 2024-08-27 18:27:34 发布
最新推荐文章于 2024-08-27 18:27:34 发布
阅读量955 收藏
点赞数 2
文章标签： javascript vue.js node.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_41895625/article/details/119874775
版权

Babylon.js点击拖拽移动模型

路由

下一篇

历史回顾

前言

前段时间想要做一个web端的图形化积木式编程（类似少儿编程）的案例，网上冲浪了一圈又一圈，终于技术选型好，然后代码一顿敲，终于出来了一个雏形。

TIPS：该案例设计主要参考iRobot Coding,只用做学习用途，侵删。

https://code.irobot.com/#/

最终实现效果

最终实现效果

本文实现效果

  • 点击拖拽移动模型
    点击拖拽移动物体

完整代码

  • 点击拖拽移动物体
<template>
  <div style="height: 100%;width: 100%;">
    <div>
      <canvas id="renderCanvas"></canvas>
    </div>
  </div>
</template>

<script>
import * as BABYLON from 'babylonjs';
import * as BABYLON_MATERAIAL from "babylonjs-materials"

//全局变量
var scene = null //场景实例
var engine = null //3d引擎实例
var camera = null //摄像机实例
var plane = null //绿地
var ground = null //网格
var skybox = null //天空盒
var car = null //小车
var startingPoint = new BABYLON.Vector3(0, 0, 0)//当前点击位置

async function loadScene() {
  //场景初始化，可看文章一
  scene = initScene()

  //加载网络模型，可看文章二
  await initRobot()

  //本文内容，监听拖动事件，实现点击拖动模型
  dragListening()

  //开启debug窗口
  // scene.debugLayer.show()

}

//鼠标点击拖动监听
function dragListening() {
  // 物体拖拽事件
  var canvas = engine.getRenderingCanvas();

  var currentMesh;//当前点击的模型网格

  //判断当前点击对象是否是地板
  var getGroundPosition = function () {
    var pickinfo = scene.pick(scene.pointerX, scene.pointerY, function (mesh) {
      return (mesh == ground || mesh == plane);
    });
    if (pickinfo.hit) {
      return pickinfo.pickedPoint;
    }
    return null;
  }

  //鼠标点下
  var onPointerDown = function (evt) {
    if (evt.button !== 0) {
      return;
    }
    //判断当前是否点击一个模型网格，如果是地板、天空盒等对象，则设置hit为false
    var pickInfo = scene.pick(scene.pointerX, scene.pointerY, function (mesh) {
      return (mesh !== ground && mesh !== plane && mesh !== skybox);
    });
    console.log("pickInfo", pickInfo)
    //如果hit为true，则不为地板、天空盒等对象
    if (pickInfo.hit) {
      currentMesh = pickInfo.pickedMesh;//获取当前点击对象
      if (currentMesh.parent == null) {
        console.log("no parent")//没有父节点则就是car对象了
      } else if (currentMesh.parent.name == car.name) {
        //有父节点，证明现在点击的是子对象，而移动需要移动整个小车对象，所以设置当前点击mesh为父节点（即car对象）
        currentMesh = currentMesh.parent
      }
      console.log("currentMesh", currentMesh)
      //获取当前移动时地板的坐标
      startingPoint = getGroundPosition(evt);
      //移动物体时，暂时屏蔽相机的移动控制
      if (startingPoint) { // we need to disconnect camera from canvas
        setTimeout(function () {
          camera.detachControl(canvas);
        }, 0);
      }
    }
  }

  //鼠标点击着移动中
  var onPointerMove = function (evt) {
    if (!startingPoint) {
      return;
    }
    if (!currentMesh) {
      return;
    }
    //更新当前点击的地板位置
    var current = getGroundPosition(evt);
    if (!current) {
      return;
    }
    //更新当前小车坐标位置为点击的地板位置
    console.log('startingPoint', startingPoint)
    var diff = current.subtract(startingPoint);
    console.log('diff', diff)
    currentMesh.position.addInPlace(diff);
    console.log("currentMesh.name", currentMesh.name)
    //更新位置信息
    startingPoint = current;
  }

  //鼠标点击后松开
  var onPointerUp = function () {
    //恢复相机移动控制
    if (startingPoint) {
      camera.attachControl(canvas, true);
      startingPoint = null;
      return;
    }
  }

  //canvas绑定监听事件
  canvas.addEventListener("pointerdown", onPointerDown, false);
  canvas.addEventListener("pointerup", onPointerUp, false);
  canvas.addEventListener("pointermove", onPointerMove, false);
}


async function initRobot() {
  console.log('initRobot')
  //模型url路径
  const url = "http://localhost:8887/"
  //模型名称
  const modelName = "sportcar.babylon"
  var result = await BABYLON.SceneLoader.ImportMeshAsync(null, url, modelName, scene);
  var meshes = result.meshes
  console.log("meshes", meshes)
  //定义一个根节点
  var parent = new BABYLON.Mesh("car", scene);
  const scale = 10//缩放比例
  for (var mesh of meshes) {
    mesh.scaling = new BABYLON.Vector3(scale, scale, scale)
    mesh.parent = parent
  }
  //将根节点设置为全局变量
  car = parent


}

function initScene() {
  //获取到renderCanvas这个元素
  var canvas = document.getElementById("renderCanvas");
  //初始化引擎
  engine = new BABYLON.Engine(canvas, true);
  //初始化场景
  var scene = new BABYLON.Scene(engine);
  //注册一个渲染循环来重复渲染场景
  engine.runRenderLoop(function () {
    scene.render();
  });
  //浏览器窗口变化时监听
  window.addEventListener("resize", function () {
    engine.resize();
  });

  //相机初始化
  camera = new BABYLON.ArcRotateCamera("Camera", 0, 0, 5, new BABYLON.Vector3(0, 0, 10), scene);
  camera.setPosition(new BABYLON.Vector3(20, 200, 400));
  //相机角度限制
  camera.upperBetaLimit = 1.5;//最大z轴旋转角度差不多45度俯瞰
  camera.lowerRadiusLimit = 50;//最小缩小比例
  camera.upperRadiusLimit = 1500;//最大放大比例
  //变焦速度
  camera.wheelPrecision = 1; //电脑滚轮速度 越小灵敏度越高
  camera.pinchPrecision = 20; //手机放大缩小速度 越小灵敏度越高
  scene.activeCamera.panningSensibility = 100;//右键平移灵敏度
  // 将相机和画布关联
  camera.attachControl(canvas, true);

  //灯光初始化
  var light = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(0, 10, 0), scene);
  //设置高光颜色
  light.specular = new BABYLON.Color3(0, 0, 0);
  //设置灯光强度
  light.intensity = 1

  // 绿地初始化
  var materialPlane = new BABYLON.StandardMaterial("texturePlane", scene);
  materialPlane.diffuseColor = new BABYLON.Color3(152 / 255.0, 209 / 255.0, 115 / 255.0)
  materialPlane.backFaceCulling = false;
  materialPlane.freeze()
  plane = BABYLON.MeshBuilder.CreateDisc("ground", {radius: 3000}, scene);
  plane.rotation.x = Math.PI / 2;
  plane.material = materialPlane;
  plane.position.y = -0.1;
  plane.freezeWorldMatrix()

  //网格地板初始化
  const groundSide = 144;
  ground = BABYLON.Mesh.CreateGround("ground", groundSide, groundSide, 1, scene, true);
  var groundMaterial = new BABYLON_MATERAIAL.GridMaterial("grid", scene);
  groundMaterial.mainColor = BABYLON.Color3.White();//底板颜色
  groundMaterial.alpha = 1;//透明度
  const gridLineGray = 0.95;
  groundMaterial.lineColor = new BABYLON.Color3(gridLineGray, gridLineGray, gridLineGray);
  groundMaterial.backFaceCulling = true; // 可看到背面
  //大网格间距
  groundMaterial.majorUnitFrequency = 16;
  //小网格间距
  groundMaterial.minorUnitVisibility = 0;
  const gridOffset = 8; // 网格偏移量
  groundMaterial.gridOffset = new BABYLON.Vector3(gridOffset, 0, gridOffset);
  groundMaterial.freeze(); // 冻结材质，优化渲染速度
  ground.material = groundMaterial
  ground.freezeWorldMatrix()

  //天空盒初始化
  var skyMaterial = new BABYLON_MATERAIAL.SkyMaterial("skyMaterial", scene);
  skyMaterial.inclination = 0
  skyMaterial.backFaceCulling = false;
  skybox = BABYLON.Mesh.CreateBox("skyBox", 5000.0, scene);
  skybox.material = skyMaterial;

  return scene
}


export default {
  name: "test",
  data() {
    return {}
  },
  async mounted() {
    //加载场景
    await loadScene()
  },
}
</script>

<style scoped>
#renderCanvas {
  width: 680px;
  height: 680px;
  touch-action: none;
  z-index: 10000;
  border-radius: 10px;
}
</style>

代码分解

本文要实现的功能比较简单，分解来看就是
1、监听点击落下，判断当前对象是否是可移动对象，如果是则将其设置为当前移动对象，并禁用摄像头控制
2、监听点击移动过程，获取点击移动过程中点击地板的位置，更新该位置为小车当前位置
3、监听点击松开，恢复摄像头控制

0.公用属性和函数

  // 物体拖拽事件
  var canvas = engine.getRenderingCanvas();

  var currentMesh;//当前点击的模型网格

  //判断当前点击对象是否是地板
  var getGroundPosition = function () {
    var pickinfo = scene.pick(scene.pointerX, scene.pointerY, function (mesh) {
      return (mesh == ground || mesh == plane);
    });
    if (pickinfo.hit) {
      return pickinfo.pickedPoint;
    }
    return null;
  }

1.点击落下处理

  //鼠标点下
  var onPointerDown = function (evt) {
    if (evt.button !== 0) {
      return;
    }
    //判断当前是否点击一个模型网格，如果是地板、天空盒等对象，则设置hit为false
    var pickInfo = scene.pick(scene.pointerX, scene.pointerY, function (mesh) {
      return (mesh !== ground && mesh !== plane && mesh !== skybox);
    });

    console.log("pickInfo", pickInfo)

    //如果hit为true，则不为地板、天空盒等对象
    if (pickInfo.hit) {
      currentMesh = pickInfo.pickedMesh;//获取当前点击对象
      if (currentMesh.parent == null) {
        console.log("no parent")//没有父节点则就是car对象了
      } else if (currentMesh.parent.name == car.name) {
        //有父节点，证明现在点击的是子对象，而移动需要移动整个小车对象，所以设置当前点击mesh为父节点（即car对象）
        currentMesh = currentMesh.parent
      }

      console.log("currentMesh", currentMesh)

      //获取当前移动时地板的坐标
      startingPoint = getGroundPosition(evt);

      //移动物体时，暂时屏蔽相机的移动控制
      if (startingPoint) { // we need to disconnect camera from canvas
        setTimeout(function () {
          camera.detachControl(canvas);
        }, 0);
      }
    }
  }

2.点击移动过程处理

  //鼠标点击着移动中
  var onPointerMove = function (evt) {
    if (!startingPoint) {
      return;
    }
    if (!currentMesh) {
      return;
    }
    //更新当前点击的地板位置
    var current = getGroundPosition(evt);

    if (!current) {
      return;
    }
    //更新当前小车坐标位置为点击的地板位置
    console.log('startingPoint', startingPoint)
    var diff = current.subtract(startingPoint);
    console.log('diff', diff)
    currentMesh.position.addInPlace(diff);
    console.log("currentMesh.name", currentMesh.name)
    //更新位置信息
    startingPoint = current;
  }

3.点击松开处理

  //鼠标点击后松开
  var onPointerUp = function () {
    //恢复相机移动控制
    if (startingPoint) {
      camera.attachControl(canvas, true);
      startingPoint = null;
      return;
    }
  }

4.绑定鼠标监听事件

  //canvas绑定监听事件
  canvas.addEventListener("pointerdown", onPointerDown, false);
  canvas.addEventListener("pointerup", onPointerUp, false);
  canvas.addEventListener("pointermove", onPointerMove, false);

后续计划

Babylon.js

  • 自定义启动界面
  • 物体重力效果
  • babylonjs-gui 按钮实现
  • babylonjs+ammojs 碰撞体实现
  • 将3d界面放入可拖动窗口中

Blockly

  • 入门使用blockly
  • 自定义block块
  • blockly第三方组件使用
  • 接入js-interpreter，步骤运行block块
  • …(想到啥写啥)

开源项目GitHub链接

https://github.com/Wenbile/Child-Programming-Web

资源下载链接

你的点赞是我继续编写的动力

温温温B
关注
bms-web：typescript + vue开发的积木（可视化页面构建）系统的UI端项目
02-04
项目简介 目标是逐步的解放前端改进，提高页面模块的替代率，并充分利用运营人员根据自身需要建设，维护，发布页面的能力。 bms-web为积木系统的UI端项目，服务端（ bms-server ）项目尚未开放，并且，对于前端开发者进行页面模块开发的工具尚未开发完成，等后续开发完成以后会一并公开 备注：积木系统在我们公司已经上线，上线3个月，生产了300多个页面，近期在跟公司老板商量开源放置，期待能帮助到更多的人 特色 使用vue框架，告别琐碎操作dom的时代 使用ts框架，拥抱强类型时代 面向对象，面向接口编程，运用项目业务逻辑更清晰，扩展更好，维护更方便 加入依赖注入，增强功能依赖于接口，而不依
vue3 + Babylon.js 构建Web 3D场景
通达的博客
02-12 2422
vue3 + Babylon.js 构建web 3D场景。
基于VUE+TS，使用babylonJs搭建三维场景
最新发布
jnfy的博客
08-27 855
基于VUE+TS，使用babylonJs搭建三维场景
Vue实现图形化积木式编程（一）
温温温B的博客
08-23 3515
Babylon.js基础场景搭建前言最终实现效果本文实现效果技术选型1.前端2.后端完整代码代码分解0.npm安装相关依赖1.引入模块2.场景初始化3.ArcRotateCamera 相机初始化4.灯光初始化5.地面初始化5-1. 绿地5-2.网格地面6.正方体物体初始化7.天空盒初始化后续计划Babylon.jsBlockly你的点赞是我继续编写的动力 前言 前段时间想要做一个web端的模块化编程（类似少儿编程）的案例，网上冲浪了一圈又一圈，终于技术选型好，然后代码一顿敲，终于出来了一个雏形。 TIPS：
探索3D世界：Vue与Babylon.js的完美结合 - Vue-BabylonJS
gitblog_00061的博客
04-18 571
探索3D世界：Vue与Babylon.js的完美结合 - Vue-BabylonJS 项目地址:https://gitcode.com/Beg-in/vue-babylonjs 本文将引导您深入了解一个创新项目——Vue-BabylonJS，它是一个强大的框架，将Vue.js的简洁性和Babylon.js的高效3D渲染能力融为一体，让前端开发人员能够轻松构建引人入胜的3D交互式应用。 项目简介 V...
Vue3 +TypeScript 引入 BabylonJs（Vue3实现3D）【一篇文章精通系列】
程序员猫爪
05-02 3446
本文主要介绍如何使用Vue3和TypeScript引入BabylonJs技术实现3D效果。结合实际案例，详细讲解了如何在Vue3项目中引入BabylonJs，并了解其相关知识。通过本文的学习，相信读者可以轻松掌握Vue3实现3D效果以及BabylonJs的相关知识。
Vue实现图形化积木式编程Vue前端源码
08-31
在本项目中，“Vue实现图形化积木式编程Vue前端源码”是一个针对少儿编程教育的前端应用。这个开源项目采用了一系列先进的技术和框架，旨在创建一个互动性强、易上手的编程学习环境。以下是该项目涉及的主要知识点：...
Vue实现图形化积木式编程Thinkjs后端源码
08-31
【Vue实现图形化积木式编程Thinkjs后端源码】是一个专为少儿编程教育设计的后端系统，它利用了现代Web开发技术栈，包括JavaScript、Node.js、ThinkJS框架以及MySQL数据库，来构建一个高效、可扩展的平台。...
vue-springboot基于Java的scratch学习网站系统的设计与实现论文+答辩ppt.rar
02-09
它通过拖拽积木式的编程语块，使孩子们能轻松地创建交互式故事、动画、游戏等。 4. **Web应用设计**: 设计一个学习网站系统，需要考虑用户体验、界面设计、功能模块划分，如登录注册、课程分类、视频教程、编程实践...
交互式可视化编程技巧
交互式可视化编程是一种将编程和可视化技术结合起来的开发方式，通过图形化界面和用户交互，实现对程序的开发和操作。本章将介绍交互式可视化编程的基本概念、工具与平台的介绍以及在实际应用中的优势与局限性分析。...
【Blockly开发教程】05 积木块基础概念（上）
Bright的博客
05-20 1082
通过本文，你将了解积木块有哪些类型、如何定义、有什么组成。
Vue 3/vite中使用babylon.js记录
weixin_44609842的博客
03-21 705
时，Vue 会将其中的代码转换为 Render 函数，类似于 Vue 2 中的 render() 函数。这样做的好处是可以更好地优化组件的性能。的原理是将其中的代码转换为 Render 函数，并通过自动注入变量和方法的方式简化了组件的编写和管理，提高了代码的可读性和维护性。，可以将组件的设置、响应式变量声明和方法定义都放在一个地方，使得组件逻辑更加清晰和紧凑。中的方法会被自动绑定到组件实例上，可以直接在模板中使用而无需额外的操作。中声明的变量和方法会自动注入到模板中，无需额外的导入或暴露。
Vue实现图形化积木式编程(十三)
温温温B的博客
09-13 3802
Blockly步骤运行代码块高亮
Vue实现图形化积木式编程(十一)
温温温B的博客
07-07 1406
Blockly插件使用
Blockly-图形化编程工具
热门推荐
顺其自然~专栏
07-23 1万+
Blockly是一个完全可视化的模块化编程网站，属于图形化编程语言。 2012年6月，Google发布了完全可视化的编程语言Google Blockly，类似MIT的儿童编程语言Scratch， 你可以通过类似玩乐高玩具的方式用一块块图形对象构建出应用程序。每个图形对象都是代码块，你可以将它们拼接起来，创造出简单功能，然后将一个个简单功能组合起来，构建出一个程序。整个过程只需要鼠标的拖曳，不需要键盘敲击。类似Google最近放弃的App Inventor，不清楚Blockly与App Inventor或S
vue + babylonjs 测试
qq_28510897的博客
10-20 2538
新建 vue 项目 vue create babylonjs-vue-app 安装 babylon.js yarn add @babylonjs/core 在根组件 App.vue 测试，测试用例来源 迈出第一步-让babylon运行起来 注意：所有代码写在 mounted() 内，vue 示例挂载后，dom 元素渲染后才能获取 <template> <canvas id="renderCanvas"></canvas> </template&g.
BabylonJS + Vue 构建 风场场景 （三）
haibalai2009的博客
11-21 106
函数用于将表示球体上的点的 3D 矢量转换为其相应的纬度和经度坐标。基础类 ComputeClass 负责坐标计算和一些空间运算和颜色计算。BabylonJS + Vue 构建 风场场景 （三） － 小专栏。请不要单独购买，在终章会放出静态文件，目前只是放出代码。
Vue实现图形化积木式编程(十)
温温温B的博客
10-24 2946
Blockly自定义块
GUI——图形化编程
ShiZaolin的博客
02-12 400
案例1:创建一个窗口并显示 //创建窗口对象并设置标题 Frame window=new Frame("我是一个窗口"); //设置窗口大小 window.setSize(500,500); //设置窗口显示位置 window.setLocation(200,200); //设置程序图标 window.setIconImage(Toolkit.getDefaultToolkit().createI...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

温温温B

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值