three.js模型旋转

要旋转Three.js模型，您可以使用对象的rotation属性。这个属性是一个Three.js的Euler角，可以通过设置x，y和z属性来旋转对象。

例如，如果您想让一个模型绕y轴旋转45度，您可以这样做：

model.rotation.y = Math.PI / 4;

如果您想要平滑的过渡动画，可以使用Three.js的Tween库。您可以在Tween中设置起始角度和目标角度，并在指定的持续时间内平滑地将对象旋转到目标角度。

例如，如果您想在5秒内将模型绕y轴从0度旋转到90度，您可以这样做：

var targetRotation = Math.PI / 2;

new TWEEN.Tween( model.rotation )
    .to( { y: targetRotation }, 5000 )
    .easing( TWEEN.Easing.Quadratic.Out )
    .start();

这将使用二次缓动函数在5秒内平滑地将模型旋转到目标角度。您需要在渲染循环中使用TWEEN.update()来更新Tween库。

相关问题

three.js模型左右旋转

Three.js是一个强大的JavaScript库，用于在Web上创建交互式的3D图形和动画。在Three.js中，对模型进行左右旋转可以通过修改`THREE.Object3D.rotation`属性来实现。具体来说，你可以使用`rotation.x`控制绕X轴的旋转，`rotation.y`控制绕Y轴的旋转，而`rotation.z`控制绕Z轴的旋转。

例如，如果你想让一个模型向右旋转90度，你可以这样做：

let model = scene.add(new THREE.BoxModel()); // 假设model是一个Object3D
model.rotation.x = Math.PI / 2; // 右旋

如果你只想在特定方向上进行旋转，可以组合使用这些属性。如果你想持续旋转，还可以创建一个`THREE.Euler`对象，它可以更方便地管理旋转的组合。

three.js控制glb模型旋转

使用Three.js控制glb模型旋转可以通过以下步骤来实现：

1. 首先需要引入Three.js库和GLTFLoader.js库，可以在html中添加以下代码：

   <script src="https://cdn.bootcdn.net/ajax/libs/three.js/r128/three.min.js"></script>
   <script src="https://cdn.bootcdn.net/ajax/libs/three.js/r128/loaders/GLTFLoader.js"></script>

2. 加载glb模型并创建场景和相机：

   const loader = new THREE.GLTFLoader();
   let scene, camera;
   loader.load('path/to/model.glb', function(gltf) {
       scene = gltf.scene;
       camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
       camera.position.z = 5;
       scene.add(camera);
       scene.rotation.x = Math.PI / 2; // 旋转场景以便更好地查看模型
       animate();
   });

3. 创建一个渲染器并将其添加到DOM中：

   const renderer = new THREE.WebGLRenderer({ antialias: true });
   renderer.setSize(window.innerWidth, window.innerHeight);
   document.body.appendChild(renderer.domElement);

4. 创建一个函数来更新场景：

   function animate() {
       requestAnimationFrame(animate);
       scene.rotation.y += 0.01; // 控制模型的旋转速度
       renderer.render(scene, camera);
   }

5. 最后在HTML中添加一个canvas元素，将渲染器的dom元素赋值给canvas元素的context属性：

   <canvas id="canvas"></canvas>
   
   <script>
       const canvas = document.getElementById('canvas');
       canvas.getContext('2d').drawImage(renderer.domElement, 0, 0);
   </script>