Rotation with cube ! about three.js HOT 19 CLOSED

Maybe with quaternions? I haven't had a chance to play with that yet myself.

Maybe this helps too:
http://stackoverflow.com/questions/3809788/3d-rotation-with-axis-angle

from three.js.

I would first calculate the rotation A that the camera has towards the cube (with cos() and sin() from the positions). Then I would check the cube's rotation B and rotate the cube so that its rotation B goes towards the calculated rotation A.

If you don't care which face comes towards the camera, you can also rotate to rotation A+90, rotation A+180 or rotation A+270 degrees...

I probably sound vague, but I hope you understand what I mean...

from three.js.

That would indeed work for rotation.y, but it breaks if you have other rotations in other axis. Although you have a valid point. If it's just a cube, you can hardcode the rotations for each face and tween them.

from three.js.

I thought this would work for all directions, but now that I try, I only get it to work for y and not for x and z indeed ;-)

Example of rotation.y can be found here. http://fabricasapiens.nl/projecten/spel/facecube.html (move with WASD and mouse)
If you comment out line 116 and 117, then the cube will not face the camera.

Let me know if you get z and x to work!

from three.js.

Thanks a lot for your answer.
In fact, if we use this one : https://github.com/mrdoob/three.js/blob/master/examples/geometry_cube.html , I just one to rotate the cube and then when the rotation is finished, I just want to see only one face of the cube.. the the rotation may be something * Math.PI if I good understsand.. but this rotation isn't good in relation with the mouvement we made with the cube at begining !

Anybody see what I mean ?

One more time.. sorry for my english =D it is miserable !

Thank you !

from three.js.

So you want to do something like this?
http://www.flash-filter.net/cube-transition-effect.phtml

from three.js.

Right ! but the rotation depends of the mouse's mouvement. But the rotation must finished with showing one face of the cube. You know ?

from three.js.

I understand what you mean, and I think you should first try to understand more of 3D and of THREE.js so that you can better understand what is going on!

Then, by taking my example as a basis, you should be able to do it! Of course, you can ask any question, but we cannot do everything :-)

from three.js.

what fabricasapiens said :)

from three.js.

well, I already do this : http://siggj.ch/test/geometry_cube.html
and i try to read the three.js and understand more 3D but i think it is just a little thing i don't understand .. you know ?

from three.js.

You should change your onDocumentMouseMove into this:

function onDocumentMouseMove( event ) {
haveSlided = true;
mouseX = event.clientX - windowHalfX;
mouseY = event.clientY - windowHalfY;
targetRotationY = (YtargetRotationOnMouseDown + ( mouseY - mouseYOnMouseDown ) * 0.05) ; // On définit la position finale en x
targetRotationX = (XtargetRotationOnMouseDown + ( mouseX - mouseXOnMouseDown ) * 0.05) ; // On définit la position finale en y
// There we go
var targetFaceY = Math.atan2( (camera.position.z-cube.position.z), (camera.position.x-cube.position.x) )
var numberOfRotations = Math.floor(targetRotationX / (Math.PI*2));
// Recalculate targetRotationX
targetRotationX = targetFaceY + (numberOfRotations * 2 * Math.PI);
// Todo: check which face is closest to existing targetRotation, and choose that one to rotate to
}


from three.js.

thank you ! it works very well but at the moment.. it only show the same face, so i try to change this for do a random face !

Just one question, why do you use "2" to multiply ?

from three.js.

I don't use 2 to multiply, it's the standard Math function atan2... It calculates the inverse tangens of a certain y and x. Look it up :-)

from three.js.

numberOfRotationsY * 2 * Math.PI
targetRotationX / (Math.PI*2)
... It was a joke ?

from three.js.

Oh those parts... I thought you were talking about the atan2 function.

I multiply with 2 * Math.PI because the rotations are in Rad (as far as I know), and 2 * PI RAD is one full rotation...!

from three.js.

I see this is an old thread, but I was doing something similar and figured I share my current results.

http://gabuku.com/test/

I wanted a picture cube, but I didn't want to use a perspective projection since we can't smoothly interpolate textures on a canvas except through affine transforms or face subdivision(which takes a huge performance hit). I also wanted it to work pretty much anywhere(Android, iOS, IE, FF, Chrome, Safari, etc). It uses regular canvases for every browser except IE6-IE8 which use FlashCanvas.

It's not very smooth on iOS3/iOS4(~15fps), but on iOS5+ and pretty much everywhere else it's very nice(~60fps). If you change it so it only does the calculations to rotate in one axis then it's even pretty smooth on the original iPhone.

from three.js.

@gabebear can you explain what have you done here? I see that you don't use ThreeJs in it but still it works relly smooth on iPhone4 and iPad2 and there is no problem with images/textures.

from three.js.

All I really did was port this:
http://www.senocular.com/flash/tutorials/transformmatrix/examples/3dpicturebox.html
to Javascript/Canvas

They have a pretty kickass explanation of everything at:
http://www.senocular.com/flash/tutorials/transformmatrix/

from three.js.

@gabebear I see that those are affine transformations. I just pray that Apple would enable WebGL on it's devices because it's stupid that it is not enabled.

from three.js.