用Babylon.js 滑动屏幕画图形,签字等

介绍

在上篇文章中我们已经了解到了该游戏引擎的基本搭建过程。比如灯光,摄像头,场景、事件监听等。这里我就不做多介绍。运用以上知识点。我们此时做一个小游戏画图。

效果图

源代码

1.先监听事件是否碰撞到了画板

2.然后判断动作,手指按住屏幕,松开屏幕,滑动屏幕。

3.将点坐标存储起来,将所有线存储起来

4.滑动屏幕时,先把线删除掉,然后根据存储的点坐标重新连线,防止每次重复画线。

5.松开屏幕则将存储的点与线重新创建一个数组存储。

核心代码如下:

var points = []; // 存储所有点的位置
var lines = []; // 存储所有线段的模型
let allData = [{ lines: [], points: [] }] // 所有数据
points = allData[0].points
lines = allData[0].lines
let isDown = false // 是否按下
let isEnd = false
// 对场景添加鼠标点击事件
scene.value.onPointerObservable.add((eventData) => {
    // 射线投射,用于检测鼠标点击的是场景的哪一部分
    var ray = scene.value.createPickingRay(scene.value.pointerX, scene.value.pointerY, BABYLON.Matrix.
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

打赏作者

web前端神器

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

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

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

打赏作者

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

抵扣说明:

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

余额充值