Three.js实现OBJ模型X轴平滑180度旋转的技术求助

Hey there! The problem with your current code is that it sets the rotation value instantly—no wonder it feels jarring instead of smooth. Let's fix that with proper animation techniques tailored for Three.js. Below are two reliable approaches to get that polished spin effect:

Approach 1: Use Tween.js (Recommended for Ease of Use) #

Tween.js is a lightweight tweening library that integrates seamlessly with Three.js, making it easy to create smooth transitions without writing tons of custom code.

Steps: #

1. First, include Tween.js in your project (use a CDN or download it locally):

   <script src="https://cdn.jsdelivr.net/npm/@tweenjs/tween.js@18.6.4/dist/tween.umd.js"></script>
   

2. Update your button click handler to trigger a tween animation:

   // Assume your loaded OBJ model is stored in the `object` variable
   const enterButton = document.querySelector('button'); // Target your "Click to Enter" button
   
   enterButton.addEventListener('click', () => {
     // Calculate target rotation: subtract π radians (180°) from current X rotation
     const targetRotationX = object.rotation.x - Math.PI;
   
     // Create and start the smooth tween animation
     new TWEEN.Tween(object.rotation)
       .to({ x: targetRotationX }, 1000) // 1000ms = 1 second duration (adjust as needed)
       .easing(TWEEN.Easing.Quadratic.InOut) // Smooth in-out easing (try other easings too!)
       .start();
   });
   

3. Critical: Add TWEEN.update() to your Three.js animation loop to keep the tween running:

   function animate() {
     requestAnimationFrame(animate);
     TWEEN.update(); // Don't skip this line!
     renderer.render(scene, camera);
   }
   animate();
   

Approach 2: Custom Easing with requestAnimationFrame #

If you prefer not to add an external library, you can implement a smooth transition manually using linear interpolation (lerp) in your animation loop.

Code Example: #

let isRotating = false;
let targetRotationX;
const rotationEaseFactor = 0.05; // Adjust to control smoothness (smaller = slower/smoother)

const enterButton = document.querySelector('button');
enterButton.addEventListener('click', () => {
  if (!isRotating) {
    isRotating = true;
    targetRotationX = object.rotation.x - Math.PI;
  }
});

function animate() {
  requestAnimationFrame(animate);

  // Handle smooth rotation if animation is active
  if (isRotating) {
    // Gradually approach the target rotation with linear interpolation
    object.rotation.x += (targetRotationX - object.rotation.x) * rotationEaseFactor;

    // Stop animation once we're close enough to the target (prevents jitter)
    if (Math.abs(object.rotation.x - targetRotationX) < 0.001) {
      object.rotation.x = targetRotationX; // Ensure we land exactly on the target
      isRotating = false;
    }
  }

  renderer.render(scene, camera);
}
animate();

Pro Tips: #

• Adjust the duration (in Approach 1) or rotationEaseFactor (in Approach 2) to match your desired animation speed.
• Experiment with different easing functions in Tween.js (like TWEEN.Easing.Cubic.InOut) to get the exact feel you want.
• Make sure your Three.js animation loop runs consistently (even when no animation is active) to ensure the transition works seamlessly.

内容的提问来源于stack exchange，提问作者Sasith