Jump to content

GUI issue with raycast


Recommended Posts

Hello all :)

Sorry for my bad english in advance .

I have a littel issue with GUI and I want to understand why it  works like taht .

What is the issue ?

I made this  function  :

function vecToLocal (vector, mesh){
 var m = mesh.getWorldMatrix();
 var v = BABYLON.Vector3.TransformCoordinates(vector, m);
 return v;

class Raycast {
  constructor() {

  doorOpener(letHit, myGUI, scene){
    this.scene = scene;

      var origin = player.position;

      var forward = new BABYLON.Vector3(  0, 0, 1,);
          forward = vecToLocal(forward, player);

      var direction = forward.subtract(origin);
          direction = BABYLON.Vector3.Normalize(direction);

      var length = 1.5;

      var ray = new BABYLON.Ray(origin, direction, length);
      var hit = this.scene.pickWithRay(ray);

      if (hit.pickedMesh == letHit){
         if (control.keys.ePress == 1){
             scene.beginAnimation(letHit, 0, 40, false);

          return myGUI.isVisible = 1

      }else {

        return  myGUI.label.isVisible = 0;





This function is responsible to opening doors. When player reach a door then GUI  shows up which key(E) on keyboard must be pressed for open the door but  the GUI only works  whith one door .  Here is how I call Raycast function


const view = require('./ray.js');
const panelG=  require('./gui.js');

class Leves {
 constructor(scene,camera,followCam,canvas) {
  this.scene = scene;
    GuiP = new panelG.GuiP (scene);
    doo = new view.Ray ();

        BABYLON.SceneLoader.ImportMesh("", "textury/mapy/", "lvl01.babylon", this.scene,function (newMeshes) {

              var level_001 = newMeshes[0];
                  level_001.checkCollisions = true; 

              var door = newMeshes[1];
                  door.checkCollisions = true; 

              var door2 = newMeshes[2]              
                  door2.checkCollisions = true; 

                var openDoor = new BABYLON.Animation("t", "position.z", 25, BABYLON.Animation.ANIMATIONTYPE_FLOAT, BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE);
                var keys = [];
                       frame: 0,
                       value: 0.45

                       value: -1.5

                       frame: 10,
                       value: -3
                       frame: 30,
                       value: -3

                       frame: 35,
                       value: -1.5

                       frame: 40,
                       value: 0.45



               scene.registerBeforeRender(function () {
                   doo.doorOpener (door, GuiP.panel, scene ); /*only animation works*/
                   doo.doorOpener( door2, GuiP.panel, scene); /* GUI and animation works very good */


I am newbie in babylonjs and javascript too :)  and I want to understand every aspect of babylon js and javascript.


Link to comment
Share on other sites

Hiya A!  Perfect playground example... thanks for making it. 


(WASD to drive the red "tank")  :)

Although I adjusted various crap... the problem was really with... needing another label.  So, now there is added label2 and text2 GUI controls.

Really, I think the problem might have been in the render loop... with the show variable.  SO... I think your picking ray work is PERFECT (nicely done)... but the label was refusing to turn-on... for green box.

You can study it more, try some different things.  I hope I have been helpful. 

We can talk more, if you like.  Maybe others will have good ideas for using the same label... esp for lines 123-128... show.isVisible area.  *shrug*  Might be an issue in there... with using same label. 

Stay tuned, report discoveries, good luck.

Link to comment
Share on other sites

Hello @Wingnut :)

Thank you for your answer... I very appreciate.

I was afraid that I will must use more then one label ?.....

...because in future I would like to make  five more  doors  and  more diffrent "labels" (G, F, Q - keys on keyboard)  in first level.

I am not sure  if It will be good for game performance  create custom labels for each door :( 

What is your opinion guys ?

Link to comment
Share on other sites

My pleasure, Alenvei.  new version:


Now, one label/door-menu, any number of doors.


-  Lines 33 and 43 - both doors are pushed into an array... called doors.

-  Label2 and Text 2 removed.

-  Line 90 - function renamed to doorsCheck, because... it checks ALL doors with just ONE call.  Rename as wanted, of course.  :)

-  Line 113 - extra IF is added.

-  Lines 118-120  -  the ELSE section is moved to NEW first IF... and removed from 2nd IF.  (ELSE section moved down a few lines)

Line 130  -  a SINGLE call to doorsCheck() with no params/args.  It checks ALL doors in doors[ ] array.

What do you think?  Will this work OK?  I hope so. 

There might be better ways.  I am not a pro coder.  Perhaps others will have more comments.  Party on!

Link to comment
Share on other sites

Hi @Wingnut  ..... this is awesome it works perfectly and  I learned new things ...thank you very much  :) Wingnut  for me you are pro coder .

Guys I made  for  you playground,  which is similar with my game . You can find there  two rooms with doors. Go close to  the door when label ( with the letter E) shows up then press the E-key on keyboard and see the magic :D 

W,A,S,D keys  to control the RedBox.

Have fun:  https://playground.babylonjs.com/#VZRN2V#7

I changed this lines :

-Lines 26 -97 : only walls

-Lines 163 -194 and 219 : implementation animation for doors ;

-Lines 230 : executing animation for doors


Have nice day :)


Link to comment
Share on other sites

Hello again @Wingnut 

I found one issue but not with label and raycast. I have issue with animation of doors ... You can see  exampel in my last post. When  I turn on my  "game" everything works fine but after five minutes when I open door the FPS go like crazy and evrey minute  it's worse only with door animation.

I think the  raycast making this trabels but I'm not sure.

Link to comment
Share on other sites

Hi Alenvei

   Here's a new one... https://playground.babylonjs.com/#VZRN2V#8

See line 221?  I disabled it.  Remember that doorsCheck() is called every frame.  It is called within a .registerBeforeRender func, and they RUN about 60 times per second.

So, you should not push another animation into mesh.animations array... every frame

That will cause a memory leak... as mesh.animations array gets longer and longer and longer.

So...  I added another FOR-loop in lines 196-198.  This adds ONE animation to each door in the doors[] array.

This way, we avoid forever-growing .animations array on each door.  Maybe this will prevent your slow-down-over-time problem.

I also did one minor adjustment to lines 252 and 246.

Test it out, see if it works better.  I hope so.  Be well.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...