I'm trying to build a Flower of Life VR example using A-Frame.
The closest thing that I found is using the opacity property in <a-circle>.
Is there a way to create just the border of the circle?
Not sure if it fits your use case but you could use a cylinder with a small height:
https://aframe.io/docs/1.0.0/primitives/a-cylinder.html
Or a tube:
https://github.com/donmccurdy/aframe-extras/tree/master/src/primitives
Or just a flat plane with png texture with a circle with transparency
Related
I'm trying to make an animation with CSS. I need to rotate the images following the lines in the orbit, is not a circle. Its like a ellipse.
Like this image.
Image showing how should be the movement
Here is some demo of what I managed to do
https://codesandbox.io/s/orbit-animation-xhw3o
Any help will be appreciate =D
You can extract the orbits d property from your header-image.svg file, and use them as CSS motion paths.
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Motion_Path
How can i add rounded edges/border radius to a a-plane?
<a-plane position="1 0.75 -3" geometry="width: 1.25; height: 1.25;depth: 1.25;"></a-plane>
i have to make a square with rounded edges
Rounded corners with a-plane is not possible. You can use the slice9 component
The "easy" suggestion in this case would be to create a rectangle graphic with rounded corners and save it as a png file. This image should be used as the texture of the plane.
Make sure that you use material="transparent:true" in the a-plane tag to ensure that no background shows behind the rounded corners.
As others have stated, if this is a one off and simply for visual effects, your best option is to make a custom texture and simply texture the plane.
However, if you require multiple or need it to interact with other elements, then you would be better off creating a custom geometry or component. There is an example on the three.js website on how to extrude a flat square into an beveled object. You could create a custom component and feed it the length and width, this would then let you use the regular material options on it too.
It seems that generally a css clip-path is used to hide beginning at the edges of an element. I can use something like this:
clip-path:circle(70% at center);
and get something like this:
Is there a way I can invert that? I want my result to be something like this:
I want to clip the center of the image, not the edges. It's an SVG, so I tried something like this pen, animating a radial gradient: http://codepen.io/ethanclevenger91/pen/myMYwQ
But that didn't work like expected. There's the animated one and then one with what I assume the final step of the animation cycle should look like, but it doesn't. Any light on either of these would be appreciated.
You can use a still use a clipPath if you use it in its url form i.e. as svg markup. Draw the path outer rectangle clockwise and the inner ellipse (using two or more elliptical arcs) anticlockwise, drawing everything as a single path together with clip-rule="evenodd"
Alternatively you could use a <mask>. This is a simpler, but slower solution. Draw a white ellipse within the mask area and that part of the mask will be opaque.
So here's what ended up happening:
Since the background I was trying to match was a solid color, I gave the circles a stroke double their radius (since stroke is applied centered on the edge of the object) and then applied a clip-path the size of the object. Then I animated the stroke to 0. Will update with a link to the application when it's live.
I'm trying to create a grid of cubes that have a perspective that looks like you're looking at them from the top. Here is an example
http://imgur.com/elyJ5tu
This one is made by calculating how far the cube is from the middle and changing the border size. I want to make my own texture on the sides of the cube so I used CSS3 rotation to create the six sides of the cube and position them correctly to form a cube. Now I tried to recreate the effect by having the cubes tilt over the x and y axis depending on how far they are from the center and i got this:
http://codepen.io/anon/pen/yKmwg
As you can see it looks like they're on some kind of spherical surface. This is because the front and back side of the cube should not be rotating. Does anyone know of the proper way to do this. Thanks
Thank you #jozzas perspective origin was what i was looking for:
http://codepen.io/avovk/pen/yICrt
I have a problem on roating an Image on a canvas in gdi+, I am using the following code, however I find there are alias on the edge.
myPathMatrix.Rotate(GetDCAngle(), MatrixOrderAppend);
myPathMatrix.Translate(
GetDCX(),
GetDCY(),
MatrixOrderAppend);
canvas->SetTransform(&myPathMatrix);
canvas->Draw(XXX);
I used the following code to remove the alias, but failed.
canvas->SetInterpolationMode(InterpolationMode::InterpolationModeHighQualityBicubic);
canvas->SetSmoothingMode(SmoothingModeAntiAlias);
How can I remove the alias at rotated image's edges.
Many thanks!
It's been a while since I worked with GDI+, but I'd assume there's no effective option to remove antialiasing around the edges when rotating. The reason is basically that pixels are square. To rotate an image an amount other than a multiple of 90 degrees, you need to use some kind of interpolation to estimate pixel colours where there weren't really pixels before.
So if there's nothing in the library to specifically take away antialiasing around the edges, have you thought about drawing hard lines in the background colour along the borders? It should be easier to draw those lines without any antialiasing.