Rollup作者新作: Svelte Cubed, 拥抱 Three.js

本文链接：https://blog.youkuaiyun.com/blueblueskyhua/article/details/121853128

在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 官方的一些示例：

2021-12-01-13.24.37

实战

我们来尝试一下自己写一个项目，首先初始化一个 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'