threejs——3d大屏完整版2w字超详细讲解

加载模型
        本文中的模型采用了 gltf格式，因此需要使用 threejs提供的 GLTFLoader。 DRACOLoader是用来处理被压缩过的数据，对于那些要把它解压的模型，如果没有这种处理器，就会出现错误报告，这一点在后面的总结中会提到。 特殊引用# GLTF装入程序,loader的第二次回调是对装载完成的调用，通过对 promise进行封装，从而实现对装载模型的同步。
天津天迅达科技有限公司
如果您需要相关服务，可以找天津天迅达科技有限公司，我们的业务有Web开发、iOS APP、Android APP、微信开发、HTML5开发等，天迅达——您身边的App个性化定制专家！
模型解压缩
        你可以通过 threejs官方网站上的模型下载地址（market.pm nd. rs. rs/）来获得，不过那些都是经过压缩的 gltf，所以一定要用到 DRACOLoader，否则就会出现错误，而且在设定地址时也要小心，dracoLoader.se tDec oder路径（ξ{import.me ta. env. VITE_ASSETS_URL｝ assets/draco/gltf/)； 为了便于部署，我使用了 oss地址，并且node_modules的本地地址是node_modules线程实例 js库数据库raco_decoder. js。
        这里演示了在没有解压程序的情况下，对压缩后的 gltf进行加载，看看会出现什么样的错误，这样在未来的开发中就不会迷路了。加载地址是https://vazxmixjsiawhamofees.supabase.co/storage/v1/object/public/models/ruins/model.gltf大家也可以试一下，也可以从前面提到的网站复制地址，就是网站有点慢
获取模型信息
        当这个模型被载入之后，就会显示出 scene模型场景、 animations动画列表等信息，通常情况下是不会显示的。 你可以在 Xbox上找到，在外部框架的制造过程中，会有详细的说明，得到了模型，再用 traverseapi遍历该对象，得到每个物体的名字，以便以后进行互动，也可以将自己希望的东西添加到 userdata属性中，但要小心，不能将 uuid用作惟一的值，因为每一次装载后， uuid都不一样，只是目前装载的所有模型中，唯一的一个。 您可以向用户数据中加入box3的信息，如以下代码所示。
模型与html的交互
        从效果图中可以看出，右边是全部的建模信息，然后我们可以通过点击这个列表，获得模型的信息，并且增加一个外框。动态增加 li, mechanicalData，这是我事先录制好的，源代码里有，它的数据结构是{"模型名称"：中文名"｝，然后在运行的过程中，以数据的形式给 li的属性赋值，这样就可以很容易地获得了，但是在实际的开发过程中，你可能会用到它。在 li中增加了 click事件，这样就不用逐个地捆绑点击事件了，我增加了 binding的时间，并且通过事件代理获得 li的数据
        上述代码是基于获取与 li绑定的model_name信息，来获得当前点击的模型名，然后用#. getObjectByName来获得到场景中的模型，这种方式仅返回第一次得到的数值，因此要尽可能地保证场景中的模型唯一性，如果存在组，可以使用group.ge tObj ect由 Na me来进行，但是要保证组中的模型名是惟一的，在此要提醒的是，除了使用名字，你还可以通过对#. getObjectByProperty进行定制。在 li中增加了 click事件，这样就不用逐个地捆绑点击事件了，我增加了 binding的时间，并且通过事件代理获得 li的数据
        上述代码是基于获取与 li绑定的model_name信息，来获得当前点击的模型名，然后用#. getObjectByName来获得到场景中的模型，这种方式仅返回第一次得到的数值，因此要尽可能地保证场景中的模型唯一性，如果存在组，可以使用group.ge tObj ect由 Na me来进行，但是要保证组中的模型名是惟一的，在此要提醒的是，除了使用名字，你还可以通过对#. getObjectByProperty进行定制。
动画
        关于动画的详细内容可以参考之前的文章 # three.js——镜头跟踪，下面讲的是作为这篇的补充。
剪辑动画
        首先是剪辑前的动画，整个动画从收起到展开，再到收起，这样我们就可以把动画切分成两个阶段，第一个阶段是展开，从效果图上可以看出，完全展开大概需要2秒左右，第二个阶段是收起来，动画的一开始是要收起来的，因此我们只对0.1秒的位置进行裁剪即可。我们先来看一下代码，一会说明手绘动画的基本类方法，它包括动画播放、切换、绘制骨骼、裁剪、镜头追踪.
以上所有设计图和部分文字均来自网络，如有侵权，请call我删除，感谢~
天津天迅达科技有限公司经过多年来对APP、小程序、以及网站建设的探索，已经帮助每一个客户快速开发出属于自己的APP、小程序、网站，是万千企业之选。
标签：天迅达科技 天津APP开发 天津网站建设 网站建设