Three.js中如何实现球体悬停效果，鼠标悬停时变色？

Question

如何实现颜色变化的悬停效果？ 如何实现颜色变化的悬停效果？ 如何实现改变颜色的悬停效果？

社区您好，

我已经成功实现了一项功能，当我单击并按住鼠标按钮时，球体的颜色会发生变化。但是，我希望无需单击即可实现相同的效果，只需将鼠标悬停在球体上即可。社区您好，

我已经成功实现了一项功能，当我单击并按住鼠标按钮时，球体的颜色会发生变化。但是，我希望无需单击即可实现相同的效果，只需将鼠标悬停在球体上即可。

这是我当前代码的片段：\社区您好，

我已经成功实现了一项功能，当我单击并按住鼠标按钮时，球体的颜色会发生变化。但是，我希望无需单击即可实现相同的效果，只需将鼠标悬停在球体上即可。

这是我当前代码的片段： 你好社区，

我已经成功实现了一项功能，当我单击并按住鼠标按钮时，球体的颜色会发生变化。但是，我希望无需单击即可实现相同的效果，只需将鼠标悬停在球体上即可。

这是我当前代码的片段：

这是我当前代码的片段：

import * as THREE from 'three';
import './style.css';
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
import gsap from "gsap";

// Scene
const scene = new THREE.Scene();
// Create our sphere
const geometry = new THREE.SphereGeometry(3, 64, 64);
const material = new THREE.MeshStandardMaterial({
  color: "#00ff83",
});
const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);

// Sizes
const sizes = {
  width: window.innerWidth,
  height: window.innerHeight,
};

// Light
const light = new THREE.PointLight(0xFFFFFF, 70, 100, 1.7);
light.position.set(0, 10, 10);
scene.add(light);

// Camera
const camera = new THREE.PerspectiveCamera(45, sizes.width / sizes.height);
camera.position.z = 20;
scene.add(camera);

// Renderer
const canvas = document.querySelector(".webgl");
const renderer = new THREE.WebGLRenderer({ canvas });
renderer.setSize(sizes.width, sizes.height);
renderer.setPixelRatio(2);
renderer.render(scene, camera);

// Controls
const controls = new OrbitControls(camera, canvas);
controls.enableDamping = true;
controls.enablePan = false;
controls.enableZoom = false;
controls.autoRotate = true;
controls.autoRotateSpeed = 10;

// Resize
window.addEventListener('resize', () => {
  // Update Sizes
  sizes.width = window.innerWidth;
  sizes.height = window.innerHeight;
  // Update Camera
  camera.updateProjectionMatrix();
  camera.aspect = sizes.width / sizes.height;
  renderer.setSize(sizes.width, sizes.height);
});

const loop = () => {
  controls.update();
  renderer.render(scene, camera);
  window.requestAnimationFrame(loop);
};
loop();

// Timeline magicccc
const tl = gsap.timeline({ defaults: { duration: 1 } });
tl.fromTo(mesh.scale, { z: 0, x: 0, y: 0 }, { z: 1, x: 1, y: 1 });
tl.fromTo('nav', { y: '-100%' }, { y: '0%' });
tl.fromTo('.title', { opacity: 0 }, { opacity: 1 });

// MouseAnimationColorrr
let mouseDown = false;
let rgb = [];
window.addEventListener("mousedown", () => (mouseDown = true));
window.addEventListener("mouseup", () => (mouseDown = false));

window.addEventListener('mousemove', (e) => {
  if (mouseDown) {

  }
});

Answer 1

您可以使用光线投射器

const raycaster = new THREE.Raycaster();
const pointer = new THREE.Vector2();

function onPointerMove(event) {
  pointer.x = (event.clientX / sizes.width) * 2 - 1;
  pointer.y = -(event.clientY / sizes.height) * 2 + 1;
}
function render() {
  raycaster.setFromCamera(pointer, camera);
  const intersects = raycaster.intersectObject(mesh);
  for (let i = 0; i < intersects.length; i++) {
intersects[i].object.material.color.set(0xff0000); // Change which color you need 
  }
  renderer.render(scene, camera);
}
window.addEventListener('pointermove', onPointerMove);
window.requestAnimationFrame(render);

https://thirdjs.org/docs/#api/en/core/Raycaster