- /** 说明:创建App,url为园区地址(可选)
- * 使用App创建打开的三维空间我们称之为“场景”(scene)。场景包含地球、园区、模型等。
- * 创建App时,传入的url就是园区的地址,不传url则创建一个空的场景。园区可在CampusBuilder
- * 中创建编辑,有两种方法可以将园区添加到线上资源面板,方法如下:
- * 1. 园区保存后,会自动同步到网页同一账号下
- * 2. 园区保存后,导出tjs文件,在园区资源面板上传
- * 上面两种方式生成的园区资源均可在资源面板中双击自动生成脚本
- * 难度:★☆☆☆☆
- **/
- // 加载场景代码
- var app = new THING.App({
- url: 'https://www.thingjs.com/static/models/factory', // 场景地址
- background: '#000000',
- env: 'Seaside',
- });
- app.on('load', function (ev) {
- app.level.change(ev.campus)
- let car01 = app.query('car01')[0]
- let car02 = app.query('car02')[0]
- car01.style.boundingBox = true
- car02.style.boundingBox = true
- // crash(car01, car02)
- car02.draggable = true
- // 通过调用crashTest(物体对象1,物体对象2) 的返回值判断是否碰撞
- // setInterval(function () {
- // crashTest(car01, car02)
- // }, 1000)
- })
- /**
- * 碰撞监测
- * 如何使用JavaScript实现包围盒检测,以判断两个梯形体是否相交。
- * 通过计算梯形体的包围盒,并检测包围盒在三个轴上的投影是否相交,从而判断梯形体是否相交。
- * return true:碰撞 false:不碰撞
- * */
- function crashTest(obj1, obj2) {
- let points1 = obj1.getBoundingBox().points
- let points2 = obj2.getBoundingBox().points
- // 获取x轴方向上的坐标值
- let xValues = [...new Set(points1.map(point => point[0].toFixed(3)))];
- // 获取y轴方向上的坐标值
- let yValues = [...new Set(points1.map(point => point[1].toFixed(3)))];
- // 获取z轴方向上的坐标值
- let zValues = [...new Set(points1.map(point => point[2].toFixed(3)))];
- // 获取x轴方向上的坐标值
- let xValues2 = [...new Set(points2.map(point => point[0].toFixed(3)))];
- // 获取y轴方向上的坐标值
- let yValues2 = [...new Set(points2.map(point => point[1].toFixed(3)))];
- // 获取z轴方向上的坐标值
- let zValues2 = [...new Set(points2.map(point => point[2].toFixed(3)))];
- let box1 = getBoundingBox(xValues, yValues, zValues);
- let box2 = getBoundingBox(xValues2, yValues2, zValues2);
- // 检测两个梯形体是否相交
- if (isBoundingBoxIntersect(box1, box2)) {
- console.log("两个梯形体相交");
- return true
- } else {
- console.log("两个梯形体不相交");
- return false
- }
- }
- // 定义梯形体的包围盒
- function getBoundingBox(xValues, yValues, zValues) {
- // 根据梯形体的顶点坐标计算包围盒的最小和最大坐标
- let minX = Math.min(xValues[0], xValues[1]);
- let minY = Math.min(yValues[0], yValues[1]);
- let minZ = Math.min(zValues[0], zValues[1]);
- let maxX = Math.max(xValues[0], xValues[1]);
- let maxY = Math.max(yValues[0], yValues[1]);
- let maxZ = Math.max(zValues[0], zValues[1]);
- return {
- min: { x: minX, y: minY, z: minZ },
- max: { x: maxX, y: maxY, z: maxZ }
- };
- }
- // 检测两个包围盒是否相交
- function isBoundingBoxIntersect(box1, box2) {
- // 判断两个包围盒在三个轴上的投影是否相交
- if (box1.max.x < box2.min.x || box1.min.x > box2.max.x) return false;
- if (box1.max.y < box2.min.y || box1.min.y > box2.max.y) return false;
- if (box1.max.z < box2.min.z || box1.min.z > box2.max.z) return false;
- return true;
- }
复制代码
|
|
|
|
|
|