Home › Forums › Programming › Offset camera so object is displayed off to the side
- This topic has 11 replies, 3 voices, and was last updated 1 year, 7 months ago by saalemv3d.
-
AuthorPosts
-
2022-08-24 at 6:14 am #55183mjdesignerParticipant
Hi, I’ve read all I could find on this topic, but I still can’t make it work (please see attached JPG).
I’d like to have my product (a tall shape) off to one side of the viewer, so I have room for a menu, which includes the CyberFox 2D canvas, so I need to keep the iFrame full-width.
I tried the .app.camera.SetView.Offset — keeping the camera pointed to the product is perfect, but depending on the browser width, the view gets distorted.
I’m not a javascript programmer, any script or help that can make this work would be kindly appreciated. Thanks!
Attachments:
You must be logged in to view attached files.2022-08-24 at 8:15 am #55200kdvParticipantapps.camera.filmOffset = -10
or any other numeric value, but it’s hard to find the logic to set the camera view in the middle of the left part of a page independant of its width )))When using
setViewOffset
you should take into account the v3d canvas size (it can be scaled and different from the window size), but not some random numbers…function setCameraViewOffset() { const width = app.renderer.domElement.width; // the actual v3d canvas width const height = app.renderer.domElement.height; //the actual v3d canvas height const offsetX = -(width / 4); // the middle of the left half of a page const offsetY = 0; app.camera.setViewOffset(width, height, offsetX, offsetY, width, height); } setCameraViewOffset(); window.onresize = function() { setCameraViewOffset(); };
Puzzles and JS coding. Fast and expensive.
If you don’t see the meaning in something it primarily means that you just don’t see it but not the absence of the meaning at all.
2022-08-25 at 2:31 am #55210mjdesignerParticipantYour script works perfectly – very cool and very useful. Thank you!
2023-03-13 at 11:21 am #61020saalemv3dParticipantHi @kdv,
How can we animate setViewOffset instead of just jumping?
For example, animation like tween camera or look at.2023-03-13 at 11:26 am #61021kdvParticipanthttps://www.soft8soft.com/docs/manual/en/puzzles/Animation.html#animate_param
Puzzles and JS coding. Fast and expensive.
If you don’t see the meaning in something it primarily means that you just don’t see it but not the absence of the meaning at all.
2023-03-13 at 11:50 am #61022saalemv3dParticipantHi @kdv,
Thanks for the reply.
We do not have a puzzle for the setViewOffset. So, I executed the code in “on update animation” which is not working. Screenshot attached. Can you take a look at it?
Thank you
Attachments:
You must be logged in to view attached files.2023-03-13 at 12:06 pm #61024kdvParticipantFirst, in you code
offsetX
andoffsetY
are always 0. What did you expected?
Second, what do you want exactly? It’s quite strange to use the animation puzzle on the wheel event…Puzzles and JS coding. Fast and expensive.
If you don’t see the meaning in something it primarily means that you just don’t see it but not the absence of the meaning at all.
2023-03-14 at 2:59 am #61036saalemv3dParticipantThanks for the reply.
We have a panning option in the model. So after panning, bring the model back to the center of the page when the user scrolls up.
Actually,
offsetX
andoffsetY
with value 0 always keep it in the center when I scroll up but need to give it a smooth animation instead of just jumping.2023-03-14 at 6:36 am #61038kdvParticipantDo you want to center the model with the wheel up action? Than there is no need in the “animate param” puzzle. this puzzle is supposed to be used once (ex. on the click) to animate from one value to another…
In any case, you won’t do it via puzzles only. There is no puzzle to read/write the camera’s view offset…
Puzzles and JS coding. Fast and expensive.
If you don’t see the meaning in something it primarily means that you just don’t see it but not the absence of the meaning at all.
2023-03-14 at 7:16 am #61047saalemv3dParticipantDo you want to center the model with the wheel up action? Yes, and the above puzzle is working fine. I just wanted to give some smooth animation to setViewOffset and instead of jumping instantly, it should happen in (ex. 1sec).
2023-03-14 at 7:33 am #61052kdvParticipantThe above puzzle just sets the zero offset on every
wheel up
event. You could click somewhere with the same result… To animate the view offset you need to read the current view offset and interpolate it to the zero view offset in time.Puzzles and JS coding. Fast and expensive.
If you don’t see the meaning in something it primarily means that you just don’t see it but not the absence of the meaning at all.
2023-03-22 at 11:31 am #61358saalemv3dParticipantThanks for the instructions.
I played other ways around to achieve what I was looking for. -
AuthorPosts
- You must be logged in to reply to this topic.