cesimu1.121+版本怎么实现鼠标点击glb模型的节点高亮

Question

可以通过model.getNode获取到节点，但是如何改变节点的颜色呢？

Answer 1

阿里嘎多学长整理AIGC生成，因移动端显示问题导致当前答案未能完全显示，请使用PC端查看更加详细的解答过程

cesimu1.121+版本怎么实现鼠标点击glb模型的节点高亮

你想实现鼠标点击GLB模型的节点高亮，这个问题可以通过使用 Three.js 库来实现。下面是一个简单的示例代码：

// 获取模型的节点
const nodes = model.getNode();

// 添加鼠标点击事件
document.addEventListener('click', (event) => {
  // 获取点击的节点
  const node = nodes.find((node) => node.contains(event.clientX, event.clientY));
  if (node) {
    // 改变节点的颜色
    node.material.color.setHex(0xFF0000); // 设置为红色
  }
});

在上面的代码中，我们首先获取模型的节点，然后添加鼠标点击事件。点击事件中，我们使用 contains 方法来获取点击的节点，如果找到节点，我们就改变节点的颜色。

需要注意的是，这个示例代码只是一个简单的示例，实际实现中可能需要根据你的需求进行修改和优化。

代码解释

• model.getNode()：获取模型的节点。
• document.addEventListener('click', (event) => { ... })：添加鼠标点击事件。
• const node = nodes.find((node) => node.contains(event.clientX, event.clientY))：获取点击的节点。
• node.material.color.setHex(0xFF0000)：改变节点的颜色。

依赖

• Three.js 库

问题

如果你遇到问题，可以在评论中留言，我将尽力帮助你解决。