本文重点介绍如何基于Threejs对glb三维模型进行预览,关于threejs和三维建模等不在本文讨论之内,想详细了解threejs和glb三维模型的,请自行百度学习。
言归正传,使用threejs进行三维模型展示,通常需要依赖以下组件:
Threejs+OrbitControls+GLTFLoader+WebGL
以上组件可以从threejs的官网获取,下载后的目录如下所示:
第一步、创建html,引入相关的js资源,代码如下:
<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;
po