自動旋轉 WebGL 地球

Question

我正在做這個驚人的實驗， WebGL Globe ，它真的很棒。

我已經改變了一些功能來播放並使它們適應我想要的。 一種是函數渲染。

原來的：

function render() {     
    zoom(curZoomSpeed);

    rotation.x += (target.x - rotation.x) * 0.1;
    rotation.y += (target.y - rotation.y) * 0.1;
    distance += (distanceTarget - distance) * 0.3;

    camera.position.x = distance * Math.sin(rotation.x) * Math.cos(rotation.y);
    camera.position.y = distance * Math.sin(rotation.y);
    camera.position.z = distance * Math.cos(rotation.x) * Math.cos(rotation.y);

    camera.lookAt(mesh.position);

    renderer.render(scene, camera);
}

修改的：

function render() {
    var timer = Date.now() * 0.0001;

    zoom(curZoomSpeed);

    rotation.x += (target.x - rotation.x) * 0.1;
    rotation.y += (target.y - rotation.y) * 0.1;
    distance += (distanceTarget - distance) * 0.3;

    camera.position.x = (Math.cos( timer ) *  960);
    camera.position.y = distance * Math.sin(rotation.y);
    camera.position.z = (Math.sin( timer ) *  960) ;

    camera.lookAt( scene.position );

    renderer.render(scene, camera);
}

現在我的地球可以完美地自動旋轉，但是我不能拖動地球並在 X 軸和 Z 軸上用鼠標旋轉它，只有 Y。我怎樣才能使用這個自動旋轉功能並且不失去鼠標的旋轉控制在軸 X 和 Z 中？

Answer 1

通常，您可以根據需要依次應用任意數量的轉換。 它們只是按某種順序相乘的深度矩陣。

但是，特別是對於您的情況：設置camera.position.x/y/z並在之后使用camera.lookAt()的語義意味着此代碼不會旋轉地球，而是圍繞相機圍繞一個位置旋轉地球恰好是。 這是一件好事，因為可能有一個單獨的位置可以讓您真正旋轉地球，它可能被稱為“模型轉換”或類似的東西。
如果該方法本身適用於您使用的框架/引擎，我建議對模型本身進行定時旋轉，並且可以使用原始代碼片段用鼠標繞相機旋轉（特別是因為distance事物顯然與相機）。

Answer 2

您可以做的是將代碼手動旋轉地球，然后添加一些修改。

function render() {
var timer = Date.now() * 0.0004;

zoom(curZoomSpeed);

rotation.x += (target.x - rotation.x) * 0.1;
rotation.y += (target.y - rotation.y) * 0.1;
distance += (distanceTarget - distance) * 0.3;

camera.position.x = distance * Math.sin(rotation.x) * Math.cos(rotation.y);
camera.position.y = distance * Math.sin(rotation.y);
camera.position.z = distance * Math.cos(rotation.x) * Math.cos(rotation.y);

camera.position.x = camera.position.x + (Math.cos( timer ) *  500);
camera.position.y = distance * Math.sin(rotation.y);
camera.position.z = camera.position.z + (Math.sin( timer ) *  500) ;

camera.lookAt( scene.position );

renderer.render(scene, camera);
}