I'm using React Three Fiber Drei HTML to display some textfields etc in a 3D scene.
I need to place some UI around the textfield and can't work out how to calculate the dimensions in Three coordinates.
i.e. if the div is 400px wide.
I'm getting close with 400/ viewport.factor / distanceFactor
But it's not quite right.
How do I translate pixel width to Three factor?
Related
I'm adding borders to various images in a .pdf document. The borders all have the same width, but in the .pdf the borders have different widths. It is more pronounced as the width of the border increases.
Also, is there a way to move the border outside of the image, so that it is not covering any of the image using the methods of the image class? I realize I can first put a filled rectangle and then add the image on top of the rectangle as an option. Just curious as to if this can be done with methods from the Image class.
Here is the code snippet
magazine.open();
canvas = pdfw.getDirectContent();
image = Image.getInstance("a.JPG");
image.setBorder(Rectangle.BOX);
image.scaleAbsolute(200,200);
image.setBorderWidth(50);
image.setAbsolutePosition(50,10);
//canvas.addImage(image);
magazine.add(image);
image = Image.getInstance("b.jpg");
image.setBorder(Rectangle.BOX);
image.scaleAbsolute(200,200);
image.setBorderWidth(50);
image.setAbsolutePosition(50,230);
//canvas.addImage(image);
magazine.add(image);
I fear you'll have to work with the workaround you described.
There are two ways to define a border for an image:
image.setUseVariableBorders(false);
This is the default. This is what you have (even though you aren't calling the method explicitly).
In this case, the thickness of the border is distributed in a way that half of the line width is inside the rectangle and half of the line width is outside of the rectangle. Maybe that's what's causing the effect that the difference you notice is more pronounced as the border width increases.
Then there is:
image.setUseVariableBorders(true);
Now the borders will be drawn inside the area needed for the image. This is useful for tables (both PdfPCell and Image are subclasses of the Rectangle class where these methods are defined), but I fear it doesn't help you in the case of images.
So your best chance is to add the border using a workaround.
I am using fabric.js for html 5 interactive canvas app. If the object scales larger than the canvas, the controls go invisible outside canvas. How to make it visible outside the canvas or is there a way to style those controllers in css.
So, in fabricjs controls are rendered on the canvas, so having controls outside canvas it is not possible.
You can still obtain the effect in this way, this is just a trace.
Make canvas big as 100% of window, or anyway very bigger than drawing area.
Then you can clip the drawing canvas with a rectangle.
If you need borders to define the drawing area you can still put an overlay image as fabricjs allow you.
If you need to have controls near the drawing canvas you will have to position them OVER the non drawing part of the canvas.
This will give you some additional tasks:
When you create some object you have to be sure that they go in the drawing area. If you consider position of objects, you have to consider that a translation has to be applied, because you have absolute position while user will position the object watching a fake top left corner of a drawing area and not the top left corner of the canvas.
The best thing you can do is make a larger canvas, but limit the drawing area to a limited part, like a margin. Not easy because after that you always need to consider the margin when making other calculations, but it is possible.
I've got a question about getting sprites to work with three.js using perspective and orthogonal cameras.
I have a building being rendered in one scene. At one location in the scene all of the levels are stacked on top of each other to give a 3D view of the building and an orthogonal camera is being used to view it. In another part of the scene, I have just the selected level of the building being shown and a perspective camera is being used. The screen is divided between the two views. The idea being the user selects a level from the building view and a more detailed map of that selected level is shown on the other part of the screen.
I played around with sprites for a little bit and as far as I understand it; if the sprite is being viewed with a perspective camera then the sprite's scale property is actual it's size property and if a sprite is being viewed with an orthogonal camera the scale property scales the sprite according to the view port.
I placed the sprite where both cameras can see it and this seems to be the case. If I scale the sprite by 0.5, then the sprite takes up half the orthogonal camera's view port and I can't see it with the perspective camera (presumably because for it, the sprite is 0.5px x 0.5px and is either rounded to 0px (not rendered, or 1px, effectively invisible). If I scale the sprite by say 50, the the perspective camera can see it (presumably because it's a 50px x 50px square) and the orthogonal camera is over taken by the sprite (presumably because it's being scaled by 50 times the view port).
Is my understanding correct?
I ask because in the scene I'm rendering, the building and detailed areas are ~1000 units apart on the x-axis. If I place a sprite somewhere on the detail map I need it to be ~35x35 pixels and when I do this it works fine for the detail view but building view is overtaken. I played with the numbers and it seems that if I scale the sprite by 4, it starts to show up on my building view, even though there's a 1000 unit distance between the views and the sprite isn't visible with the perspective camera.
So. If my understanding is correct then I need to either use separate scenes; have a much bigger gap between views; use the same camera type for both views; or not use sprites.
There are basically two different ways you can use sprites, either with 2D screen coordinates or 3D scene coordinates. Perhaps scene coordinates are what you need? For examples of both, check out the example at:
http://stemkoski.github.io/Three.js/Sprites.html
and in particular, when you zoom in and zoom out in that demo, notice that the sprites in-scene will change size, while the others do not.
Hope this helps!
I'm trying to plan a way to draw a 3 by 3 grid of images using Canvas2D so that the canvas takes up the full width and height of the browser window (and so each image is 1/3 the width and height).
This step is quite simple, but how would I achive this so that all the images resize correctly when the browsers window is resized?
The first part of this question should be answered within this SO thread.
Then there are ways to get the actual width and height of the browser window. The relevant properties are window.innerWidth and window.innerHeight. When the resize event is triggered you'll want to run a function that finds the values of these properties and divide them by 3 to get your grid dimensions. Note that resizing the canvas will clear all bitmap data stored on it.
I have started learning CANVAS. After i started drawing some basic shapes, i wanted to make some modifications to them. For example, I am confused of how to modify length and width of rectangle. Should i have to clear the canvas and redraw or can i capture the object of that rectangle like the objects in java script.
The canvas is a raster graphics surface. modifying length and width of a rectangle is a vector action. It is possible to scale a raster, but losses in quality can/will occur. You can use vector graphics in the form of SVG. But if it is only a rectangle, use a div with a border overlay-ed on your canvas.