【Babylon小技巧04】进阶双开门事件绑定同时触发
鼠标点击其中一扇门时,另外一扇也同时开启或关闭
效果如图
双开门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】进阶双开门事件绑定同时触发相关推荐
- jQuery之事件绑定到触发全过程及知识点补充
前言: 最重要的还是最后的流程图,可以试着根据流程图手写实现$().on(),下篇文章会放出模拟实现的代码. 一.举例 <div id="A" style="bac ...
- 微信小程序开发的数据绑定和事件绑定
一.数据绑定 1.定义数据 在页面对应的 .js(或 ts)文件中,把数据定义到 data 对象中即可: 2.Mustache 语法的格式(渲染数据) 把 data 中的数据绑定到页面中渲染,使用 M ...
- 【微信小程序入门到精通】— 事件绑定的详细解读
目录 前言 一.事件绑定导论 二.常用事件 三.事件对象属性列表 3.1 target 和 currentTarget 的区别 3.2 bindtap 的用法 总结 前言 对于目前形式,微信小程序是一 ...
- 【Babylon小技巧02】第一人称移动时,限定视角抬头角度
例如展馆内,不希望用户看到头顶天花板,则需要设置抬头仰角范围 只允许前后左右移动 室内不允许抬头 scene.registerBeforeRender(function () { console.lo ...
- uni-app开发微信小程序,关于获取手机号事件绑定的坑
闲话少说,直接上代码. 微信官方的代码是这样的: <button open-type="getPhoneNumber" bindgetphonenumber="ge ...
- 【微信小程序】-- WXML 模板语法 - 事件绑定 -- tap input (十)
- google 搜索十大搜索技巧和实用小技巧
正确的搜索方式 Google是一个非常精密成熟的搜索引擎,但大多数的用户都没有能完全地利用到它的能力.一般人就是在Google的搜索框中输入一两个关键字,然后点击"搜索"按钮,等着 ...
- 【思维导图】人像摄影如何使用光线?十个小技巧
原文链接:http://www.fsbus.com/renxiangsheying/21800.html 我补充了部分图片做说明 以前总结的别人视频里的 光源一般是越广越好,第二张照片太唯美了 链接在 ...
- 原生JS事件绑定的三种方式
JavaScript绑定事件的方法 要想让 JavaScript 对用户的操作作出响应,首先要对 DOM 元素绑定"事件处理函数".所谓事件处理函数,就是处理用户操作的函数,不同的 ...
最新文章
- 服务器光盘修复读不出盘,求助,硬盘读不出来怎么修复?
- 如何在Linux下安装Docker
- Linux下安装PPPOE SERVER
- 【第一章】 Spring概述 —— 跟我学Spring3
- C语言多维数组做函数参数退化原因大剖析
- C#实现多态之一抽象
- Java ThreadLocal
- (转)基于openlayers实现聚类统计展示
- 晋职称不考外语 计算机,评职称不考外语计算机的价值导向
- delphi mysql类_Delphi MySQL数据库操作类
- (转)对冲基金投身“另类数据”淘金热
- apdu 移动sim_SIM卡基础技术规范, ISO-7816协议(APDU指令)
- matlab axis函数_又是被Matlab整疯的一天!来学点简单操作!
- HOOK技术原理与实现技术初探
- 【bzoj4200】【NOI2015】【小园丁与老司机】【dp+最小流】
- PFX文件解析及读取、写入、删除相关操作
- linux shell json操作命令 jq 简介
- 一个有用的数据库:中国研究数据服务平台(CNRDS)
- Simpsons’ Hidden Talents辛普森一家的隐藏天赋(next数组和kmp字符串匹配)
- 蓝色满天星中的小白兔
热门文章
- 计算机语言圆周率,使用Java如何计算圆周率
- java毕业设计点餐系统的设计与实现mybatis+源码+调试部署+系统+数据库+lw
- 第13节 eclipse简介
- 黑白照片怎么上色?学会这招轻松解决
- 2021年推土机司机(建筑特殊工种)考试及推土机司机(建筑特殊工种)找解析
- 在3dmax中导入的动画摄像机巡游与主摄像机之间的切换
- Linux 系统维护命令小结
- 未来的计算机也无法突破冯诺依曼结构,冯诺依曼计算机的基本原理
- GitLab允许开发人员推送到master分支
- 《惢客创业日记》2018.12.29(周六)取代手机的“量子智能标签”