• Scratching a svelte fomo itch and working through https://svelte.dev/tutorial.

reactive declarations with the $ syntax is pretty neat.

not only is it used to create computed values:

$: doubled = count * 2;

but code can be reactively run if the dependency has changed too:

$: {
	console.log(`the count is ${count}`);
	alert(`I SAID THE COUNT IS ${count}`);
}

big gotcha with svelte is that array methods like pop, shift, unshift and splice don’t work as expected. Svelte needs a re-declaration to work

e.g

let numbers = [1, 2, 3, 4];


function addNumber() {
	numbers.push(numbers.length + 1);
} // DOESNT UPDATE `numbers`

// INSTEAD
function addNumber() {
	numbers = [...numbers, numbers.length + 1];
}

A simple rule of thumb: the name of the updated variable must appear on the left hand side of the assignment

• props in svelte use the export keyword. little bit weird…

• like with Vue.js , it has a it’s own syntax for html conditionals. It’s not so adamant about providing an index when looping, but it is encouraged. the syntax is slightly different.

{#each things as thing (thing.id)}
	<Thing name={thing.name}/>
{/each}

• suspense out the box!

{#await promise}
	<p>...waiting</p>
{:then number}
	<p>The number is {number}</p>
{:catch error}
	<p style="color: red">{error.message}</p>
{/await}

TBC - 6.Bindings

Three.js only supports typeface fonts, its; possible to convert fonts with something like this - https://gero3.github.io/facetype.js/

• The basic boilerplate for three.js fonts looks like this :

fontLoader.load(
    '/fonts/helvetiker_regular.typeface.json',
    (font) =>
    {
        const textGeometry = new THREE.TextGeometry(
            'Hello Three.js',
            {
                font: font,
                size: 0.5,
                height: 0.2,
                curveSegments: 12,
                bevelEnabled: true,
                bevelThickness: 0.03,
                bevelSize: 0.02,
                bevelOffset: 0,
                bevelSegments: 5
            }
        )
        const textMaterial = new THREE.MeshBasicMaterial()
        const text = new THREE.Mesh(textGeometry, textMaterial)
        scene.add(text)
    }
)

to animate and add other materials, we do it all inside the callback function.