使用three.js在网页里展示3D模型

本篇本章是在vue框架下进行的网页搭建，使用原生版本也可以进行three.js的使用。不过现在网上流行的大多是框架内的搭建方法

首先需要安装three.js。

在vue里配置three.js的命令是

npm install three

这里稍微提一嘴想要在原生html的情况下使用three.js的话需要找到较早之前的版本，并且由于vue和原生还是有一些区别的，所以这里不会过多的提及。

关于找较早的版本可以去下面链接中去获取,通过查找可以通过133的版本找到原生html可以使用的版本，像是GLTFLoader文件也可以通过在目录three.js-r133\examples\js\loaders中找到。其他文件也可以在上级目录three.js-r133\examples\js中找到，可以看需求使用

Releases · mrdoob/three.js (github.com)https://github.com/mrdoob/three.js/releases

先展示下页面的效果,这里是在放入的3D模型中加入自己需求的设计。

首先需要把准备好的模型文件放到public文件夹中，这里准备的是gltf类型的模型文件

搭建页面需要一个位置来放置画布，其中id为container的位置被我指定为画布并为其设置一下样式表

<template>
  <div id="box">
    <div id="container"></div>
  </div>
</template>

#container {
  position: absolute;
  width: 100%;
  height: 100%;
}

然后需要绘制画布和设置摄像头和光源等各种参数