We are building a tool for 3D view of home decoration, customers can click on a sofa and it will show or hide in the 3D view.
They provide me panorama images of the home background, and a sofa image of the same size but transparent except the sofa part.
I tried:
<a-sky src='background.jpg' />
<a-sky src='sofa.jpg' />
expecting them to overlay. But sofa image block the background, despite being transparent. More specifically the result is a sofa in empty white space, rather than a sofa in the given background(which is desired result).
How am I going to achieve my goal?
jpg format does not support transparency. Use png instead.
Set material:transparent property to true on sofa entity.
<a-sky src='sofa.png' material="transparent:true" />
Below is a working fiddle,
https://jsfiddle.net/od6gxgyL/1/
As a side note, A-Frame is adding grey border around the opaque part
of png image. Unable to figure out why this is happening. I would be glad to know if anyone has solved this issue.
Related
First, i'm sorry for my bad english, i'm french.
I would like know how can I add a texture (picture is a transparent gif), and "hide" the box to see only the texture.
Best regards
texture the box, and make the transparent parts transparent:
<a-entity material="src:linkToYourTexture;transparent:true >"
additionaly, try using .png's, not .gif's. There is a separate component for gif's tho.
transparent .png:
https://jsfiddle.net/z0fyxhv6/1/
Can html/css, natively, click through the transparent area of an image?
I'd like to place two buildings side by side. And if a user clicks on a transparent area (green) of the nearest image, the click would pass through and go the the farther (the taller one).
I've already checked, with no luck:
Click through transparent area on partially transparent image
Click area on sprite in canvas
html/css alone might be very difficult. Even plus javascript, because when you click on the red house picture, the event is triggered on the picture itself. And the green area you defined is not a square. it is hard to define such a area simply in html/css.
My suggestion would be add another picture of that green shape, with the exact content of it and put it on top of the red house picture.
As a result, you have three pictures with the farther one at bottom, the red house on top of the building, and the special shape made from the building on the top of the red house. So when people click on the transparent area, they actually click on the special shape instead click on the red house picture. Then you can attach a link to the special shape of green area so it link to the two levels building. This is the easiest method I can think about.
Hope it helps.
I'm trying to find a way to simulate the image-mask property in CSS; currently it isn't available in most browsers. Is there a JavaScript library that could work?
I figured out how to do the buckles by creating a white image with a transparent space in the shape of a buckle, and then set a background color, so the background color only shows through where the image is transparent. The problem is, I can't do that for each part, because the white edges that you aren't supposed to see would be visible against the color of the part behind it (Like if you had a black square, and then you used that technique to get a red circle on it, you would end up with a red circle on a white square on a black square.)
It sounds like you're using indexed transparency - you'll want to use PNG images with 8-bit alpha channels instead. Then have an <img /\7gt; for each "component" of your item (i.e. one for the belt, one for the buckle, etc) then use absolute positioning to put each one directly on top of the other. The 8-bit transparency will ensure they all look right.
<div id="previewArea">
<img class="layer2" src="buckle{color}.png" />
<img class="layer1" src="belt{color}.png" />
<img class="layer0" src="pants{color}.png" />
</div>
Of course you'd need some client scripting to swap out each image for the selected color/design.
An alternative option is to have a server-side process dynamically generate images based on given parameters, it results in simpler HTML but would be slower for your visitors - it might work as a fallback for clients that don't support scripting.
In an image like this, I want to remove the white background but keep the grayness of the dropshadow. Reomving mapping the actual image is not a problem!
This is what I enden up doing instead after lots and lots of trial and error.
Duplicate the layer with the paper in it.
Invert the new layer.
Painting the "paper-part" clear white
Using the inverted layer as a mask on the first layer.
Worked like a charm, perfect masking!
Two options that I can think of:
a) Edit the image in photoshop and make the background transparent.
b) Overlay the "white" background w/ a div overlay that has a white background.
a is the preferred option. Post a comment on this reply if you need me to do this for you.
did you make that image? Why not make the image on a transparent background?
But if you didn't make the image, I don't know if you really can unless you plan on putting it on another whitish background because the dropshadow itself is going to be a little transparent and whatever is underneath it will show through.
I am now writing a image viewer, It is used for view thumbnails.
As it is ugly, I decide to draw shadow round thumbnail.
There is background color.
I am using StretchDIBits to draw a shadow image at the location of thumbnail.
However it is really annoying that it cover the background color...
When the background is white, it looks perfect.
but if the backgound is not white, it has a white border.
so I make use of AlphaBlend, first draw the shadow image onto a DC, then use AlphaBlend onto the background. However, I can still see the white border.
Is there any why to generate a perfect shadow , no matter what background is.
Are you sure the shadow bitmap contains alpha values for the alpha channel ? I.o.w.: how are you creating the shadow bitmap: are you doing that by blurring a square on a transparent target or a white target? If the first, the shadow bitmap contains an alpha channel and should blend fine with the background. if the second, your shadow bitmap contains white fragments and thus will blend that white with the background.