如何使用 Three.js 制作视差效果

Question

我想使用 Three.js 对鼠标移动制作视差效果。基本上我想在画布上生成一堆云，并希望它们在移动鼠标时在 x 轴上移动。

所以我已经尝试将云作为图像添加到场景中。我怎样才能将鼠标移动与这些云联系起来？或者我应该以不同的方式向场景添加云？

我如何添加云：

    var imgCloud = new THREE.MeshBasicMaterial({ 
        map:THREE.ImageUtils.loadTexture('img/cloud.jpg')
    });
    imgCloud.map.needsUpdate = true;

    // Cloud
    var cloud = new THREE.Mesh(new THREE.PlaneGeometry(200, 200), imgCloud);
    cloud.overdraw = true;
    scene.add(cloud);

Answer 1

您需要向窗口添加事件侦听器以获取鼠标位置。然后您可以使用它来单独修改所有云的位置或仅修改场景的位置。

window.addEventListener('mousemove', onMouseMove, false);

function onMouseMove(event) {
    scene.position.x = (event.clientX - window.innerWidth / 2);
}