Rollup author's new work: Svelte Cubed, embrace Three.js!

On November 20, 2021, Svelte held its fourth virtual conference.

The meeting in front of me most is of course a new wheel brother Rich-Harris brought Svelte Cubed up.

Popular Science: Rich-Harris: Svelte, Rollup Author

The highlight of this project is not because other speakers are not good, nor is it because Brother Wheel is the author of Svelte. It's because the Svelte-Cubed he brought has a very similar feeling to the technology stack I am currently in charge of the project. In the company, I needed to develop a new H5 project, so I adopted the more radical combination of Svelte + Aframe/Three.js + Tailwind.css + Vite. Down the entire portfolio, whether it is the final production development experience or package size are very nice - so when I saw wheels brother publish this new wheels , I was very excited, actually I wanted a combination of direct integration To Svelte .

Then we take a look at the Svelte-Cubed :

Open https://svelte-cubed.vercel.app/ . At present, the official website does not use a custom domain name, but directly uses the vercel domain name. It is guessed that it is related to the wheel brother who went to vercel to work.

Let's take a look at some official examples of cubed:

Actual combat

Let's try to write a project by ourselves, first initialize a svelte project

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

Install Three.js and svelte-cubed

npm install three svelte-cubed

If you use TypeScript, you also need to introduce the ts statement of Three.js

npm install -D @types/three

Open 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>

Then run npm run dev

Then an error was reported. Through the query, it was probably because a vite option was not set.

Open svelte.config.js and add the option of Guan Xuvite ssr to solve it.

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;

Our project is up and running.

The official also clearly stated that it will not wrap the Three.js object, but directly use Three.js to create and set the object, so it is necessary to introduce Three.js into the code. (Personally, the advantage of this is that we can not Cost to migrate from other non-data-driven Three.js projects to Svelte-cubed).

It can be seen that if you use pure Three.js to write code, it will be several times more content Svelte-Cubed Over time, imperative code will become less maintainable.

By adding a controller, we can easily interact.

Open 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>

Use Svelte's data drive to easily modify 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>

Using data-driven, animation can also be added quickly.

<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>

Summarize

However, with the release of Svelte-Cubed, there are also many doubts. Some people think that this thing is not really "creating new things", but just writing some glue layer code.

RH also personally responded

In short, you use Svelte Cubed for the same reasons you use Svelte (or any component framework) itself: declarative code tends to be more robust, readable, and easier to maintain than prescriptive code.
There is absolutely nothing wrong with using Three directly, but it is equivalent to using DOM directly. To some extent, it is difficult to track hierarchical relationships that are not expressed as a hierarchy, and managing the state of the entire application becomes a burden.

In addition, since components have a manageable life cycle, if you use a framework like Vite (or use Vite's SvelteKit), you can get things like hot module reloading "for free". Once you have tried to build a scene in this way (for example, keeping your camera position when you adjust the properties of the object you are zooming in), Cmd-R-driven development will feel pale. -Translated by deepl.com

additional explanation: the difference between declarative and functional, create div as an example:
1. Declarative writing <div></div>
2. Functional writing document.createElement('div');

But personally, Svelte-Cubed brings the following advantages

1. The level of clarity brought by declarative

2. Data-driven can bring traversal (it is much faster to write than Three.js)

3. When the component is not very large, its size is still very small (compared to React and Vue, the entire runtime needs to be introduced, which is much smaller)

Now that Svelte-Cubed has integrated Three.js, will it be far from VR/AR in the age of the rise of the meta concept? (In fact, as long as Three.js is integrated, it is very easy to write VR using Three.js ecology)

Finally, let's list a few more excellent frameworks in the VR/AR field (if you are interested in this aspect), aframe (declarative that is similar to Svelte), react-three-fiber, babylon.js.

refer to

https://twitter.com/opensas/status/1464457228581326848

https://twitter.com/SvelteSociety/status/1463248727942971396

https://svelte-cubed.vercel.app/docs/getting-started

https://github.com/Rich-Harris/svelte-cubed

https://news.ycombinator.com/item?id=29310150

Concluding remarks

+ Like + Favorite + Comment +

Pay attention to the notes of the Autumn Wind, a front-end public account that focuses on front-end interviews, engineering, and open source