solved Returning the camera's angle and moving with the mouse wheel

[Dimitry]

Hello guys, this is my very first forum post here. And I hope someone will be able to help. 

 

So here is the demo http://sitesman.com/3dcity/1/

I want to move the camera with the mouse wheel. All ok, I can track the event and make the camera react to the wheel. The code is like this:

 

camera.cameraDirection= camera.cameraDirection.add(new BABYLON.Vector3(0, 0, delta/200));

 

Well of course this code only changes one z coordinate, but I need somehow to change both the x and the z coordinate, the problem is, the number to which to change them will ALWAYS depend on the angle at which the camera is looking at the world. And so will be always different, depending on this angle. Subsontiously I understand that some formulas using cos and sin should be applied here, but I had poor math grades :-( Can someone invent a formula for this? 

 

Thanks in advance!

[Samuel Girardin]

I'm sure one of the guys of the forum will help you   . 

 

Very nice maps  and clean  3d works !

[RaananW]

Hey!

 

First, welcome. Your map is really nice. I especially like the text in the loading screen (which I can only assume means "Loading"  )

 

So, just to make sure I understand correctly - what you actually want to achieve, is that the mouse wheel will act like the forward/backward arrow keys (or W and S) right? You could simply use this function and "adjust" it (with a certain scaling for the mousewheel event data).

 

Check this function - https://github.com/BabylonJS/Babylon.js/blob/master/Babylon/Cameras/babylon.touchCamera.ts#L120 , it does that exactly.

[jerome]

very nice scene !

[Dimitry]

Thanks a lot for the answers! I think the problem is that I want this camera to be a normal camera which can be operated by the mouse and keyboard and just ADD the possibility to operate with the wheel, just in case. And actually all I need is to know how to return the camera's angle at this moment, is there such a function? Then a formula should be applied that probably I will even think of myself, but the problem is how to learn the camera's angle at this moment.

 

I mean I know how to rotate the camera to an angle, but do not understand how to return the current camera's angle. 

 

Thanks a lot!

[Rubis]

var length = delta/200;var DirX = Math.sin(camera.rotation.y)*Math.cos(camera.rotation.x);var DirY = -Math.sin(camera.rotation.x);var DirZ = Math.cos(camera.rotation.y)*Math.cos(camera.rotation.x);camera.cameraDirection = camera.cameraDirection.add(new BABYLON.Vector.(length*DirX,length*DirY,length*DirZ));

Not tested, but this should work.

[Dimitry]

Wow thanks Rubis, will try that and reply. Thanks a lot!

[Dimitry]

Works like a charm, please check it here http://sitesman.com/3dcity/1/

Thanks!!

The only strange behaviour I found is that the more you scroll the wheel, the more distance the camera goes with each scroll, after 10 scrolls becoming like 100 meters :-D Maybe some other variable should be introduced? Seems the distance is accumulated exponentially somehow, but my geometry and math knowledge do not allow me to understand the problem :-D

Thank you!

[Rubis]

I don't know how wheel mouse events are detected and what kind of value he returns. 

 

But with what you say, I assume your delta is an absolute position, and should be relative. Stock your previous value of delta and subtract it to the current one. (This difference is the length of the vector)

 

But keep in mind your wheel is rotative that mean his value is contain beetween [ -lamba , lamba] or [ 0 , 2*lambda].

 

So you have to think about what happen when the wheel is near 0 or lambda.

 

I hope this explanation help you.

[Dimitry]

Ok will try this thank you!

[Dimitry]

Well I am really sorry but can not understand what to do :-( The code now is like this, maybe you could tell where to put the old and new delta:

 engine.runRenderLoop(function() {                    Scene.render();                   var elem = document.getElementById('renderCanvas');    if (elem.addEventListener) {      if ('onwheel' in document) {              elem.addEventListener("wheel", onWheel);      } else if ('onmousewheel' in document) {                elem.addEventListener("mousewheel", onWheel);      } else {                elem.addEventListener("MozMousePixelScroll", onWheel);      }    } else {       elem.attachEvent("onmousewheel", onWheel);    }    function onWheel(e) {      e = e || window.event;      var delta = e.deltaY || e.detail || e.wheelDelta;var length = delta/2000;var DirX = Math.sin(camera.rotation.y)*Math.cos(camera.rotation.x);var DirY = -Math.sin(camera.rotation.x);var DirZ = Math.cos(camera.rotation.y)*Math.cos(camera.rotation.x);camera.cameraDirection = camera.cameraDirection.add(new BABYLON.Vector3(length*DirX, length*DirY, length*DirZ));      e.preventDefault ? e.preventDefault() : (e.returnValue = false);    }                });                    }, function (progress) {        });</script>

[jerome]

everything that must be updated (values, etc) before each frame rendering is to be placed within :

scene.registerBeforeRender(function() {  // your stuff here});

this could placed just before

...return scene;

for instance

 

so your camera direction ...

[Dimitry]

Hm wherever I try to put this, the scene hangs 

Could you please take a look at the code and maybe put it where it should be? Thanks!! http://storage.googleapis.com/992various/3.rar 

[Dimitry]

Found it! Just took the length out of the delta function and it is ok now. 

http://c2n.me/3i4lw4y.png

Thanks to everyone!!!

[Buzul]

Hello to everyone;

I use mouse wheel movements in my project. I started with the code here as a sample. 

But I'm getting this message and it's not working (Added non-passive event listener to a scroll-blocking 'mousewheel' event. Consider marking event handler as 'passive' to make the page more responsive.)

 

How i can fix this problem I used all my ideas..

 

any friend can show me way please? thank you...

[Buzul]

1 hour ago, Buzul said:

Hello to everyone;

I use mouse wheel movements in my project. I started with the code here as a sample. 

But I'm getting this message and it's not working (Added non-passive event listener to a scroll-blocking 'mousewheel' event. Consider marking event handler as 'passive' to make the page more responsive.)

 

How i can fix this problem I used all my ideas..

 

any friend can show me way please? thank you...

Hi again friends...

I fixed that problem.. But i want to make inverted this action. For example when i roll the wheel forward camera should go forward.. 

In this case i'm working on it but still i need help

[trevordev]

@Buzul you can try taking a look at this playground http://playground.babylonjs.com/#W5QLCA is this what you are looking for? You can change direction by modifying -event.deltaY/100

[Buzul]

13 hours ago, trevordev said:

@Buzul you can try taking a look at this playground http://playground.babylonjs.com/#W5QLCA is this what you are looking for? You can change direction by modifying -event.deltaY/100

@trevordev this is definitely what I'm looking for .. a shorter and understandable code  thank you!!!