freshfork / p5.easycam Goto Github PK

Is there current Typescript Support and NPM packages for this library?

Is there any way to calculate the distance from a point to the camera plain even if the camera is rotating?

View a reproduction of the issue here
In this example, the red zone represents a non-offset canvas. The mouse wheel only works (zooms) where the red overlaps the offset canvas. The wheel fails while over the canvas outside the red zone.
Expected behavior: mouse wheel should work if the mouse pointer is anywhere over the canvas, even when offset.
Code at line 299 should account for canvas offset in a manner similar to the handling of mousedown and dblclick.

how would you set the camera as if we were looking from the first person point of view? I am not able to get that to work looking through the examples and docs. is this something easycam can do?

With seemingly the following change, processing/p5.js#5287, it seems that EasyCam's HUD display ends up rotating with the camera movements for the rest of the scene. Using a p5js instance from a year ago, this does not seem to be the behavior (it stays static as expected).

The setRotationConstraint(boolean, boolean, boolean) function doesn't seem to have an effect on rotation. Is it possible to lock rotation along one or more axes (pitch/roll/yaw)?

My canvas uses WEBGL and i am trying to draw regular debug text on top in 2D.

I am following this WEBGL method https://p5js.org/reference/#/p5/text

function preload() {
  inconsolata = loadFont(
    "https://cdnjs.cloudflare.com/ajax/libs/bwip-js/2.0.6/Inconsolata.otf"
  );
}

function setup() {
  pixelDensity(1); //lower is faster

  var canvas = createCanvas(windowWidth, windowHeight, WEBGL);
  
  textFont(inconsolata);
  textSize(20);
  textAlign(CENTER, CENTER);

Drawing text inside displayHUD() makes it look very glitchy.
drawing text inside draw() is glitchy too but in 3D space.

Hi! 👋 Is this library still maintained? I've been unable to import it (cleanly, anyway) into a Yarn/TypeScript project, as no package is published on npm.

Furthermore, when I tried to copy the source code in manually, I couldn't get it to work with p5's Instance Mode. The library seems to assume p5 is always available globally, which is rarely the case in modern JS projects.

Thanks!

Hello! Im trying to change the opacity/transparency of some images and I can´t do it with tint().

HUD (HeadUp Display) rotates with EasyCam in New p5 1.6 Version.

Reproduce step:

1. Clone this p5.EasyCam project.
2. Replace examples/HeadUpDisplay/index.html's p5.min.js version to 1.6.0 (Works fine from 1.2.0 to 1.5.0)

I am working off the CameraStates example.
What do i have to do to hide or show the text and screenshot HUD overlays?
Unfortunately i am not super experienced with css and html to know how to set the hide/show from JS.

Thanks a bunch.

If you click the mouse, drag the cursor outside of the canvas, and then release it, the dragging state persists until you click inside of the canvas again. In the MultiCanvas example, I can get all six to follow the mouse movements by clicking, dragging, and releasing each of them outside their canvases.

Thanks again for your work on this!

I tried easy cam in a demo it's working smooth with mouse move. But I tried with one my React project it's not smooth,
behaving so weird and major part (Right, bottom) of the canvas is not sensing mouse at all.

1. Standalone demo -> Works smooth and detects mouse movement throughout the canvas

2. With React app --> below the red line and right side of the line is not listening to the mouse event. And also it's not smooth at all.
   

I don't know what I'm missing here.

Could the documentation please show how to use the handlers .. e.g from Peasycam

PeasyDragHandler handler = cam.getPanDragHandler();
cam.setLeftDragHandler(handler);

Thanks

When I call smooth() [1] after I created the camera, mouse interactions do not work anymore.

When I call smooth() before creating the camera, everything is working as expected.

Here is an example in the p5 editor.

[1] https://p5js.org/reference/#/p5/smooth

Thanks for making this library. It works very well.

Would anyone have advice on how to implement point picking with easycam?

In openframeworks i can use worldToScreen and then check the distance to the mouse to find the nearest 3d object.
But i have no idea how to do this conversion from 3d to 2d here?

Thanks a bunch.

Hello.

When using the library in instance mode, it breaks with p5 1.4.2. I don't have the error here, but it complains that does not know the function camera.

The problem is at line 628 (no minified), somehow the reference to the p5 object (I believe should be _curCamera) is lost and p5's function camera() is not recognized. I fixed it in a local copy, using the hidden p5's variable _pInst instead of _curCamera, everything went fine that way. Although this fixes the issue, I believe it's probably not the right way to do it, hence not a pull request, just this issue message.
Thanks for the excellent work.
cheers
Vicente

ps: I'm not with my computer right now, so I can't provide a MRE, but can do it later if you guys want. Sorry about that.

Hello!

Thank you for this excellent resource! I am trying to implement a webpage that contains 13 separate WEBGL canvases. I have gotten this to work with p5's built-in instancing functionality, and it works splendidly.
However, when I realized I definitely needed to get EasyCam instead of using the default OrbitControl, I was surprised and disappointed to see that it doesn't seem to work on anything beside the first canvas that is created in the script. Incredibly, the latest version of OrbitControl actually detects and works on all 13 separately! The only real drawback is that it doesn't seem to have a way to disable its capturing the scrollwheel, the same way EasyCam does.
I have a function in my page script that sets up and runs the canvas; EasyCam is where it should be, in the setup. The overall p5 function then gets called 13 times, creating separate WEBGL canvases on the page.
As I said, the behavior is that EasyCam works flawlessly on the first canvas but not the other twelve.

Is there any chance this could be fixed soon? Or am I doing something wrong?

cheers, and thanks again!

Hello James,
I tried successfully your indications to limit the yaw, pitch and roll rotations. I would love to limit the angle for each of this. Right now they have a rotation similar to 360 (or they can rotate infinite times). Is there a way to limit the pitch rotation to 180 degrees, as it happens on any of the models in this website here: https://app.shapediver.com/m/array-table-dimension

Thanks in advance,
CN

If lights are on, then screen-aligned objects rendered in HUD mode can be affected by the orientation of the camera. For example, given a scene with lights() and a box, if the camera is rotated around the scene, a filled rectangle rendered in the HUD context will vary in brightness. The lights should probably be turned off automatically for the HUD rendering, perhaps using noLights() (when that is implemented) or by setting this._renderer._enableLighting = false;

I am trying to modify the camera behavior when i drag on the screen.
Basically this is the same as my problem:
https://gamedev.stackexchange.com/questions/136174/im-rotating-an-object-on-two-axes-so-why-does-it-keep-twisting-around-the-thir?noredirect=1&lq=1

Now the default behavior that is the rotations are applied relative to the camera coordinate system.
I would like to apply yaw rotation around the global Y axis.

How this can be achieved?
Animation

Can I use this 3d camera with three.js?

According to w3counter and statcounter, IE has between 3 and 5 percent of the market. It is end of life for this browser: is it necessary to support it? p5.EasyCam presently contains ES6 and Math.log()