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

Question

我正在尝试使用three.js在悬停时使矩形更改颜色，但我只能始终做到这一点，而鼠标没有任何区别。我正在关注 guide关于使用的three.js 文档Raycaster .
这是我的代码

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()的来电必须发生在动画循环内。

由于您的对象在中间，您必须初始化 mouse矢量与 (-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/three@0.118.3/build/three.js"></script>