0

Good evening,

I was using EaselJS and now I'm trying to figure out how to use ThreeJS.

In EaselJS, you can set the rotation point of an element on the canvas before rotating it, .but it seems impossible to do the same thing in ThreeJS.

So, how can I draw a Sphere very 30deg to form a circle, like a clock.

A sphere at 12, at 1 o'clock, 2 o'clock, 3 o'clock...

I can rotate my sphere (which is useless) and position it, but I don't know how to calculate the coordinates.

Can't wait to hear back from one of you, Jay

Jeremy Dicaire
  • 4,615
  • 8
  • 38
  • 62

1 Answers1

1

You need to translate then rotate each sphere. so translate each circle by the radius of the clock,

circle.translateZ(10);

then rotate it into place by rotating around the clock center. In this case around the y axis,

circle.rotateOnAxis(new THREE.Vector3(0.0, 1.0, 0.0), THREE.Math.degToRad(30*i));

Do that for each circle. Both libraries are based on a hierarchy scene with matrix rotations and translations. But one is 3D. Also the API is kinda different.

Culzean
  • 349
  • 3
  • 13
  • Yes I never worked in 3D before, it's quite a change! Thank you very much for your help ;-) You waved me a lot of time. – Jeremy Dicaire Apr 20 '14 at 13:49
  • I don't have access to a computer right now but I tried and it only rotates from the center of the object. (I replaced the sphere with a rectangle to see the transform operation) I'm going to pastr the code later today. – Jeremy Dicaire Apr 20 '14 at 17:42
  • 1
    Damn, this requires an extra 3DObject to act as a pivot. So this could just be another sphere. Then apply the rotation to the pivot. Each sphere is added the pivot object, and is thus a child of that object and not the scene. It can then be translated into place. This question and answer goes into more detail. http://stackoverflow.com/questions/15214582/how-do-i-rotate-some-moons-around-a-planet-with-three-js – Culzean Apr 20 '14 at 19:37
  • Thank you very much Culzean for your help. The link is very useful. – Jeremy Dicaire Apr 20 '14 at 20:03