Question

我正在尝试使用three.js在悬停时使矩形更改颜色，但是我只能始终使它执行更改，而鼠标没有任何区别。我正在遵循three.js文档中的guide，以使用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)向量。否则，第一个测试（直到光标位于画布上方）会假定鼠标位于屏幕的中心，从而直接与您的对象产生交集。
您必须一次更新相机的世界矩阵，以便第一个相交测试正确。

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>

仅在悬停three.js上更改颜色。

1 个答案: