如何在three.js中添加一个button

分类说明
前言
正文
- 说明（心理路程）
- 具体demo实现
- 完整demo（只提供html的部分，js那部分你就直接加在js代码中即可）

分类说明

因为three.js属于WebGL,所以就将其归到OpenGL里面了

前言

我并没有任何前端开发的经验，但是最近也搞了将近一个月的three.js，这点时间根本不够系统的学习前端，基本都是用什么查什么，学习用的搜索引擎我选择Google，然后大语言模型我选择Gpt3.5与Gemini两个进行辅助搜索，有时也会用Copliot，我的体验是：Gpt3.5 > Gemini(8.8) >Copliot.
虽然Copliot宣称使用的是gpt4.0，但是无奈它只会在知乎百度csdn上找资料（如果你用英文提问还会去StackOverflow与Google）而且搜的还不怎么准确，还不如自己去google上找…

正文

说明（心理路程）

一开始我以为是直接在js文件上添加一个button的网格模型就好了，但是并不是这样的！

阶段一
你需要在index.html中的head和body中添加button的相关代码，然后再在js中使用getElementById来添加在html中添加的button（你在html的body中应该是会给button添加一个id），这一刻一切就都说通了。
阶段二
如果你觉得这样就可能成功添加一个button了，那就高兴的太早了！
你会在加载网页时看到这么一个奇怪的画面：button加载出来了，但是一闪就没了
造成这种情况的原因: three.js加载的三维场景将button给覆盖掉了！
解决办法：在html中，关于button的那一部分demo，你需要使用CSS的z-index属性将按钮放在Three.js场景之上。（这个问题假如你是前端大佬，那肯定很easy，但是如果是萌新，那就相当的头疼…）

至此，问题解决！这个问题花了我足足两个小时，我使用的是学习方式是：在google中搜索“three.js add a button”，但是并没有立刻找到一个比较好的文章，都是循序渐进的…(这也算是你在未知领域的一种学习能力吧…)

具体demo实现

在html中的<head>中添加:

<style>body {margin: 0;overflow: hidden;}#myButton {position: absolute;top: 10px;left: 10px;z-index: 1;}</style>

在html中的<body>中添加:

<button id="myButton">Click me</button>

在js文件中添加:

// 添加HTML按钮const button = document.getElementById('myButton');// 监听按钮点击事件button.addEventListener('click', () => {console.log('Button Clicked!');});

完整demo（只提供html的部分，js那部分你就直接加在js代码中即可）

index.html:

<!doctype html>
<html lang="en"><head><meta charset="UTF-8" /><link rel="icon" type="image/svg+xml" href="/vite.svg" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Vite + React</title>//添加<style>body {margin: 0;overflow: hidden;}#myButton {position: absolute;top: 10px;left: 10px;z-index: 1;}</style>
//添加</head><body><button id="myButton">Click me</button>//添加<div id="root"></div><script type="module" src="/src/main.jsx"></script></body></html>