0

我正在做这个惊人的实验,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 轴?

4

2 回答 2

0

通常,您可以根据需要逐个应用任意数量的转换。它们只是按某种顺序相乘的深度矩阵。

但是,特别针对您的情况:设置camera.position.x/y/zcamera.lookAt()之后的语义意味着此代码不会旋转地球,而是绕着相机运行,围绕地球恰好所在的位置。这是一件好事,因为可能有一个单独的位置可以实际旋转地球,它可能被称为“模型转换”或类似的东西。
如果该方法本身适合您使用的框架/引擎,我建议对模型本身进行定时旋转,并且可以使用原始代码片段使用鼠标来完成对相机的旋转(特别是因为这distance件事显然与相机)。

于 2018-04-26T09:04:13.550 回答
0

您可以做的是将代码手动旋转地球,然后添加一些修改。

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);
}
于 2021-01-28T22:09:23.477 回答