Okay, so I'm trying to figure out how to make my 3d transitions seamless on a carousel I'm working on without transitioning the entire parent piece. I'm trying to create a cube effect that will be able to be utilized by as many slides as I want. Here's what I have so far, but I can't seem to make it seamless: http://jsfiddle.net/wDMHN/4/. Help!
You need to start each side of the cube at its transformed position relative to the face, so one side needs to be rotate 90, the other 180, and the other 270. You also need to set your perspective origin so all of your faces are rotating around the same point.
Check out this link
It uses the keyboard to rotate the cube, but it would be a very simple change to make it autonomous.
Related
I have a design where points would be displayed.Surrounding that I need to show stars which will start from the center of the points and move in all directions.Not sure how to start with this.
Find or make SVG image for the stars.
Use css animation and transform to make animation.
Put the stars at the center.
Rotate and move the stars.
Adjust the speed and the positions.
Fire the animation on a specific trigger.
To achieve this, you might need to learn from many examples.
I don't know how to explain this but the objects I make in ELEMENT 3D aren't 3D but more like 2.5D.
I made a video so you can see the problem.
https://sendvid.com/s1hv1ay3
My recording software didn't record the Element interface at 0:24, but I was trying to show in that interface that you could rotate it without problems.
You're not understanding how Element3D (and aspects of the AE interface) work. Think of the layer you apply it to as being its own window "into a 3D world". You don't rotate the layer itself, you rotate the objects within the Element3D world by changing the parameters in the timeline or Effects controls pane. You were using the rotate tool in the video with the Element3D-effected layer selected. Don't do that. Use the individual parameters within Element. Another way to rotate around the 3D object(s) is to use the camera. I suspect this is what you were attempting after seeing a tutorial or something. What you do is make a two-node camera and use the camera tool by cycling through the tool with the "c" key until you get camera rotate, which looks a bit similar to the rotate layer tool. With a two-node camera, rotating the camera allows you to rotate around the point of interest of the camera so it rotates around the object in 3D space. I suggest you get a more familiar with how 3D works in AE (which is not "true 3D", not 2.5D, but is "Planar 3D"; the Element3D plugin is one of the best 3D-integrated plugins working within this model).
don't ever move the layer the element 3d model is on.
Use the element effects controls (f3). usually found in group 1
I would like to add a sphere with a 2d gradient as texture to create a skydome. I read that in openGL this is often solved by rendering the skybox without depthtest in an additonal pass.
I disabled depthTest on my sphere so everything else is drawn in front of it, it's kinda giving me the disired effect but depending on the camera angle it clips through other objects in my scene.
I was looking at several examples which make use of THREE.EffectComposer and a second scene, I may be completely after the wrong thing here but I think that could solve this. The thing is I havent ever touched the effectComposer and have no idea at all how to work with it and which things i exactly need.
I would aprreciate any input on this, maybe I'm after the wrong stuff at all.
Here are two three.js examples in which a skydome with a gradient is created. They do not involve EffectComposer or disabling depth test.
http://mrdoob.github.com/three.js/examples/webgl_lights_hemisphere.html
http://mrdoob.github.com/three.js/examples/webgl_materials_lightmap.html
three.js r.55
You dont have to use a cone or other 3D-geometry to simulate a gradient sky.
I solved it using a canvas (with 3 gradient-spots, lightblue -> white (horizon) -> darkblue) and draw it as sprite in front of my camera with the right distance to it (fog-distance).
You only have to manage the distance when moving/rotating your cam.
Tip: Use mesh.scale.set (xx,xx,1) to zoom the canvas-texture to needed size.
I am trying to make a 3d transition/transformation so that when a link is click a bar run the length of my website rotates to reveal different options. However it currently looks very untidy, in that each face of the cube has gaps around it, and you can see each face of the cube, regardless of whether it not view (i.e when it is animating you can see text you should be able to see, it also gives the impression that bar grows in width when animating.
Is there anyway I can tidy this up?
I have made a fiddle which can be found here
I’m not sure about the gaps, but applying -webkit-backface-visibility: hidden to .face should sort out the visible text issue.
There‘s a good cube example at the end of this blog post which might help with the gaps — maybe you need to use translateX to get the faces into the right position?
I'm currently working on a WYSISYG editor that allows the user to move, resize and rotate shapes by directly manipulating them. The resizing seems to be fairly complex when the shape is rotated. I got this working for non-rotated shapes, but it will take some trigonometric calculations to resize shapes that are rotated. The registration point is always is the middle of the rectangle because this makes rotating a lot easier.
Before I start implementing this, I was wondering if anyone knew of any libraries or sample source code that does this, or could share some tips and tricks to calculate the transformations.
I have the following parameters:
rotation (in degrees)
width, height
x, y
mouseX, mouseY
I attached a screenshot of what I'm trying to accomplish and another one that has some lines drawn onto it that should allow me to deduct the trigonometric calculations. The cross is the cursor.
alt text http://www.herrodius.com/images/resize.jpg
alt text http://www.herrodius.com/images/resize_lines.jpg
You might look at flex-object-handles, in particular the more recent version 2.
I recommend Transform Manager - http://www.greensock.com/transformmanageras3/
It's actually not that hard. Use the mouse coordinates (mouseX / mouseY)from the rotated display object and they will be transformed for you!