three.js加载3D模型,在网页上展示3D模型.glb.gltf.fbx格式
云上上云
帮助2人
Three.js是一款开源的主流3D绘图JS引擎，简单点，可以将它理解为three js就可以了，three表示3D，js表示JavaScript的意思。
结构
.glb.gltf文件最好放在服务器上 放在本地容易报找不到的错 .fbx格式文件可以在本地用3d看图(win10自带）打开另存为.glb格式
index.html代码
-
<html lang="en">
-
<head>
-
<title>3D模型实时观看</title>
-
<meta charset="utf-8">
-
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
-
<style>
-
body {
-
font-family: Monospace;
-
background-color: #fff;
-
color: black;
-
margin: 0px;
-
overflow: hidden;
-
}
-
-
#modelBorderContainer{
-
display: flex;
-
justify-content: center;
-
align-items: center;
-
position: absolute;
-
width: 100%;
-
height: 100%;
-
}
-
#modelBorder {
-
max-width: 512px;
-
width: 100%;
-
height: 50%;
-
}
-
canvas{
-
position: absolute;
-
top: 0%;
-
left: 0%;
-
}
-
</style>
-
</head>
-
-
-
-
<body>
-
<div id="modelBorderContainer">
-
<div id="modelBorder"></div>
-
</div>
-
<script type="application/javascript">
-
var modelUrl = 'https://**********/***.glb' //定义所使用模型路径最好放服务器本地会找不到的错 js 代码qq1023732997
-
</script>
-
<script src="js/three.min.js?v=2.0.3"></script>
-
<script src="js/OrbitControls.js?v=2.0.3"></script>
-
<script src="js/GLTFLoader.js?v=2.0.3"></script>
-
<script src="js/WebGL.js?v=2.0.3"></script>
-
<script src="js/stats.min.js?v=2.0.3"></script>
-
<script src="js/3dmodel.js?v=2.0.3"></script>
-
</body>
-
</html>
js代码
项目案例 可旋转 拖拉推拽
demo演示地址
这篇好文章是转载于：学新通技术网
- 版权申明： 本站部分内容来自互联网，仅供学习及演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，请提供相关证据及您的身份证明，我们将在收到邮件后48小时内删除。
- 本站站名： 学新通技术网
- 本文地址： /boutique/detail/tanhgbefbf
系列文章
更多
同类精品
更多
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
Android 11 保存文件到外部存储，并分享文件
Luke 10-12 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
excel下划线不显示怎么办
PHP中文网 06-23 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
怎样阻止微信小程序自动打开
PHP中文网 06-13 -
TikTok加速器哪个好免费的TK加速器推荐
TK小达人 10-01
