关于前端:Rollup作者新作-Svelte-Cubed-拥抱-Threejs

在 2021 年 11 月 20 日，Svelte 召开了第四次虚构会议。

而会议中最令我眼前一新的当然是轮子哥 Rich-Harris 带来的 Svelte Cubed 了。

科普：轮子哥 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 我的项目

npm init svelte@next my-new-app
cd my-new-app
npm install
npm run dev

装置 Three.js 和 svelte-cubed

npm install three svelte-cubed

如果应用 TypeScript，还须要引入 Three.js 的 ts 申明

npm install -D @types/three

关上 src/routes/index.svelte

<script>
    import * as THREE from 'three';
    import * as SC from 'svelte-cubed';
</script>

<SC.Canvas>
    <SC.Mesh geometry={new THREE.BoxGeometry()} />
    <SC.PerspectiveCamera position={[1, 1, 3]} />
</SC.Canvas>

而后运行 npm run dev

而后就报错了，通过查问，大略是因为没有设置一个 vite 选项。

关上 svelte.config.js，退出关旭 vite ssr 的选项即可解决。

import adapter from '@sveltejs/adapter-auto';

/** @type {import('@sveltejs/kit').Config} */
const config = {
    kit: {adapter: adapter(),

        // hydrate the <div id="svelte"> element in src/app.html
        target: '#svelte',
        vite: {
            ssr: {noExternal: ["three"]
            }
        }
    }
};

export default config;

咱们的我的项目就被运行起来了。

官网也明确说了，不会对 Three.js 对象进行包装，而是间接应用 Three.js 去创立并设置对象，因而须要在代码中引入 Three.js，（个人感觉这样的益处是可能让咱们没有老本地从其余非数据驱动的 Three.js 我的项目中，迁徙到 Svelte-cubed 中）。

能够看到如果用纯 Three.js 去写代码，将会比用 Svelte-Cubed 多出好几倍的内容。随着工夫的推移，命令式代码也会变得不太容易保护。

通过增加控制器，咱们能够轻松进行交互。

关上 src/routes/index.svelte

<SC.Canvas antialias background={new THREE.Color('papayawhip')}>
    <SC.Mesh geometry={new THREE.BoxGeometry()} />
    <SC.PerspectiveCamera position={[1, 1, 3]} />
+    <SC.OrbitControls enableZoom={false} />
</SC.Canvas>

利用 Svelte 的数据驱动轻松批改 Three.js Objects.

<script>
    import * as THREE from 'three';
    import * as SC from 'svelte-cubed';
+
+    let width = 1;
+    let height = 1;
+    let depth = 1;
</script>

<SC.Canvas antialias background={new THREE.Color('papayawhip')}>
    <SC.Mesh
        geometry={new THREE.BoxGeometry()}
        material={new THREE.MeshStandardMaterial({ color: 0xff3e00})}
+        scale={[width, height, depth]}
    />
    <SC.PerspectiveCamera position={[1, 1, 3]} />
    <SC.OrbitControls enableZoom={false} />
    <SC.AmbientLight intensity={0.6} />
    <SC.DirectionalLight intensity={0.6} position={[-2, 3, 2]} />
</SC.Canvas>

+<div class="controls">
+    <label><input type="range" bind:value={width} min={0.1} max={3} step={0.1} /> width</label>
+    <label><input type="range" bind:value={height} min={0.1} max={3} step={0.1} /> height</label>
+    <label><input type="range" bind:value={depth} min={0.1} max={3} step={0.1} /> depth</label>
+</div>
+
+<style>
+    .controls {
+        position: absolute;
+    }
+</style>

利用数据驱动，动画也能够疾速增加。

<script>
    import * as THREE from 'three';
    import * as SC from 'svelte-cubed';

    let width = 1;
    let height = 1;
    let depth = 1;
+
+    let spin = 0;
+
+    SC.onFrame(() => {
+        spin += 0.01;
+    });
</script>

<SC.Canvas antialias background={new THREE.Color('papayawhip')}>
    <SC.Mesh
        geometry={new THREE.BoxGeometry()}
        material={new THREE.MeshStandardMaterial({ color: 0xff3e00})}
        scale={[width, height, depth]}
+        rotation={[0, spin, 0]}
    />
    <SC.PerspectiveCamera position={[1, 1, 3]} />
    <SC.OrbitControls enableZoom={false} />
    <SC.AmbientLight intensity={0.6} />
    <SC.DirectionalLight intensity={0.6} position={[-2, 3, 2]} />
</SC.Canvas>

不过随着 Svelte-Cubed 的公布，也有不少的质疑，也有人认为这个货色并没有是真正意义上的 ” 发明新事物 ”，而只是编写了一些胶水层代码。

RH 也亲自进行了回复

简而言之，你应用 Svelte Cubed 的起因与你应用 Svelte（或任何组件框架）自身的起因雷同：申明性代码往往比指令性代码更强壮、更易读、更易保护。
间接应用 Three 相对没有错，但这相当于间接应用 DOM。在某种程度上，很难跟踪没有被表白为层次结构的档次关系，而且治理整个应用程序的状态也成为一种累赘。

此外，因为组件有一个可治理的生命周期，如果你应用 Vite（或应用 Vite 的 SvelteKit）这样的框架，你能够 “ 收费 “ 取得热模块重载这样的货色。一旦你尝试过用这种形式构建场景（例如，在你调整你所放大的物体的属性时放弃你的相机地位），Cmd- R 驱动的开发就会感觉很红润了。——由 deepl.com 翻译

额定阐明：申明式与函数式的区别，创立 div 为例：
1. 申明式写法<div></div>
2. 函数式写法 document.createElement('div');

不过个人感觉，Svelte-Cubed 带来了以下长处

1. 申明式带来的层级清晰

2. 数据驱动可能带来遍历（写起来比 Three.js 快很多）

3. 组件没有十分宏大的状况下，它的体积还十分的小（相比 React、Vue 须要引入一整个运行时就小很多）

既然 Svelte-Cubed 曾经交融了 Three.js，在 meta 概念崛起的年代，离 VR/AR 还会远吗？（事实上只有交融了 Three.js，应用 Three.js 的生态来写 VR 就曾经非常容易了）

最初再列几个在 VR/AR 畛域比拟优良的框架吧（如果大家对这方面感兴趣），aframe（与 Svelte 殊途同归之妙的申明式），react-three-fiber、babylon.js。

https://twitter.com/opensas/s…

https://twitter.com/SvelteSoc…

https://svelte-cubed.vercel.a…

https://github.com/Rich-Harri…

https://news.ycombinator.com/…

❤️关注 + 点赞 + 珍藏 + 评论 + 转发❤️ ，原创不易，激励笔者创作更好的文章

关注公众号 秋风的笔记，一个专一于前端面试、工程化、开源的前端公众号

关于前端:Rollup作者新作-Svelte-Cubed-拥抱-Threejs

实战

总结

参考

结语