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

2024-01-10 00:38:38

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

分类说明

因为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>

文章来源:https://blog.csdn.net/weixin_52668597/article/details/135491230
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。