Tutorial: Away3D TypeScript: Rotate Camera Around Center

In this short tutorial, we will demonstrate how to rotate the camera around the center point (0, 0, 0), by moving the mouse left and right.

What we will need to develop to achieve this effect.

  • Start the animation without a spin. To do so, set the starting position to the center of the container element.
  • Setup a mousemove listener.
  • Get the X position of the mouse in relation to the container element and the client window.
  • Restrict the mouse input to the edges of the container element.
  • Reposition the camera on every frame, facing the correct direction

This tutorial builds off of the Away3D TypeScript: Template. All the new or changed code will be highlighted in the full code block below.

RotateCameraAroundCenter.ts

Line 20 declares a private variable named _mouseX of type number.

Line 45 sets the starting value of _mouseX to half the value of the container element’s width. This is so the animation starts without the camera rotating.

Line 46 creates a listener for whenever the mouse moves on screen. Then passes that event to our privately defined onMouseMove() method.

Line 73 comments out the line that spins our cube object around its Y axis. You could also just delete this line. We don’t need it.

Lines 75-77 work together to position the camera correctly.

Line 75 repositions the camera to the center of the universe at (0,0,0). However remember that in line 45 we told the camera to look at the center from its distant position. It is still looking at the center from that angle. Which is important in line 78.

Line 76 rotates the camera around the Y axis. The amount it rotates varies depending on the position of the mouse. The farther from the center of the container element the mouse is, the faster the camera will rotate. I multiplied by 2 to speed things up. (this._mouseX – this.away3DContainer.offsetWidth*.5) calculates how far from the center of the container element the mouse is. If it is negative the camera will rotate left, if positive, the camera will rotate right. The larger the number the faster it will spin. **Note, the words divided by should just be the simple forward-slash divided sign. The code reader kept throwing an error if I put it in.** We then divide by the width of the container to compensate for the container’s responsive size. You can change the values to suit your needs, they are arbitrary to my liking for this particular example.

Line 77 backs the camera up 612 units. I use 612 because using geometry I calculated out how far from the center the camera was when I set the Y to 500 and the z to -500 when I first set up the camera. Also, remember that the camera is still angled the same as when we originally set it up by pointing it to the center of the universe. So think of the front facing the center, and the back pointing out into space. That is why we use the moveBackwards() method to reposition the camera 612 units.

Lines 82-91 sets up a onMouseMove method. This will set our _mouseX relative to the clientX against our container element’s position. The _mouseX will then drive the speed of the angle rotation in our onEnterFrame() method.

Lines 84-85 tests if the mouse is farther left than the left edge of our container element. If it is, set the _mouseX to 0.

Lines 86-87 tests if the mouse is farther right than the right edge of our container element. If it is, set the _mouseX to the container element’s width.

Lines 88-89 if the mouse is within the container element’s left and right side, set _mouseX to the current mouse’s X position, adjusting for the relative position of the container element.

Compile and Test in HTML

Remember, this is just the TypeScript file. You still need to compile the TypeScript file into a JavaScript file for browsers to read. For a refresher on how to do that refer to Away3D TypeScript – Getting Started.
Lastly, to implement the complied JavaScript file into our HTML template document change the JavaScript file name from Template.js to what ever you named it. Refer to the tutorial Away3D TypeScript: in an HTML Document if you need assistance.

In Closing

This is an easy way to allow the user to rotate the camera around a centralized object(s). The speed can be adjusted for the specific scene. You could take out the mouse controls and just rotate the camera automatically at a specified speed. However for even more user camera control, look forward to the tutorial Away3D TypeScript: Hover Controller. Which uses Away3D‘s native HoverController.

If you liked this tutorial, you can follow us on Facebook or Twitter to keep an eye out for more tutorials.

Posted in Away3D TypeScript, HTML, JavaScript Tagged with: , , , , , , , ,

Leave a Reply

Your email address will not be published. Required fields are marked *

*