在5分钟内将三维模型添加到网站–Three.js教程

在本教程中，我们将向您展示如何在短短几分钟内使用threejs和JavaScript将360度查看器的三维模型放到您的网站上。

首先，我们需要找到一个合适的三维模型。网上有很多免费的模型。然而，threejs建议使用glTF格式的模型，因为文件大小和效率都很小。所以我要下载的是glTF格式的。但是，如果您已经有其他格式的模型，threejs也支持FBX和obj文件。

这是Sketchfab的免费Datson车型模型！

下载模型后，将所有文件（和文件夹，如果有的话）放到web目录中。

让我们研究一下JavaScript。首先在您的页面中包含最新版本的Three.js。

接下来创建一个场景，相机和渲染器。我要把摄像机放在车前，旋转45度。然后，要缩小car，我们将在回调函数中获取car模型并使用scale.set。我要把尺寸缩小一半。

基本设置已完成。接下来，我们将添加照明并加载模型。

然后我将添加一个柔和的白色环境光来照亮整个场景。

然后从上方添加平行光。我要将castShadow属性设置为true，然后将其添加到场景中。我还将添加4个点光源，并将它们放置在汽车周围。点光源类似于现实世界中的灯泡，它会自动投射阴影。

我们将使用GLTFLoader类。然后使用load方法加载我们的模型文件。而且这个模型对我们的场景来说太大了，所以我们把车缩小50%

我们将使用threejsOrbitControl插件添加一个360度的查看器，让用户旋转相机。从github获取OrbitControls.js并将其包含到页面中。

然后从我们的相机创建控件对象，并添加更改事件侦听器来跟踪鼠标控件。

当用户旋转相机时，我们需要创建一个动画循环来更新场景。

检查下面视频中的最终结果

就这样。你可以在得到完整的SourceCode：点击下载。希望你们喜欢。别忘了喜欢我们的订阅我们。