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

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

{
    "resourceType": "Bundle",
    "type": "searchset",
    "total": 1,
    "entry": [
        {
            "resource": {
                "resourceType": "Patient",
                "name": [
                    {
                        "family": "Smith"
                    }
                ]
            },
            "search": {
                "extension": [
                    {
                        "url": "http://hl7.org/fhir/StructureDefinition/match-grade",
                        "valueCode": "certain"
                    }
                ],
                "mode": "match",
                "score": 0.88
            }
        }
    ]
}

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重新定位相机。您可以使用不同的轴进行游戏，并查看其外观。请注意，某些物体必须比其他物体更靠近相机，否则看起来就不会像视差

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

2 个答案: