2021年11月20日，Svelte举行了第四次虚拟会议。会议中最让人耳目一新的当然是Rich-Harris带来的SvelteCubed。科普：轮哥Rich-Harris：Svelte,Rollup这个项目的作者不是因为其他音箱不好，也不是因为轮哥是Svelte的作者。因为他带来的Svelte-Cubed和我现在在公司负责项目的技术栈感觉很像。因为公司需要开发一个新的H5项目，所以我采用了比较激进的组合Svelte+Aframe/Three.js+Tailwind.css+Vite。整套组合之后，无论是开发体验还是最终制作包的体积都非常精彩~所以当看到轮子哥发布这个新轮子的时候，激动万分，居然直接把自己想要的组合集成到了Svelte中。那么我们来看看Svelte-Cubed的样子：打开https://svelte-cubed.vercel.app/，目前官网并没有使用自定义域名，而是直接使用了Vercel的域名，猜测是跟轮哥去Vercel工作有关系。看官方cubed的一些例子：自己尝试写一个项目，先初始化一个svelte项目npminitsvelte@nextmy-new-appcdmy-new-appnpminstallnpmrundevinstallThree.js和svelte-cubednpminstallthreesvelte-cubed如果使用TypeScript，还需要引入Three.js的ts声明npminstall-D@types/threeopensrc/routes/index.svelte然后运行npmrundev报错。通过查询，大概是因为没有设置vite选项。打开svelte.config.js，添加关旭vitessr的选项即可解决。从'@sveltejs/adapter-auto'导入适配器;/**@type{import('@sveltejs/kit').Config}*/constconfig={kit:{adapter:adapter(),//hydratesrc/app.html中的元素target:'#svelte',vite:{ssr:{noExternal:["three"]}}}};导出默认配置；我们的项目将运行起来。官方也明确表示不会包装Three.js对象，而是直接使用Three.js创建和设置对象，所以代码中引入Three.js是很有必要的。从其他非数据驱动的Three.js项目到Svelte-cubed的成本效益迁移）。可以看出，如果使用纯Three.js写代码，内容会比Svelte-Cubed多几倍。随着时间的推移，命令式代码也变得更难维护。通过添加控制器，我们可以轻松交互。打开src/routes/index.svelte+利用Svelte的数据驱动轻松修改Three.jsObjects.+<divclass="controls">++++
++使用数据驱动，也可以快速添加动画<脚本>从“三”导入*为三；从“svelte-cubed”导入*作为SC；让宽度=1；让高度=1；letdepth=1;++letspin=0;++SC.onFrame(()=>{+spin+=0.01;+});
