鼠标点击其中一扇门时,另外一扇也同时开启或关闭

效果如图

双开门playground地址:

Babylon.js Playgroundhttps://playground.babylonjs.com/#5F7R3K

主要思路为使用combineAction绑定了多个模型的鼠标事件,顺便多绑定一个箱子做放大缩小测试

let combineOpenDoorAction  = new BABYLON.CombineAction(BABYLON.ActionManager.OnPickTrigger,[new BABYLON.InterpolateValueAction(BABYLON.ActionManager.OnPickTrigger, _leftDoorMesh, "rotation.y",-Math.PI/2 , 1500),new BABYLON.InterpolateValueAction(BABYLON.ActionManager.OnPickTrigger, _rightDoorMesh, "rotation.y",Math.PI/2 , 1500),new BABYLON.ExecuteCodeAction(BABYLON.ActionManager.OnPickTrigger, function (e) {// alert(e.source.id +"combineOpenDoorAction");_triggerMesh.scaling = new BABYLON.Vector3(1.5,1.5,1.5);_triggerMesh.position.y = 2;})]);

Playground代码如下

var createScene = function () {var scene = new BABYLON.Scene(engine);// Lightsvar light0 = new BABYLON.DirectionalLight("Omni", new BABYLON.Vector3(-2, 2, 2), scene);var light1 = new BABYLON.PointLight("Omni", new BABYLON.Vector3(2, 12, -15), scene);// Need a free camera for collisionsvar camera = new BABYLON.FreeCamera("FreeCamera", new BABYLON.Vector3(0, 2.2, -16), scene);camera.setTarget(new BABYLON.Vector3(0, 0, 0));camera.attachControl(canvas, true);camera.keysUp.push(87);camera.keysDown.push(83);camera.keysLeft.push(65);camera.keysRight.push(68);camera.speed=0.5;camera.inertia =0.8;camera.minZ=0.05;//limitscene.registerBeforeRender(function () {    console.log(camera.rotation.x);if(camera.rotation.x>0.5  ){//look downcamera.rotation.x = 0.5;}else if(camera.rotation.x<-0.3){//look upcamera.rotation.x = -0.3;}})//Simple cratevar box = BABYLON.Mesh.CreateBox("crate", 2, scene);box.material = new BABYLON.StandardMaterial("Mat", scene);box.material.diffuseTexture = new BABYLON.Texture("textures/crate.png", scene);box.material.diffuseTexture.hasAlpha = true;box.position = new BABYLON.Vector3(5, 1, 0);var doorMeshLeft = BABYLON.MeshBuilder.CreateBox("doorMeshLeft", {height: 4, width: 2, depth: 0.25});doorMeshLeft.position = new BABYLON.Vector3(-1, 2, 0);doorMeshLeft.setPivotPoint(new BABYLON.Vector3(-1, 0, 0), BABYLON.Space.LOCAL);// pivot offset x  var doorMeshRight = BABYLON.MeshBuilder.CreateBox("doorMeshRight", {height: 4, width: 2, depth: 0.25});doorMeshRight.position = new BABYLON.Vector3(1, 2, 0);doorMeshRight.setPivotPoint(new BABYLON.Vector3(2, 2, 0), BABYLON.Space.WORLD);// pivot offset x  openDoubleDoorRegAction(doorMeshLeft,doorMeshRight,box);/*** open double doors* */
function openDoubleDoorRegAction(_leftDoorMesh,_rightDoorMesh,_triggerMesh){_leftDoorMesh.rotationQuaternion = null;_rightDoorMesh.rotationQuaternion = null;_leftDoorMesh.checkCollisions = false;_rightDoorMesh.checkCollisions = false;let combineOpenDoorAction  = new BABYLON.CombineAction(BABYLON.ActionManager.OnPickTrigger,[new BABYLON.InterpolateValueAction(BABYLON.ActionManager.OnPickTrigger, _leftDoorMesh, "rotation.y",-Math.PI/2 , 1500),new BABYLON.InterpolateValueAction(BABYLON.ActionManager.OnPickTrigger, _rightDoorMesh, "rotation.y",Math.PI/2 , 1500),new BABYLON.ExecuteCodeAction(BABYLON.ActionManager.OnPickTrigger, function (e) {// alert(e.source.id +"combineOpenDoorAction");_triggerMesh.scaling = new BABYLON.Vector3(1.5,1.5,1.5);_triggerMesh.position.y = 2;})]);let combineCloseDoorAction  = new BABYLON.CombineAction(BABYLON.ActionManager.OnPickTrigger,[new BABYLON.InterpolateValueAction(BABYLON.ActionManager.OnPickTrigger, _leftDoorMesh, "rotation.y",0 , 1500),new BABYLON.InterpolateValueAction(BABYLON.ActionManager.OnPickTrigger, _rightDoorMesh, "rotation.y",0 , 1500),new BABYLON.ExecuteCodeAction(BABYLON.ActionManager.OnPickTrigger, function (e) {// alert(e.source.id +"combineCloseDoorAction");_triggerMesh.scaling = new BABYLON.Vector3(1,1,1);_triggerMesh.position.y = 1;})]);let doorActionManager = new BABYLON.ActionManager(scene);doorActionManager.registerAction(combineOpenDoorAction).then(combineCloseDoorAction);_leftDoorMesh.openDoubleDoorAction = combineOpenDoorAction;_leftDoorMesh.closeDoubleDoorAction = combineCloseDoorAction;_leftDoorMesh.actionManager = doorActionManager;_rightDoorMesh.actionManager = doorActionManager;// return doorActionManager;}// add guide linevar showAxis = function (size) {var makeTextPlane = function (text, color, size) {var dynamicTexture = new BABYLON.DynamicTexture("DynamicTexture", 50, scene, true);dynamicTexture.hasAlpha = true;dynamicTexture.drawText(text, 5, 40, "bold 36px Arial", color, "transparent", true);var plane =  BABYLON.Mesh.CreatePlane("TextPlane", size, scene, true);plane.material = new BABYLON.StandardMaterial("TextPlaneMaterial", scene);plane.material.backFaceCulling = false;plane.material.specularColor = new BABYLON.Color3(0, 0, 0);plane.material.diffuseTexture = dynamicTexture;return plane;};var axisX = BABYLON.Mesh.CreateLines("axisX", [new BABYLON.Vector3(0,0,0), new BABYLON.Vector3(size, 0, 0), new BABYLON.Vector3(size * 0.95, 0.05 * size, 0),new BABYLON.Vector3(size, 0, 0), new BABYLON.Vector3(size * 0.95, -0.05 * size, 0)], scene);axisX.color = new BABYLON.Color3(1, 0, 0);var xChar = makeTextPlane("X", "red", size / 10);xChar.position = new BABYLON.Vector3(0.9 * size, -0.05 * size, 0);var axisY = BABYLON.Mesh.CreateLines("axisY", [new BABYLON.Vector3(0,0,0), new BABYLON.Vector3(0, size, 0), new BABYLON.Vector3(-0.05 * size, size * 0.95, 0),new BABYLON.Vector3(0, size, 0), new BABYLON.Vector3(0.05 * size, size * 0.95, 0)], scene);axisY.color = new BABYLON.Color3(0, 1, 0);var yChar = makeTextPlane("Y", "green", size / 10);yChar.position = new BABYLON.Vector3(0, 0.9 * size, -0.05 * size);var axisZ = BABYLON.Mesh.CreateLines("axisZ", [new BABYLON.Vector3(0,0,0), new BABYLON.Vector3(0, 0, size), new BABYLON.Vector3(0, -0.05 * size, size * 0.95),new BABYLON.Vector3(0, 0, size), new BABYLON.Vector3(0, 0.05 * size, size * 0.95)], scene);axisZ.color = new BABYLON.Color3(0, 0, 1);var zChar = makeTextPlane("Z", "blue", size / 10);zChar.position = new BABYLON.Vector3(0, 0.05 * size, 0.9 * size);};showAxis(10);//Groundvar ground = BABYLON.Mesh.CreatePlane("ground", 80.0, scene);ground.material = new BABYLON.StandardMaterial("groundMat", scene);ground.material.diffuseColor = new BABYLON.Color3(1, 1, 1);ground.material.backFaceCulling = false;ground.position = new BABYLON.Vector3(0, 0, 0);ground.rotation = new BABYLON.Vector3(Math.PI / 2, 0, 0);//Set gravity for the scene (G force like, on Y-axis)scene.gravity = new BABYLON.Vector3(0, -0.9, 0);// Enable Collisionsscene.collisionsEnabled = true;//Then apply collisions and gravity to the active cameracamera.checkCollisions = true;// camera.applyGravity = true;//Set the ellipsoid around the camera (e.g. your player's size)camera.ellipsoid = new BABYLON.Vector3(1, 1.1, 1);// Y*2 is character Height//finally, say which mesh will be collisionableground.checkCollisions = true;box.checkCollisions = true;return scene;
}

【Babylon小技巧04】进阶双开门事件绑定同时触发相关推荐

  1. jQuery之事件绑定到触发全过程及知识点补充

    前言: 最重要的还是最后的流程图,可以试着根据流程图手写实现$().on(),下篇文章会放出模拟实现的代码. 一.举例 <div id="A" style="bac ...

  2. 微信小程序开发的数据绑定和事件绑定

    一.数据绑定 1.定义数据 在页面对应的 .js(或 ts)文件中,把数据定义到 data 对象中即可: 2.Mustache 语法的格式(渲染数据) 把 data 中的数据绑定到页面中渲染,使用 M ...

  3. 【微信小程序入门到精通】— 事件绑定的详细解读

    目录 前言 一.事件绑定导论 二.常用事件 三.事件对象属性列表 3.1 target 和 currentTarget 的区别 3.2 bindtap 的用法 总结 前言 对于目前形式,微信小程序是一 ...

  4. 【Babylon小技巧02】第一人称移动时,限定视角抬头角度

    例如展馆内,不希望用户看到头顶天花板,则需要设置抬头仰角范围 只允许前后左右移动 室内不允许抬头 scene.registerBeforeRender(function () { console.lo ...

  5. uni-app开发微信小程序,关于获取手机号事件绑定的坑

    闲话少说,直接上代码. 微信官方的代码是这样的: <button open-type="getPhoneNumber" bindgetphonenumber="ge ...

  6. 【微信小程序】-- WXML 模板语法 - 事件绑定 -- tap input (十)

  7. google 搜索十大搜索技巧和实用小技巧

    正确的搜索方式 Google是一个非常精密成熟的搜索引擎,但大多数的用户都没有能完全地利用到它的能力.一般人就是在Google的搜索框中输入一两个关键字,然后点击"搜索"按钮,等着 ...

  8. 【思维导图】人像摄影如何使用光线?十个小技巧

    原文链接:http://www.fsbus.com/renxiangsheying/21800.html 我补充了部分图片做说明 以前总结的别人视频里的 光源一般是越广越好,第二张照片太唯美了 链接在 ...

  9. 原生JS事件绑定的三种方式

    JavaScript绑定事件的方法 要想让 JavaScript 对用户的操作作出响应,首先要对 DOM 元素绑定"事件处理函数".所谓事件处理函数,就是处理用户操作的函数,不同的 ...

最新文章

  1. 服务器光盘修复读不出盘,求助,硬盘读不出来怎么修复?
  2. 如何在Linux下安装Docker
  3. Linux下安装PPPOE SERVER
  4. 【第一章】 Spring概述 —— 跟我学Spring3
  5. C语言多维数组做函数参数退化原因大剖析
  6. C#实现多态之一抽象
  7. Java ThreadLocal
  8. (转)基于openlayers实现聚类统计展示
  9. 晋职称不考外语 计算机,评职称不考外语计算机的价值导向
  10. delphi mysql类_Delphi MySQL数据库操作类
  11. (转)对冲基金投身“另类数据”淘金热
  12. apdu 移动sim_SIM卡基础技术规范, ISO-7816协议(APDU指令)
  13. matlab axis函数_又是被Matlab整疯的一天!来学点简单操作!
  14. HOOK技术原理与实现技术初探
  15. 【bzoj4200】【NOI2015】【小园丁与老司机】【dp+最小流】
  16. PFX文件解析及读取、写入、删除相关操作
  17. linux shell json操作命令 jq 简介
  18. 一个有用的数据库:中国研究数据服务平台(CNRDS)
  19. Simpsons’ Hidden Talents辛普森一家的隐藏天赋(next数组和kmp字符串匹配)
  20. 蓝色满天星中的小白兔

热门文章

  1. 计算机语言圆周率,使用Java如何计算圆周率
  2. java毕业设计点餐系统的设计与实现mybatis+源码+调试部署+系统+数据库+lw
  3. 第13节 eclipse简介
  4. 黑白照片怎么上色?学会这招轻松解决
  5. 2021年推土机司机(建筑特殊工种)考试及推土机司机(建筑特殊工种)找解析
  6. 在3dmax中导入的动画摄像机巡游与主摄像机之间的切换
  7. Linux 系统维护命令小结
  8. 未来的计算机也无法突破冯诺依曼结构,冯诺依曼计算机的基本原理
  9. GitLab允许开发人员推送到master分支
  10. 《惢客创业日记》2018.12.29(周六)取代手机的“量子智能标签”