Question

我正在使用这个惊人的实验， WebGL Globe ，这真的太棒了。

我已经改变了一些功能，并根据我的需要进行调整。一个是函数渲染。

ORIGINAL：

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);
}

现在我的地球仪完全自动旋转，但是我无法拖动地球并用我的鼠标在Axes X和Z中旋转它，只有Y.我怎么能使用这个自动旋转功能而不会失去旋转控制用鼠标放在AXES X和Z？

Answer 1

通常，您可以根据需要在彼此之后应用尽可能多的转换。它们只是深度上的矩阵，它们按某种顺序相乘。

但是，特别针对您的情况：设置camera.position.x/y/z并在之后设置camera.lookAt()的语义意味着此代码不会旋转地球仪，它绕地球仪环绕地球轨道运行碰巧是。这是一件好事，因为可能有一个单独的位置，你可以实际旋转地球，它可能被称为＆＃34;模型转换＆＃34;，或类似的东西。
如果方法本身适合您使用的框架/引擎，我建议在模型本身上进行定时旋转，并且可以使用原始代码片段使用鼠标进行轨道运行（特别是在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);
}

自动旋转WebGL Globe

2 个答案: