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.
An error has occurred. Please try again later.
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
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.