three.js - 仅在 Hover Three.js 上更改颜色

Question

我正在尝试使用 Three.js 使矩形在悬停时改变颜色，但我只能让它始终执行此操作，而鼠标不会产生任何影响。我正在关注guide有关使用 Raycaster 的 Three.js 文档。

这是我的代码

var scene = new THREE.Scene();
scene.background = new THREE.Color(0xffffff);

var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
var raycaster = new THREE.Raycaster();
var mouse = new THREE.Vector2();
function onMouseMove(event) {
    // calculate mouse position in normalized device coordinates
    // (-1 to +1) for both components

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

}

var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
var geometry = new THREE.PlaneGeometry(2, 2);
var material = new THREE.MeshBasicMaterial({ color: 0xbbbbbb, side: THREE.DoubleSide });
var plane = new THREE.Mesh(geometry, material);
plane.rotation.z = Math.PI/3;
plane.rotation.x = -Math.PI/3;
scene.add(plane);

camera.position.z = 5;
function render() {
    // update the picking ray with the camera and mouse position
    raycaster.setFromCamera(mouse, camera);

    // calculate objects intersecting the picking ray
    var intersects = raycaster.intersectObjects(scene.children);

    for (var i = 0; i < intersects.length; i++) {
        
        intersects[i].object.material.color.set(0xff0000);

    }

    renderer.render(scene, camera);
}
window.addEventListener('mousemove', onMouseMove, false);
window.requestAnimationFrame(render);

如有任何帮助，我们将不胜感激。

Answer 1

您的代码中存在一些问题:

• requestAnimationFrame() 的调用必须发生在动画循环内。
• 由于您的对象位于中间，因此您必须使用 (-1, -1) 初始化鼠标向量。否则，第一个测试(直到光标位于 Canvas 上方)假设鼠标位于屏幕中心，从而直接与您的对象产生交集。
• 您必须更新一次相机的世界矩阵，以便第一个相交测试正确。

var scene = new THREE.Scene();
scene.background = new THREE.Color(0xffffff);

var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
var raycaster = new THREE.Raycaster();
var mouse = new THREE.Vector2(-1, -1);

function onMouseMove(event) {
  // calculate mouse position in normalized device coordinates
  // (-1 to +1) for both components

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

}

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

var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
var geometry = new THREE.PlaneGeometry(2, 2);
var material = new THREE.MeshBasicMaterial({
  color: 0xbbbbbb,
  side: THREE.DoubleSide
});
var plane = new THREE.Mesh(geometry, material);
plane.rotation.z = Math.PI / 3;
plane.rotation.x = -Math.PI / 3;
scene.add(plane);

camera.position.z = 5;
camera.updateMatrixWorld();

function render() {

  requestAnimationFrame(render);

  // update the picking ray with the camera and mouse position
  raycaster.setFromCamera(mouse, camera);

  // calculate objects intersecting the picking ray
  var intersects = raycaster.intersectObjects(scene.children);

  if (intersects.length > 0) {

    intersects[0].object.material.color.set(0xff0000);

  } else {

    material.color.set(0xbbbbbb);

  }

  renderer.render(scene, camera);
}

render();

body {
  margin: 0;
}
canvas {
  display: block;
}

<script src="https://cdn.jsdelivr.net/npm/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b9cdd1cbdcdcf98997888881978a" rel="noreferrer noopener nofollow">[email protected]</a>/build/three.js"></script>