3D object is not smooth when we use along with react app

[sarathjasrin]

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.

[jwdunn1]

Thank you for the clear and concise report with demonstrations. With the React app, I was able to utilize the browser inspector and temporarily remove all of the extraneous margins, padding, and borders that surround the canvas. (More specifically, the ".container" class adds a margin-left and a padding-left; the ".mt-5" class adds a margin-top; the ".col-8" class adds a padding-left; and the canvas element itself adds a border.) When a p5js canvas using EasyCam is surrounded by extra space, mouse registration becomes an issue. If the canvas is positioned correctly, for example at 0,0 in the browser window, then the mouse interaction works smoothly throughout the canvas as expected. Hence, React is not the issue here.

[sarathjasrin]

@jwdunn1 Thanks for the reply. I removed padding and margins from the container. placed the container close to the body (0,0). It seems working fine. But I cant use it like this. Have to style it put it in the container. In that case, how I can solve the issue. I tried to orbitControl, it seems working but I want to use easyCam because of the transition and better camera control.

[jwdunn1]

I have created a solution for this issue: https://editor.p5js.org/jwdunn1/sketches/g8yGb_1at During setup, we turn off the mouse/touch listener, update the handler to account for the containers, and then reattach the listeners. I've set the example containers with a mix of top and left values to provide a demonstration of how to build the offset in each dimension. The final test that everything matches is when the box on the canvas is clicked or touched, it should not rotate until it is dragged. This demo will also serve as guidance for anyone needing to use EasyCam on a canvas that is offset within a web page.

[sarathjasrin]

@jwdunn1 Thanks for the solution. I applied the above fix but still it's same. I saw few improvment in the bottom but still the right side still same. I have updated the test page. And also the mouse interaction is not smooth as in the demo pages. Thanks again

[jwdunn1]

The offsets in the example intentionally do not match your actual web page offsets. Your offsets will be something closer to 181, 50. I've updated the sample sketch https://editor.p5js.org/jwdunn1/sketches/g8yGb_1at to include a new function offsetCanvas(). You will need to inspect your style sheet, compute the exact location of your canvas, and pass the correct x,y value to the function. With the correct values, the object should not rotate when clicked or touched. If it does, then the values need to be adjusted. See also https://editor.p5js.org/jwdunn1/sketches/QNti-UGsW for an additional instance of how to compute offsets and use this function. I've tested these sketches on Chrome, Firefox, and Safari, including mobile.

[jwdunn1]

@sarathjasrin I've updated the sample sketch https://editor.p5js.org/jwdunn1/sketches/g8yGb_1at to automatically determine the canvas position using the p5js position() function. This will work better for situations such as yours where the canvas is contained within elements that have dimensions which are dependent on window size. Also note the resizing function. Please review and use the new code as guidance.

[jwdunn1]

There are some small discrepancies between browsers. Chrome works best. Firefox shows a couple of pixels that would need to be accounted for. Safari, maybe one pixel. To handle this, one would need to inspect navigator.userAgent and make the appropriate adjustment.

[sarathjasrin]

@jwdunn1 thanks for the demo. I tried to use the canvas position but that's giving wrong values. Then I used

document.getElementById('canvas-container').getBoundingClientRect(); with offsetCanvas. It's working fine. The only issue is mouse sensitivity. It's not smooth.

[jwdunn1]

@sarathjasrin Thanks for the feedback about the canvas position...sounds like it still needs further investigation. In my experience, your sketch runs smoothly in the 18 different PC browsers and 7 Mac browsers that I tested. Only the Tor Browser is indicating a slow frame rate for all p5js sketches. In which browser are you experiencing the mouse sensitivity issue?

[sarathjasrin]

@jwdunn1 I tried both Chrome and Edge. The Codepen demo works good in both browser. But the test page I have created. You can see the difference.

[jwdunn1]

Can you test from a different computer/mouse configuration? Again, I'm not able to reproduce the mouse issues with your test page on any of my multiple test computers or browsers. The mouse interaction is smooth.