Three.js是一款開源的主流3D繪圖JS引擎，簡單點，可以將它理解為three+js就可以了，three表示3D，js表示JavaScript的意思。
結(jié)構(gòu)
?.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代碼
項目案例 可旋轉(zhuǎn) 拖拉推拽
?
demo演示地址
3D模型實時觀看文章來源：http://www.zghlxwxcb.cn/news/detail-514153.html
文章來源地址http://www.zghlxwxcb.cn/news/detail-514153.html
到了這里，關(guān)于three.js加載3D模型,在網(wǎng)頁上展示3D模型（.glb.gltf.fbx格式）的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
