如何使用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);
}

Answer 2

只需捕捉鼠标位置，然后沿相对于新鼠标位置的轴移动相机即可。

​

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(
  75,
  window.innerWidth / window.innerHeight,
  0.1,
  1000
);

camera.position.z = 150;

var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// Add cloud
for (let i = 0; i <= 200; i++) {
  const geometry = new THREE.SphereGeometry(5, 32, 32);
  const material = new THREE.MeshBasicMaterial({ color: 0x3399ff, transparent: true, opacity: 0.8});
  const sphere = new THREE.Mesh(geometry, material);
  sphere.position.x += Math.round(Math.random() * 500) - 250;
  sphere.position.y += Math.round(Math.random() * 500) - 250;
  sphere.position.z += Math.round(Math.random() * 200);
  scene.add(sphere);
}

// Control
var mouseTolerance = 0.1;

document.onmousemove = function (e) {
  var centerX = window.innerWidth * 0.5;
  var centerY = window.innerHeight * 0.5;

  camera.position.x = (e.clientX - centerX) * mouseTolerance;
  camera.position.y = (e.clientY - centerY) * mouseTolerance;
};

//Render loop
function render() {
  requestAnimationFrame(render);
  renderer.render(scene, camera);
}
render();

body{
  margin: 0;
  overflow: hidden;
  height: 400px;
  width: 600px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r70/three.min.js"></script>

​

可以像往常一样使用document.onmousemove获取鼠标位置。摄像头可以使用camera.position.[axis]重新定位。你可以玩不同的轴，看看它是什么样子。请注意，一些物体必须比其他物体更靠近相机，否则看起来就不像视差。