javascript - 在 webgl Canvas 上添加按钮或一个 div
问题描述
我是这个主题的新手,我有一个index.html
文件,我想在那里使用three.js
这是我的代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Test</title>
<link rel="stylesheet" href="./style.css"></link>
</head>
<body>
<div class="topnav">
<a class="active" href="#File">File</a>
<a href="#Edit">Edit</a>
<a href="#View">View</a>
<a href="#about">About</a>
<canvas class="webgl"></canvas>
<script src="../libs/three.js"></script>
<script src="../libs/three.min.js"></script>
<script src="../libs/stats.min.js"></script>
<script src="../libs/OrbitControls.js"></script>
<script type="module" src="./main.js"></script>
</div>
</body>
</html>
我也试试这个:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Test</title>
<link rel="stylesheet" href="./style.css"></link>
</head>
<body>
<canvas class="webgl"></canvas>
<script src="../libs/three.js"></script>
<script src="../libs/three.min.js"></script>
<script src="../libs/stats.min.js"></script>
<script src="../libs/OrbitControls.js"></script>
<script type="module" src="./main.js"></script>
<div class="topnav">
<a class="active" href="#File">File</a>
<a href="#Edit">Edit</a>
<a href="#View">View</a>
<a href="#about">About</a>
</div>
</body>
</html>
和我的 css 文件:
* {
margin: 0;
padding: 0;
}
html,
body {
overflow: hidden;
}
.topnav {
overflow: hidden;
background-color: #333;
}
.topnav a {
float: left;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.topnav a:hover {
background-color: #ddd;
color: black;
}
.topnav a.active {
background-color: #04aa6d;
color: white;
}
.webgl {
position: fixed;
top: 0;
left: 0;
outline: none;
}
我的问题是菜单栏的 div 没有显示在画布前面。
我该怎么办?
谢谢。
解决方案
将您的 HTML 转换为如下所示的内容:
<div class="topnav">
<a class="active" href="#File">File</a>
<a href="#Edit">Edit</a>
<a href="#View">View</a>
<a href="#about">About</a>
</div>
<canvas class="webgl"></canvas>
<!-- script tags -->
然后从类中删除position
,left
和top
属性。webgl
推荐阅读
- bash - Bash 正在打印附加值以及进程 ID
- javascript - 在执行其他内容之前在文件顶部动态加载脚本
- powershell - 如何在 docker-compose 构建期间获取凭据
- javascript - 如何在 JavaScript 中将 ogg 音频文件发布到 API?
- linux - 服务器写入大 LOG 文件是否比写入小文件更有压力?
- excel - 提取单个单元格中 $ 符号内多次出现的文本
- c++ - 犰狳文档不是最新的?
- c# - '找不到方法:'System.Security.PermissionSet System.AppDomain.get_PermissionSet()'。' 调用 dbContext.Set 时
- python - 按新列分组而不添加它
- sql-server - 在 SQL Server 上插入数据时如何填补身份空白?