Please have a look at this page:
http://www.abhi.my/lab/3D-menu.html
If you haven't already guessed, I'm trying to emulate the new iOS notification animation (that's where I first saw it), and obviously, my two paltry div's aren't behaving like a full box...
Any idea what I'm doing wrong here...?
This is what I'd like to get close to: http://www.youtube.com/watch?v=pBgVbzBJqDc
You are only transforming you elements in 2d space, even though you are going for a 3d effect.
A working example:
http://jsfiddle.net/mrlundis/wU296/
The "bottom" span is positioned behind the "front" span by using translate3d(x,y,z) where y and z correspond to half of the elements height (it's rotated around it center point.) It should be possible to achieve the same effect using -webkit-transform-origin.
-webkit-transform-origin is also used to make sure the containing div rotates around it's center point on hover.
Related
I've been asked to build something similar to this so that customers can draw basics shapes of kitchen tops. Similar to that in the image below but also have dimensions.
It looks like konva has support for basic shapes like rectangle and circle etc and it also includes a transformer which allows for resizing. However, I think if I want to build a custom shape like the one in green and have individual sizing i.e. resize each individual line. I am going to have to build something myself.
I was hoping someone could point me in the right direction. I have seen an example where someone has used a "line" class which takes a series of points and then sets the attribute to closed which fills in the shape. Obviously I would need to extend this to allow the custom resizing. However, Im not sure this is the correct path to head down?
Any suggestions?
.
How about using rectangles and having an option to snap them together. It should be fairly simple to do the edge detection and snapping. Then show the result as a Konva.Line around the perimeter.
Then you can show all the control handles for the rectangles except those on the sides where another Rect has joined.
I'm trying to create a moveable 3D-view in three.js on top of a static 2D-rectangle image. Everything works fine, but I want the buildings at the upper edge to be "cut off" vertically so they appear to be placed visually correct on top of the static ground rectangle. Here are some pictures to illustrate the problem:
Desired appearance (only top of building is over the edge)
Wrong appearance (bottom of building floating over the edge)
So I want some kind of cut-off that slices the objects vertically at the top edge, however I'm unsure what the best method would be, I tried frustrum culling and putting the scene inside of a cube, but both of these didn't really work.
If that's not possible the next best solution might be to exclude objects that touch the edge from rendering completely, or what do you think?
I figured it out, apparently what i want is called "Clipping Planes" and three.js supports those natively. Sorry for the somewhat confusingly worded question.
I've been trying to work out how to clip / not render anything that falls outside of a box, exactly like how Godus works (pictured below: notice the clipping at the back)…
Originally, I experimented with constructive solid geometry (CSG) to manually split and clip every object that falls on the box boundary. However, this is hugely computationally intensive and isn't feasible for a system where I want to be able to scroll around and have the clipped area update in realtime.
Is there a way to achieve this in a way that runs in realtime without modification of the objects, perhaps with shaders or something else? I'm new to shaders and still don't quite understand them enough to know how to implement this myself.
I appreciate the help!
Can the camera go outside of the box? If not, just put a big cube around the area you want and give its inside faces a material.
If the camera can go outside of the box (which would be weird, since you'd be able to see through the back of the meshes) one thing you might try is using vertex colors to make all faces outside of your box the same solid color as the background.
I've been provided with 8 individual images (top left, top, top right etc) for a border around the main (fixed width) content box. If I was given a single image, I'd use border-image.
What's the best way to use the 8 images? Divs with absolute positioning? Or is it such a pain I should just combine them into one?
What's so hard about combining the images into one? It has numerous other advantages, like reducing the number of HTTP requests the client needs to make, for example.
An alternative is to use CSS3's multiple background image feature, where you'd set each image as a layer in your box.
Eric Myer used a technique whereby (just to explain technique) the image was a little circle. Then, that was the background graphic in four separate divs each abs positioned in the corners of a containing div w/relative position. Background position was changed for each and a regular border was used for the straight lines in effect getting rounded corners. The circle had to be filled with white or whatever bckgrnd color you used.
This way, one could expand. You still need to have the height expand should changes occur, right?
I'd make one for the top and bottom and a third that repeats on the Y for the middle, that way your box will expand if content is added. Height that is.
I currently have a FBX animation model of a biped moving slightly forward (positive Z axis), turning around 180 degrees, and starting to run in the opposite direction (negative Z axis).
However, I would like to completely mirror such animation, in other words, start heading the negative Z axis, and the turning forward the positive Z axis. This, preferably through 3dsMax.
I know what you must be thinking, "Why the hell doesn't he just rotate the transform component/object of his animation character??". Well, unfortunately the current code I am working on depends that the characters movement should be independent of the actual animation, among other limitations.
Apparently, according to our 3d designer here, there is no trivial "Rotate Animation" option in 3dsMax (does that check?), so I am looking for possible scripts that could help me out. Anyone ever heard of such solution? Thanks in advance.
Create a dummy aligned to the root of your model.
Link the root of the model to that dummy.
With only the dummy selected, click the mirror button on the maintoolbar.
This will create a mirror image of the bones along with the animation on those bones. The only caveat is the names of the bones will also be mirrored. eg. the arm called 'right_arm' is now now on the left side.
If you need to preserve the animations to the original bones, look into using the animation mixer. This allows loading and saving animations onto characters. But it also has object mapping feature that allows objects of different names to load on saved animations.
So create a mapping. Save the mirrored animation. And load it back onto the original bones with that mapping.