Three.js - Xoay một quả cầu xung quanh một trục nhất định

Question

Tôi gặp sự cố. Trong Three.js, tôi muốn xoay một quả cầu (Trái Đất) xung quanh trục nghiêng 23,5 degs. Tôi tìm thấy sphere.rotation.x, sphere.rotation.y và sphere.rotation.z, nhưng khi tôi kết hợp chúng với tỷ lệ chính xác, vòng quay của quả cầu khá lạ - nó không có trục quay vĩnh viễn. Tôi nghĩ rằng tôi cần một chức năng như sphere.rotation.vector (1,0, -1). Có ai biết làm thế nào chức năng này được gọi và làm thế nào cú pháp chính xác là?

Rất cám ơn bạn đã trả lời!

Answer 1

Bạn cần sử dụng quaternions cho việc này. This video giải thích quaternions là gì và cách chúng được sử dụng trong đồ họa 3D.

Bạn có thể xây dựng một quaternion như thế này:

quaternion = new THREE.Quaternion().setFromAxisAngle(axisOfRotation, angleOfRotation); 

Sau đó, bạn áp dụng nó để đối tượng của bạn bằng cách:

object.rotation.setEulerFromQuaternion(quaternion); 

Bạn cũng có thể đạt được điều này bằng cách sử dụng hệ thống phân cấp đối tượng. Ví dụ: bạn có thể tạo một phiên bản Object3D() và nghiêng nó 23,5 độ, sau đó tạo một hình cầu (Earth) và thêm nó vào đối tượng nghiêng. Quả cầu sẽ xoay quanh trục Y nghiêng. Quaternions tuy nhiên, là công cụ tốt nhất để giải quyết điều này.

Answer 2

Bạn không cần phải hiểu cách Euler góc hoặc quaternions làm việc để làm những gì bạn muốn. Bạn có thể sử dụng

Object3D.rotateOnAxis(axis, angle); 

Hãy chắc chắn rằng axis là một vector đơn vị (có chiều dài 1), và angle là trong radian.

Object3D.rotateOnAxis(axis, angle) quay trên trục trong không gian đối tượng.

three.js r.67

Answer 3

var quaternion = new THREE.Quaternion(); 
var object = scene.getObjectByName('xxx'); 
function render(){ 
    quaternion.setFromAxisAngle(new THREE.Vector3(0, 1, 0).normalize(), 0.005); 
    object.position.applyQuaternion(quaternion); 
} 

three.js phiên bản là 86, xem full example on codepen.