Question

我们如何使用three.js创建类似于可见here的效果？

我们看到的其他解决方案似乎需要拖放来控制摄像机角度 - 我们希望将鼠标控制的位置放在摄像机指向的位置。例如，位于左上角的鼠标将始终将相机指向同一位置。是否有开源实现？

Answer 1

这并不复杂。

您可以在屏幕上聆听鼠标位置并重新计算到0-1 XY轴：

var mouse = new THREE.Vector2();

function onDocumentMouseMove( event ) {
        event.preventDefault();
        mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
        mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;    
}

此后你可以计算和设置相机旋转RAD：

function onDocumentMouseMove( event ) {
        event.preventDefault();
        mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
        mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;

        //default_x = your default camera x rotation
        //default_y = your default camera y rotation
        //s = sensitivity coeficient default 1 for 360° rotation, 0.1 for smaller angle 
        camera.rotation.x = (default_x*mouse.x)*s;
        camera.rotation.y = (default_y*mouse.y)*s;
}

当然，你只需要将一个相机放在带有纹理的球体内......

three.jsl - 如何创建交互式鼠标控制的360图像？

1 个答案: