当前位置: 首页 > 网络应用技术

使用三分JS加载模型并添加热图并生成GIF

时间:2023-03-07 21:09:45 网络应用技术

  我们需要将模型加载到我们自己的公司中。通常使用封装的平台,但是当您遇到简单的项目时,您不需要使用这些平台。你可以自己做一个

  NPM:纱:

  考虑到一个项目可以使用多个模型,简单包装

  首先创建文件三。

  然后在VUE文件中使用

  在这一点上,我们已经可以加载和控制模型。如果我们只想看到它,那就足够了

  下一个功能与我们的业务有关

  热点将在模型中出现一个符号,总是面对用户,但它将通过模型切换角将其更改为精灵的位置。

  单击热门事件以将其保存在EventList中。这里的困难是如何确定如何单击选定的内容。射线方法中的三个。JS是从相机发射射线。方向是鼠标位置。选定的对象在init函数中添加以下代码

  此功能用于切换视角,例如定位到某个热点,定位到记录的位置

  如果您想知道当前位置,可以直接获得相机的当前信息

  如果要更改位置,则可以直接更改Paramera参数,但是如果要过渡平稳

  同时,动画添加了一个单词

  这里有两个主电源,一个是加热地图,然后将其添加为生成热图以安装它的材料。您可以使用Heatmap.js安装

  这里的方法是使用数据生成热图。如果没有数据,它将生成随机数据。它们的参数可以自己调试此画布,您可以将其添加到场景中。

  因为它是一个建筑模型,直接添加热图,所以我看不到里面的内容,所以我使用切割

  因为三个是在画布上渲染的,所以直接导出图片非常简单

  GIF图片由GIF.JS生成,这与我的实际业务不同。实际上,您可以快速生成n个多个图片来拼写GIF。

  最后,张产生的GIF渲染图