I'm using A-Frame and I'd like to know if there's a component or a way to smoothly rotate from current direction towards another over a few secs. I plan to use this with the alongpath component just before playing the movement on my camera. Thanks!
Related
Here is a playground to illustrate my problem: https://playground.babylonjs.com/#V181I2#34
On my scene I’m trying to replicate the camera’s behavior we have with paraview.
left drag → rotation around some point. OK
right drag → panning of the camera, but without changing the rotation center. I managed to do that using camera.targetScreenOffset thanks to a Playground I found here (https://playground.babylonjs.com/#EBPQH9#43 → many thanks to the author !)
Now on double click (for example) on a mesh, I would like to change the center of rotation to the center of the mesh, but again without having the targeted mesh centered on the screen, without having the current view changed the slightest.
I’ve been searching a lot how to do that without success.
From my understanding, in order for the target mesh not to be automatically centered:
modifying the camera position is useless. It would only change the perspective.
setting the right values for the targetScreenOffset would work. But I don’t know how to determine them. I’ve been looking for the right way to project a distance computed in the world coordinate system (between 2 successive camera targets) to coordinates for the targetScreenOffset property, without success. I don’t even understand the units used by that property.
there must be some other ways ?
Right now I don’t feel qualified enough to write the camera’s behavior from scratch.
Would anyone be able to help me or point me in the right direction?
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've been working on a little space simulator demo using three.js and flightcontrols.js (an example that ships with three.js)
The demo is viewable at - http://www.zacharycarter.com/PrivateerRedux/demo.html
The control scheme is pretty simple - the mouse controls the camera and you left click to fire a projectile.
I'm having a little bit of trouble with how I'm spawning my projectiles. Currently I'm setting their rotation to the same rotation of my camera which I believe is what is causing my problems.
You'll notice that as you rotate the camera around the game world, and continue firing projectiles, that the position and orientation of the projectiles quickly becomes whacky.
I'm using quaternions to represent my camera's rotation but I also derrive the Euler angles from the quaternion before setting my projectiles rotation to match that of my cameras.
Any ideas as to what I'm doing wrong here? I have a feeling I need to figure out a constant front facing rotation from my camera rotation but I'm not quite sure how to do that.
Thanks!
If I understand this correctly, I think your problem is that you're applying world transformations and local transformations (i.e rotation in world space to have bullets fly in the right direction and rotation of bullets around the bullets' local axes) incorrectly. It seems they're all being applied in the same space.
Instead of writing up a whole new example, however, I'll leave it to the old, trusty internet to hand us some guidance on the issue using the common example of a solar system.
This might enlighten you:
http://docs.techsoft3d.com/visualize/3df/latest/Hoops3DGS/prog_guide/03_3_viewing_modelling_matrices.html
(have a look at figure 3.3.2.b)
...and here's an OpenGL example demonstrating the same thing:
http://www.codemiles.com/c-opengl-examples/solar-system-transformations-t7292.html
There's the theory anyway, hope that helps!
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.
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.