Spinning the avatar around this pole is what it means to rotate the avatar
around the y-axis.Don’t Forget About avatar.rotation!
If you tried turning marker.rotation instead of avatar.rotation, you may have noticed
that not only did the avatar spin, but everything else seemed to spin as well.
This is because we attached the camera to the avatar’s marker:varmarker =newTHREE.Object3D();
scene.add(marker);marker.add(camera);Think of the marker as an invisible box that holds the avatar’s parts. By
adding the camera to the marker, we’re sticking it to one side of the marker.
If we spin the box, then the camera has to go along with it:This is also why we added the hands and feet to the avatar’s head instead of
to the avatar’s marker. When we turn the avatar inside the marker, its hands
and feet need to move with it—not stay still with the marker.8.4 Animating the Spin
When we turn our avatar, it’s immediately facing the new direction. Let’s
make it a little more realistic by animating a turn to the new direction. For
that, we’ll need a new JavaScript library. This library will help us animate
between different positions and rotations. The library is called Tween.For this, go to the top of your code (the very top, not just to the START CODING
ON THE NEXT LINE line). Add the <script> tag for Tween.js, as shown:<body></body>
<scriptsrc="http://gamingJS.com/Three.js"></script>
<scriptsrc="http://gamingJS.com/Tween.js"></script>
<scriptsrc="http://gamingJS.com/ChromeFixes.js"></script>Chapter 8. Project: Turning Our Avatar • 82
Prepared exclusively for Michael Powell report erratum • discuss