DEV Community: Alex Warnes

Svelte-Cubed: Loading Your glTF Models

Alex Warnes — Thu, 26 May 2022 15:45:13 +0000

This article is the fourth in a beginner series on creating 3D scenes with svelte-cubed and three.js. If you want to learn how we got here you can start from the beginning:

Part One: Svelte-Cubed: An Introduction to 3D in the Browser
Part Two: Svelte-Cubed: Adding Motion to 3D Scenes
Part Three: Svelte-Cubed: Creating Accessible and Consistent Experience Across Devices

Octahedrons are great, but in many cases you’ll want to use a more complex model created in a modeling tool like Blender. These models can come in a variety of file types (e.g. glTF, fbx, etc). We’ll be working with gltf files, but this approach will work for others as well.

Simply put, we’re using the plain ol’ threejs GLTFLoader and then passing the model to a svelte cubed component. Simple. But if you’re new to 3D like me, a step by step walkthrough is a helpful reference and we’ll break it into several small steps to show a model, and then some optional patterns you can implement for reusability and loading.

If you know what you’re doing and just want to skip to the code, jump into the final scene: https://svelte.dev/repl/8ea0488302bb434991cc5b82f653cdb5?version=3.48.0

What We’ll Cover:

Find cool models
Create a Svelte component for the model
Import the GLTFLoader from threejs
Load the model onMount
Conditionally pass it into a svelte cubed <Primative /> component

Optional:

Create a reusable GLTF Component
Handle loading states

Step 1: Find Cool Models

Threejs Example Models

You can find a bunch of example glTF/glb models from threejs itself in the manual or in the examples directory

Khronos Group

The Khronos group is responsible for the glTF spec. They also have an examples directory

SketchFab

There’s a huge selection of models on SketchFab, many of which you can download for free. And of course please give credit to model creators.

Step 2: Create a Svelte Component for the Model

Use this REPL to start with a basic svelte cubed scene: https://svelte.dev/repl/c0c34349f1f6405bb25700599a841083?version=3.48.0

Add a new component called LittleCity.svelte with a script tag add two variables:

A URL to the glTF file
An empty variable that will hold the model once we get it

<script>
/*
Model taken from the threejs examples. Created by antonmoek:
https://sketchfab.com/antonmoek
*/
  const modelURL = 'https://threejs.org/manual/examples/resources/models/cartoon_lowpoly_small_city_free_pack/scene.gltf'
  const model = null;
</script>

Step 3: Import the GLTFLoader from threejs

Whatever filetype you have, threejs probably has a loader for that. In our case (or if using a glb) we’ll use the GLTFLoader. Add that import to the top of your script tag and BE SURE TO INCLUDE THE FILE EXTENSION.

  import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';

Step 4: Load the Model onMount

When our component mounts, we want to load the model asynchronously and assign it to the model variable.

We’ll make a load function first, which will instantiate the loader and return a promise with our model, and then invoke that onMount and handle the response (which is the model).

import { onMount } from 'svelte';

// …

function loadGLTF() {
  const loader = new GLTFLoader();
  return loader.loadAsync(modelURL)
}

onMount(() => {
  loadGLTF().then(_model => model = _model);
})

That’s it! We’ll add a catch block later when we make this a reusable component. If you’ve never worked with models before, definitely console log the model to see what that data structure looks like! There are a lot of interesting and (potentially) useful artifacts there.

Step 5: Conditionally Render the Model

Svelte Cubed provides a component called Primitive to handle almost anything-thats-not-a-mesh (e.g. models, axes, grid, etc). Primitive can accept props like position, rotation, scale, and other things you would expect. The Primitive’s object prop will take the scene of our model data. Naturally, we only want to render this if we have our model loaded, so we’ll wrap it in a conditional statement.

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

{#if model}
  <SC.Primitive
    object={model.scene}
    scale={[.05,.05,.05]}
  />
{/if}

Over in App.svelte let’s import and drop in our component:

<script>
  // … other imports
  import LittleCity from './LittleCity.svelte';

  // …
</script>

<SC.Canvas>
<!-- … all the scene stuff is here -->

<LittleCity />

</SC.Canvas>

WOW! Take a look around that city!

That’s the basic approach for loading an individual model, but that’s a lot of code to rewrite every time you want to load a single model. It might also be nice to indicate the loading status of models. So in the next section we’ll create a basic reusable GLTF component and handle loading.

To recap, here’s what we have so far in our LittleCity.svelte component:

<script>
  import * as SC from 'svelte-cubed';
  import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
  import { onMount } from 'svelte';
  import { modelURL } from './stores';

  const modelURL = 'https://threejs.org/manual/examples/resources/models/cartoon_lowpoly_small_city_free_pack/scene.gltf'
  let model = null;

  function loadGLTF() {
    const loader = new GLTFLoader();
    return loader.loadAsync(modelURL['littleCity']);
  }

  onMount(() => {
    loadGLTF().then(_model => model = _model);
  })

</script>

{#if model}
  <SC.Primitive
    object={model.scene}
    scale={[.05,.05,.05]}
  />
{/if}

Optional: A Reusable GLTF Component

This is a basic implementation. Share your improvements in the comments!

First we’ll setup some global state in a new file stores.js to help us manage model URLs and handle loading states.

import { writable, readable, derived } from 'svelte/store';

// Contains the status of all models
export const statusOfModels = writable({}); // { uniqueName: 'LOADING' | 'ERROR' | 'SUCCESS' }

// Returns a boolean if any model has a status of loading
export const modelsLoading = derived(statusOfModels, statusObj => {
  return Object.values(statusObj).includes('LOADING');
})

// Updates a model's status based on its unique name
export const updateModelStatus = (name, status) => {
  statusOfModels.update(current => {
    return {  
      ...current,
      [name]: status,
    }
  })
}

// List of example model URLs
export const modelURL = {
  littleCity: 'https://threejs.org/manual/examples/resources/models/cartoon_lowpoly_small_city_free_pack/scene.gltf',
  mountains: 'https://threejs.org/manual/examples/resources/models/mountain_landscape/scene.gltf',
  llama: 'https://threejs.org/manual/examples/resources/models/animals/Llama.gltf',
  pug: 'https://threejs.org/manual/examples/resources/models/animals/Pug.gltf',
  sheep: 'https://threejs.org/manual/examples/resources/models/animals/Sheep.gltf',
}
/*
  Models taken from the threejs examples. 
  Little City model created by antonmoek:
  https://sketchfab.com/antonmoek
*/

Next we’ll create a new svelte component called ReusableGLTF.svelte that will accept some props and emit a custom event to share its loading status with its parent component.


<script>
  import * as SC from 'svelte-cubed';
  import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
  import { createEventDispatcher } from 'svelte';
  import { onMount } from 'svelte';

  // Component Props
  export let modelURL;
  export let scale = [1, 1, 1];
  export let position = [0, 0, 0];
  export let rotation = [0, 0, 0];
  export let name = 'UniqueName_' + Math.random() + Date.now();

  let model = null;

  //   Custom Event to track loading status from parent
  const dispatch = createEventDispatcher();
  function emitStatus(status){
    dispatch('statusChange', {name, status});
  }

  function loadGLTF() {
    const loader = new GLTFLoader();
    return loader.loadAsync(modelURL)
  }

  onMount(() => {
    if (modelURL) {
      emitStatus('LOADING');
      loadGLTF()
        .then(_model => {
          model = _model;
          emitStatus('SUCCESS');
        })
        .catch(err => {
          console.error('Error loading model:', name, err)
          emitStatus('ERROR');
      })
    }
  })

</script>

{#if model}
  <SC.Primitive
      object={model.scene}
      {scale}
      {position}
      {rotation}
    />
{/if}

Should look pretty similar to our previous LittleCity.svelte component! Now, I know what you’re thinking, “Math.random() is a red flag!” And you’re right, this implementation would be much stronger with a uuid instead of name to use for tracking loading states. Do it! You can use a uuid package for that and update the loading patterns to use id instead of name. Let’s live dangerously and carry on.

In our App.svelte component, let’s import ReusableGLTF.svelte, import modelURL and then remove our LittleCity.svelte component and use our new component instead!

<script>
  // … other imports
  import ReusableGLTF from './ReusableGLTF.svelte';
  import { modelURL } from './stores';
  // …
</script>

<SC.Canvas>
<!-- … all the scene stuff is here -->

<!-- Don't need this once we have a reusable component! -->
  <!-- <LittleCity /> -->

  <ReusableGLTF 
    modelURL={modelURL['littleCity']} 
    name="littleCity" 
    scale={[.05,.05,.05]} 
  />


</SC.Canvas>

There it is! Let’s add some more…

  <ReusableGLTF 
    modelURL={modelURL['llama']} 
    name="llama" 
    position={[-6, 17, 0]} 
    rotation={[0, Math.PI * 1.25, 0]} 
  />
  <ReusableGLTF 
    modelURL={modelURL['pug']} 
    name="pug" 
    position={[0, 17, 0]} 
  />
  <ReusableGLTF 
    modelURL={modelURL['sheep']} 
    name="sheep" 
    position={[-6, 17, 4]} 
    rotation={[0, Math.PI * 1.25, 0]} 
  />

The heroes our city needs!

Lastly, let’s handle loading and then we’re done (for now). Remember each ReusableGLTF component emits a custom event called statusChange. Learn more about custom events here. Let’s update our App.js to handle that event by importing from the store.js and creating a new handle function:

  import { statusOfModels, modelURL, modelsLoading, updateModelStatus } from './stores';

  function handleStatusChange(evt) {
    updateModelStatus(evt.detail.name, evt.detail.status);
  }

Optional: Handle Loading States

Now add the event listener and handler to each ReusableGLTF component (or at least any component you want to track loading for) like so:

  <ReusableGLTF 
    modelURL={modelURL['littleCity']} 
    name="littleCity" 
    scale={[.05,.05,.05]} 
    on:statusChange={handleStatusChange} 
  />

Now that’s some good data! Feel free to drop in console logs to see what’s going on, or just use $: console.log(“statuses:”, $statusOfModels) to get a log any time that updates.

Armed with this data, we can create a new Loading.svelte component that takes one prop:

<script>
  export let showLoading = false;
</script>

{#if showLoading}
  <div class="loading-container">
    <p>
      Loading...
    </p>  
  </div>
{/if}

<style>
  .loading-container {
    position: fixed;
    left: 1rem;
    bottom: 1rem;
    background: #00000088;
    color: #fafbfc;
    padding: .5rem .875rem;
  }

  p {
    margin: 0;
  }
</style>

Let’s import it and drop it into our App.svelte component. We already set up a store that returns a boolean if any model status === loading, so we’ll pass that as a prop:

<script>
  // … other imports
  import Loading from './Loading.svelte';

  // …
</script>

<Loading showLoading={$modelsLoading} />

Aaaaand we’re done! A lot of what’s going on here can be improved and customized for your needs, but now we have the building blocks of adding and combining glTF/glb models. You could build a whole museum or showcase your own models. We didn’t even talk about animations yet… Maybe next time.

Share your improvements and implementations in the comments! Seeing what other people build is a huge source of inspiration.

Resources

REPL: https://svelte.dev/repl/8ea0488302bb434991cc5b82f653cdb5?version=3.48.0

App.svelte

<script>
import * as THREE from 'three';
import * as SC from 'svelte-cubed';
import LittleCity from './LittleCity.svelte';
import ReusableGLTF from './ReusableGLTF.svelte';
import Loading from './Loading.svelte';
import { statusOfModels, modelURL, modelsLoading, updateModelStatus } from './stores';

function handleStatusChange(evt) {
  updateModelStatus(evt.detail.name, evt.detail.status);
  }

</script>

<SC.Canvas
  background={new THREE.Color("skyblue")}
  antialias
>

  <SC.PerspectiveCamera 
    position={[-10, 36, 20]}
    near={0.1}
    far={500}
    fov={40}
  />

  <SC.OrbitControls 
    enabled={true}
    enableZoom={true}
    autoRotate={false}
    autoRotateSpeed={2}
    enableDamping={true}
    dampingFactor={0.1}
    target={[-6, 17, 0]}
  />

  <SC.DirectionalLight
    color={new THREE.Color(0xffffff)}
    position={[0,10,10]}
    intensity={0.75}
    shadow={false}
  />
  <SC.AmbientLight
    color={new THREE.Color(0xffffff)}
    intensity={0.75}
  />

  <!-- Don't need this once we have a reusable component! -->
  <!--   <LittleCity /> -->

  <ReusableGLTF 
    modelURL={modelURL['littleCity']} 
    name="littleCity" 
    scale={[.05,.05,.05]} 
    on:statusChange={handleStatusChange} 
  />
  <ReusableGLTF 
    modelURL={modelURL['llama']} 
    name="llama" 
    position={[-6, 17, 0]} 
    rotation={[0, Math.PI * 1.25, 0]} 
    on:statusChange={handleStatusChange} 
  />
  <ReusableGLTF 
    modelURL={modelURL['pug']} 
    name="pug" 
    position={[0, 17, 0]} 
    on:statusChange={handleStatusChange} 
  />
  <ReusableGLTF 
    modelURL={modelURL['sheep']} 
    name="sheep" 
    position={[-6, 17, 4]} 
    rotation={[0, Math.PI * 1.25, 0]} 
    on:statusChange={handleStatusChange} 
  />

</SC.Canvas>
<Loading showLoading={$modelsLoading} />

ReusableGLTF.svelte


<script>
  import * as SC from 'svelte-cubed';
  import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
  import { createEventDispatcher } from 'svelte';
  import { onMount } from 'svelte';

  // Component Props
  export let modelURL;
  export let scale = [1, 1, 1];
  export let position = [0, 0, 0];
  export let rotation = [0, 0, 0];
  export let name = 'UniqueName_' + Math.random() + Date.now();

  let model = null;

  //   Custom Event to track loading status from parent
  const dispatch = createEventDispatcher();
  function emitStatus(status){
    dispatch('statusChange', {name, status});
  }

  function loadGLTF() {
    const loader = new GLTFLoader();
    return loader.loadAsync(modelURL)
  }

  onMount(() => {
    if (modelURL) {
      emitStatus('LOADING');
      loadGLTF()
        .then(_model => {
          model = _model;
          emitStatus('SUCCESS');
        })
        .catch(err => {
          console.error('Error loading model:', name, err)
          emitStatus('ERROR');
      })
    }
  })

</script>

{#if model}
  <SC.Primitive
      object={model.scene}
      {scale}
      {position}
      {rotation}
    />
{/if}

Loading.svelte

<script>
  export let showLoading = false;
</script>

{#if showLoading}
  <div class="loading-container">
    <p>
      Loading...
    </p>  
  </div>
{/if}

<style>
  .loading-container {
    position: fixed;
    left: 1rem;
    bottom: 1rem;
    background: #00000088;
    color: #fafbfc;
    padding: .5rem .875rem;
  }

  p {
    margin: 0;
  }
</style>

stores.js

import { writable, readable, derived } from 'svelte/store';

// Contains the status of all models
export const statusOfModels = writable({}); // { uniqueName: 'LOADING' | 'ERROR' | 'SUCCESS' }

// Returns a boolean if any model has a status of loading
export const modelsLoading = derived(statusOfModels, statusObj => {
  return Object.values(statusObj).includes('LOADING');
})

// Updates a model's status based on its unique name
export const updateModelStatus = (name, status) => {
  statusOfModels.update(current => {
    return {  
      ...current,
      [name]: status,
    }
  })
}

// List of example model URLs
export const modelURL = {
  littleCity: 'https://threejs.org/manual/examples/resources/models/cartoon_lowpoly_small_city_free_pack/scene.gltf',
  mountains: 'https://threejs.org/manual/examples/resources/models/mountain_landscape/scene.gltf',
  llama: 'https://threejs.org/manual/examples/resources/models/animals/Llama.gltf',
  pug: 'https://threejs.org/manual/examples/resources/models/animals/Pug.gltf',
  sheep: 'https://threejs.org/manual/examples/resources/models/animals/Sheep.gltf',
}

Svelte-Cubed: Creating an Accessible and Consistent Experience Across Devices

Alex Warnes — Tue, 10 May 2022 17:13:25 +0000

This article is the third in a beginner series on creating 3D scenes with svelte-cubed and three.js. If you want to learn how we got here you can start from the beginning:

Part One: Svelte-Cubed: An Introduction to 3D in the Browser
Part Two: Svelte-Cubed: Adding Motion to 3D Scenes

In this short article, we’re going to look at two sort-of unrelated topics. However, both fall under the umbrella of improving user experience:

Using prefers-reduced-motion to conditionally animate/transition things in our scene
Using threejs clock and getDelta() to render the same motion for users with different device frame rates

Here’s the REPL where part two left off to get you started:
https://svelte.dev/repl/9b3b351fe187421b84a6f1616e2c9e3d

Conditional Motion: prefers-reduced-motion

Why does it matter?

Not everyone likes decorative animations or transitions, and some users outright experience motion sickness when faced with parallax scrolling, zooming effects, and so on. The user preference media query prefers-reduced-motion lets you design a motion-reduced variant of your site for users who have expressed this preference.

- Thomas Steiner (twitter) in prefers-reduced-motion: Sometimes less movement is more

And we want our scenes to be enjoyable for everyone, so first let’s figure out how to detect this preference in JavaScript so we can use it in our Svelte component. I’ll be using an approach from Geoff Rich (twitter) explained in his post A Svelte store for prefers-reduced-motion.

In a new javascript file we’ll call stores.js we can steal all of Geoff’s code (and cite it for future reference!) and paste it in.

import { readable } from "svelte/store";

/*
    Source: Geoff Rich, 
    "A Svelte store for prefers-reduced-motion", 
    URL: https://geoffrich.net/posts/svelte-prefers-reduced-motion-store/
*/
const reducedMotionQuery = '(prefers-reduced-motion: reduce)';

const getInitialMotionPreference = () => window.matchMedia(reducedMotionQuery).matches;

export const reducedMotion = readable(getInitialMotionPreference(), set => {
  const updateMotionPreference = event => {
    set(event.matches);
  };

  const mediaQueryList = window.matchMedia(reducedMotionQuery);
  mediaQueryList.addEventListener('change', updateMotionPreference);

  return () => {
    mediaQueryList.removeEventListener('change', updateMotionPreference);
  };
});

The reducedMotion store provides a boolean that we can subscribe and react to anywhere in our application if the value changes. How can we use it? Well, anywhere we animate we can first check the preference and adjust as needed. Our motion is coming from two sources: the tweened store and our SC.onFrame() callback.

First: if a user prefers reduced motion, our tweened store duration will be 0 (i.e. it will go from value a to value b instantly).

import { reducedMotion } from "./stores"

let scale = tweened(1, {duration: $reducedMotion ? 0 : 2000, easing: elasticOut});

That’s it? That’s it!

Second: if a user does not prefer reduced motion, we can update the rotation on every frame.

if(!$reducedMotion){
  SC.onFrame(() => {
    rotate += .01;
  })
}

How can you test it? Geoff has us covered:

Here's how to simulate the setting in Chrome DevTools and where to enable the setting in various OSes and Firefox

Since you’re only simulating the setting in devtools, you’ll need to keep devtools open and refresh the REPL to see how things change.

Handling Variable Frame Rates Across Devices

What do all those words mean? Much smarter people can explain it better than me, but I’ll take a shot and then point you to a better explanation.

Some computer/monitor setups have powerful graphics and some do not. For example, our Octahedron is rotating 0.1 radians on each frame. So a setup running at 60 frames per second (fps) is watching your Octahedron rotate 0.1 radians 60 times every second. A less powerful setup running at 30fps is watching your Octahedron rotate 0.1 radians only 30 times every second. Those are very different experiences!

For a more accurate and in-depth explanation checkout The Animation Loop chapter from the open source book Discover three.js by Lewy Blue (twitter). If you are new to three.js I highly recommend taking some time to go through the whole book!

Basically we need a way to standardize our hardcoded value inside SC.onFrame based on the current frame rate. We can do just that using the threejs Clock and the method getDelta() and multiplying our value by delta.

const clock = new THREE.Clock();
SC.onFrame(() => {
  rotate += .01 * clock.getDelta();
})

Wow, that’s slow. But it’s slow for everyone! Now we can adjust our rotation value to get the rate we want (try 0.5).

In the next article we’ll shift away from our Octahedron friend and dive into loading one or more glTF models into the scene!

References

REPL: https://svelte.dev/repl/c301f0ac026d45bdbf4facf55b921d1f?version=3.48.0

Octo.svelte

<script>
    import * as THREE from "three";
    import * as SC from "svelte-cubed";
    import { tweened } from "svelte/motion"
    import { elasticOut } from "svelte/easing"
    import { reducedMotion } from "./stores"

    let scaleType = "MEDIUM";
    let scale = tweened(1, {duration: $reducedMotion ? 0 : 2000, easing: elasticOut});

    // reactive statement to update scale based on scaleType
    $: if (scaleType === "SMALL"){
        $scale = .25;
    } else if (scaleType === "MEDIUM"){
        $scale = 1;
    } else if (scaleType === "LARGE") {
        $scale = 1.75;
    }

    let rotate = 0;
    if(!$reducedMotion){
        const clock = new THREE.Clock();
        SC.onFrame(() => {
            rotate += 0.5 * clock.getDelta();
        })
    }
</script>

<SC.Canvas background={new THREE.Color('seagreen')}>
    <SC.AmbientLight
    color={new THREE.Color('white')}
    intensity={.5}
  />  
    <SC.DirectionalLight
    color={new THREE.Color('white')}
    intensity={.75}
    position={[10, 10, 10]}
  />

  <!-- MESHES -->
   <SC.Mesh
    geometry={new THREE.OctahedronGeometry()}
    material={new THREE.MeshStandardMaterial({
      color: new THREE.Color('salmon')
    })}
        rotation={[rotate, rotate, rotate]}
    scale={[$scale, $scale, $scale]}
  />

  <!-- CAMERA -->
  <SC.PerspectiveCamera near={1} far={100} fov={55}>

    </SC.PerspectiveCamera>
    <SC.OrbitControls />

</SC.Canvas>

<div class="controls">
    <label>
    SMALL
        <input type="radio" bind:group={scaleType} value="SMALL" />
    </label>
    <label>
    MEDIUM
        <input type="radio" bind:group={scaleType} value="MEDIUM" />
    </label>
    <label>
    LARGE
        <input type="radio" bind:group={scaleType} value="LARGE" />
    </label>
</div>

<style>
    .controls {
        position: absolute;
        top: .5rem;
        left: .5rem;
        background: #00000088;
        padding: .5rem;
        color: white;
    }
</style>

stores.js

import { readable } from "svelte/store"

/*
    Source: Geoff Rich, 
    "A Svelte store for prefers-reduced-motion", 
    URL: https://geoffrich.net/posts/svelte-prefers-reduced-motion-store/
*/
const reducedMotionQuery = '(prefers-reduced-motion: reduce)';

const getInitialMotionPreference = () => window.matchMedia(reducedMotionQuery).matches;

export const reducedMotion = readable(getInitialMotionPreference(), set => {
  const updateMotionPreference = event => {
    set(event.matches);
  };

  const mediaQueryList = window.matchMedia(reducedMotionQuery);
  mediaQueryList.addEventListener('change', updateMotionPreference);

  return () => {
    mediaQueryList.removeEventListener('change', updateMotionPreference);
  };
});

Svelte-Cubed: Adding Motion to 3D Scenes

Alex Warnes — Mon, 31 Jan 2022 22:29:40 +0000

This article is the second in a beginner series on creating 3D scenes with svelte-cubed and three.js. We’re picking up where we left off, so if you want to learn how we got here you can start from the beginning:

Part One: Svelte-Cubed: An Introduction to 3D in the Browser

In this article we will cover two different approaches to moving things around in your scene with constant motion using onFrame and on-demand motion using svelte’s tweened stores and easing functions.

Here’s the REPL where part one left off to get you started:
https://svelte.dev/repl/71b063fc410543598e8a727999cf7bbe

Now let’s get moving!

Constant Motion

That octahedron is cool, but it’s the kind of shape that would be cooler if it were spinning all the time. What we want to do is adjust the rotation a little bit, multiple times per second. First thought might be to use JavaScript’s setInterval and make an update every x number of milliseconds. But there’s a more performant way!

Svelte-cubed gives us a method called onFrame(callback) that accepts a callback method where we can make some change to our scene on each frame. Let’s give it a try.

A mesh has a rotation property that accepts an array with x, y, z radian values that each describe the mesh’s rotation along the respective axis (you can brush up on your radians here: Khan Academy: Intro to Radians). We want to rotate our mesh along the y-axis, so we’ll declare a rotate variable, update it inside the onFrame callback, and then pass it into our mesh in the Octo.svelte file:


<script>
// … 

// Declare our variable
let rotate = 0;

SC.onFrame(() => {
  // Every frame, assign these radians to rotationY
  rotationY += .01;
})
</script>

<!-- add the rotation property to the mesh and use our new variable -->
 <SC.Mesh
    geometry={new THREE.OctahedronGeometry()}
    material={new THREE.MeshStandardMaterial({
      color: new THREE.Color('salmon')
    })}
    rotation={[0, rotate, 0]}
  />

It’s moving! I just drank a red bull, so let’s go big and use the rotation variable for ALL THREE mesh axes:

 <SC.Mesh
    geometry={new THREE.OctahedronGeometry()}
    material={new THREE.MeshStandardMaterial({
      color: new THREE.Color('salmon')
    })}
    rotation={[rotate, rotate, rotate]}
  />

If that’s too spintense for your taste, adjust as you will. Experiment with the amount of rotation we used in the onFrame callback (but don’t forget we’re using radians!).

This motion makes our mesh a lot more visually engaging, and you can see how it would be helpful for something like a planet. Remember we can use this approach for updating any value: rotation, position, or scale.

But what if we have some kind of motion that we only want to happen once? Say for example we want to toggle our octahedron size between small, medium, and large. It would be cumbersome (and perform poorly) to add a bunch of conditional logic inside the onFrame call back. Svelte gives us the perfect tool for the job with a tweened store.

Transitional Motion: On-Demand

Let’s break down what we want:

A set of radio inputs: small, medium, large (medium by default)
When I select a radio input, the octahedron should scale to match the selected size
The scaling should transition smoothly from one size to another

STEP 1: Svelte Radio Input Binding (bonus Lesson)

We’ll create a variable to hold the selection called scaleType and set the initial value to “MEDIUM”.

let scaleType = “MEDIUM”

Nailed it. Now below our canvas markup, we’ll create three radio inputs with labels:

<div class="controls">
    <label>
    SMALL
        <input type="radio" bind:group={scaleType} value="SMALL" />
    </label>
    <label>
    MEDIUM
        <input type="radio" bind:group={scaleType} value="MEDIUM" />
    </label>
    <label>
    LARGE
        <input type="radio" bind:group={scaleType} value="LARGE" />
    </label>
</div>

Notice that each input has a value and we bind all of them to the scaleType variable. This is some classic Svelte simplicity, no event handling to worry about. If you want to learn more about group bindings for radio and checkbox inputs, check out the official tutorial.

But we still can’t see anything, so add a style block under all the markup:

<style>
    .controls {
        position: absolute;
        top: .5rem;
        left: .5rem;
        background: #00000088;
        padding: .5rem;
        color: white;
    }
</style>

It should look something like this:

STEP 2: Reactive Scaling

Our scaleType variable updates whenever the selection changes, and any time scaleType changes we want to update the mesh’s scale properties. Back up in our script, let’s use another wonderful Svelte feature called a reactive statement https://svelte.dev/tutorial/reactive-statements to do just that.

Below we'll declare a variable called scale with an initial value of 1, setup a reactive statement to update scale based on scaleType, and then add the scale array to our mesh and use our scale value for the x, y, and z scaling.

<script>
// … other stuff in our script

let scale = 1;

// reactive statement
$: if (scaleType === "SMALL"){
    scale = .25;
} else if (scaleType === "MEDIUM"){
    scale = 1;
} else if (scaleType === "LARGE") {
    scale = 1.75;
}
</script>

<!-- … other stuff in our markup -->
 <SC.Mesh
    geometry={new THREE.OctahedronGeometry()}
    material={new THREE.MeshStandardMaterial({
      color: new THREE.Color('salmon')
    })}
    rotation={[rotate, rotate, rotate]}
    scale={[scale, scale, scale]}
  />

I know, that was a lot. Just to review:

the inputs control the scaleType small/medium/large
the scale variable reacts to any change to the scaleType
we pass the scale value into our mesh’s scale array

STEP 3: Smooth Transitions

Right now our mesh jumps directly from one scale to another, and what we’d like to see is a smooth transition. When we go from small (.5) to large (1.75) we’d like that to take about 2 seconds and progress through a handful of values in between the current scale and the next scale. Svelte provides something called a tweened store for just this type of thing! https://svelte.dev/tutorial/tweened

A tweened store is like a fancy variable that we can give a value, say 1. When we update that value to, say 1.75, the store value will shift to that value over time based on how we configure it. Let’s see what that looks like by updating our scale to be a tweened store and seeing what breaks:

import { tweened } from “svelte/motion”;

let scale = tweened(1);

Everything is broken! That’s because tweened stores are fancy variables (they’re actually just objects) and we need to access them in a special way more info here. The shorthand way for reading and writing the value of a svelte store is with the $ prefix. So everywhere we read or write to scale needs to be updated to $scale:

Inside our reactive statement:

// reactive statement
$: if (scaleType === "SMALL"){
    $scale = .25;
} else if (scaleType === "MEDIUM"){
    $scale = 1;
} else if (scaleType === "LARGE") {
    $scale = 1.75;
}

And inside our mesh:

 <SC.Mesh
    geometry={new THREE.OctahedronGeometry()}
    material={new THREE.MeshStandardMaterial({
      color: new THREE.Color('salmon')
    })}
    rotation={[rotate, rotate, rotate]}
    scale={[$scale, $scale, $scale]}
  />

Now look at that transition!

Customizing Transitions

That’s a smooth transition, but you know what would make it even better? Changing the duration and the easing. Well that’s just the second argument to a tweened store! And of course Svelte provides a ton of great easing functions out of the box. I’ll use one here, but you should definitely play around with different options!

import { elasticOut } from “svelte/easing”;

let scale = tweened(1, { duration: 2000, easing: elasticOut });

In the next article we’ll cover animation accessibility concerns and how to use prefers-reduced-motion to avoid using animations for users who don’t want them, and how to accommodate screens with varying frame-rates so your animations can look consistent across devices.

Nice work!

References

REPL: https://svelte.dev/repl/9b3b351fe187421b84a6f1616e2c9e3d

App.svelte

<script>
  import Octo from "./Octo.svelte";
</script>
<h1>What is an Octahedron?</h1>

<div class="scene-container">
    <Octo></Octo>
</div>

<p>An octahedron is a three-dimensional shape having eight plane faces, especially a regular solid figure with eight equal triangular faces.</p>

<style>
    .scene-container {
        /* position relative let's the canvas position itself relative to this container */
        position: relative; 
        width: 75%;
        max-width: 400px;
        height: 400px;
        margin: 0 auto;
    }
</style>

Octo.svelte

<script>
    import * as THREE from "three";
    import * as SC from "svelte-cubed";
    import { tweened } from "svelte/motion"
    import { elasticOut } from "svelte/easing"

    let scaleType = "MEDIUM";
    let scale = tweened(1, {duration: 2000, easing: elasticOut});

    // reactive statement to update scale based on scaleType
    $: if (scaleType === "SMALL"){
        $scale = .25;
    } else if (scaleType === "MEDIUM"){
        $scale = 1;
    } else if (scaleType === "LARGE") {
        $scale = 1.75;
    }

    let rotate = 0;
    SC.onFrame(() => {
        rotate += .01;
    })
</script>

<SC.Canvas background={new THREE.Color('seagreen')}>
    <SC.AmbientLight
    color={new THREE.Color('white')}
    intensity={.5}
  />  
    <SC.DirectionalLight
    color={new THREE.Color('white')}
    intensity={.75}
    position={[10, 10, 10]}
  />

  <!-- MESHES -->
   <SC.Mesh
    geometry={new THREE.OctahedronGeometry()}
    material={new THREE.MeshStandardMaterial({
      color: new THREE.Color('salmon')
    })}
        rotation={[rotate, rotate, rotate]}
    scale={[$scale, $scale, $scale]}
  />

  <!-- CAMERA -->
  <SC.PerspectiveCamera near={1} far={100} fov={55}>

    </SC.PerspectiveCamera>
            <SC.OrbitControls />

<!-- all of our scene stuff will go here! -->

</SC.Canvas>

<div class="controls">
    <label>
    SMALL
        <input type="radio" bind:group={scaleType} value="SMALL" />
    </label>
    <label>
    MEDIUM
        <input type="radio" bind:group={scaleType} value="MEDIUM" />
    </label>
    <label>
    LARGE
        <input type="radio" bind:group={scaleType} value="LARGE" />
    </label>
</div>

<style>
    .controls {
        position: absolute;
        top: .5rem;
        left: .5rem;
        background: #00000088;
        padding: .5rem;
        color: white;
    }
</style>

Edits

24 May 2022: Updated octohedron to be spelled correctly octahedron (smh)

Svelte-Cubed: An Introduction to 3D in the Browser

Alex Warnes — Thu, 27 Jan 2022 02:18:13 +0000

Whatever you're making from data visualizations, or telling stories, being creative, selling products, 3D scenes open up new ways for people to engage with your content. (and it's also just really fun)

This article will walk through the basics of:

Setting up a scene
Adding lights and shapes
Incorporating the scene into a site

Tools

We'll be using svelte, three.js, and svelte-cubed.

If you're unfamiliar with these tools and just want to make something that looks cool you can still follow along! And if you want to learn more, that's great too. Here are some helpful introductory resources you can come back to later (or banish into eternal browser-tab land):

The best way to learn is to build, so let's go.

(full code is at the bottom if you run into any issues)

Setting up a Scene: Canvas and Camera

Head on over to the Svelte REPL: https://svelte.dev/repl/

This is where we'll do all our development so you can easily share your scene and won't have to worry about setting anything up on your machine.

Start by importing our main tools in the script tag:

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

// all of our javascript and logic would go here

</script>

This enables us to use THREE and SC inside our App.svelte file. (And don't worry about bundle size; the Svelte compiler will optimize that for us)

Every 3D scene is projected onto a canvas, so let's create one. Under the script tags, add a svelte-cubed canvas:

<SC.Canvas>

<!-- all of our scene stuff will go here! -->

</SC.Canvas>

Way to go! Now buy my book... just kidding. Let's continue.

We can't see anything because we have no camera. We'll go with the classic perspective camera (you can experiment with the orthographic camera at the end to see how it differs).


<!-- CAMERA -->
<SC.PerspectiveCamera near={1} far={100} fov={55} />

wait wut? Okay, so we have to configure our camera a little bit to create our view frustum aka what our camera can see.

near: anything closer than this will not be shown by the camera (unit: meters)
far: anything farther than this will not be shown by the camera (unit: meters)
fov: (Field of View) anything outside of this angle will not be shown by the camera (unit: degrees)

Let's see if it's working by creating a new color and setting it as our canvas background:


<SC.Canvas background={new THREE.Color('seagreen')}>

  <!-- CAMERA -->
  <SC.PerspectiveCamera near={1} far={100} fov={55} />

<!-- all of our scene stuff will go here! -->

</SC.Canvas>

Success!

Adding Shapes

What regular people call shapes are called a "mesh" in 3D-land, so we'll use that word from now on. A mesh is a combination of a geometry and a material, just like your table: it has a geometry (e.g. rectangle or oval) and a material (e.g. wood or glass).

Three.js offers many geometries and materials you can experiment with, and each variant can take several unique properties. For now let's add an octahedron... and together we'll learn what an octahedron is.


<!-- MESHES -->
<SC.Mesh
  geometry={new THREE.OctahedronGeometry()}
  material={new THREE.MeshStandardMaterial({
    color: new THREE.Color('salmon')
  })}
/>

Notice that we passed a javascript object into our new material with a color property. This is where you can handle all sorts of material enhancements, but we'll just use color for now.

And there it is! But it's not the color of salmon :( That's happening because our MeshStandardMaterial interacts with light and we don't have any lights! (You can experiment with a MeshBasicMaterial for something that does not interact with light to compare)

Adding Light

Unsurprisingly three.js offers many lighting options. Not sure how to incorporate this pun but: something, something, the unbearable lightness of three-ing. Now we're going to add two lights: a directional light and an ambient light, and you'll probably get the gist of what they do in the process.


<SC.DirectionalLight
  color={new THREE.Color('white')}
  intensity={.75}
  position={[10, 10, 10]}
/>

Notice how the un-lit sides are really dark. Let's add the ambient light:


  <SC.AmbientLight
    color={new THREE.Color('white')}
    intensity={.5}
  />

Looking good! But still only looks 2D because we're looking at the mesh straight on.

We can move the mesh with its rotation or position properties, or we can move the camera with its position property, but to get a full range of interactions we'll add orbit controls after our camera.


<!-- CAMERA -->
<SC.PerspectiveCamera near={1} far={100} fov={55} />

<SC.OrbitControls
  enabled
  enablePan
  enableZoom
  enableRotate
  enableDamping
/>

Now you can interact with your scene by clicking and dragging, scrolling to zoom, and right-click and drag to pan.

COOL. But none of your friends know what an octahedron is, so you want to include this scene within the context of a regular website with some words. Svelte (and svelte-cubed) make this incredibly easy.

Adding the Scene to Your Site

Let's move ALL our code into a new component.

Copy all the code (script included) in App.svelte
Click the + icon to create a new file and name it Octo.svelte
Paste all your code in Octo.svelte
Delete all the code in App.svelte

Now we can't see anything. App.svelte is the entry point for your application, and it's empty so the page is empty.

Let's add some markup in App.svelte:

<h1>What is an Octahedron?</h1>

<div class="scene-container"></div>

<p>An octahedron is a three-dimensional shape having eight plane faces, especially a regular solid figure with eight equal triangular faces.</p>

We'll use the "scene-container" div to contain our scene, and whatever dimensions we set on this container will control our scene dimensions too! Pretty neat.

Import your Octo.svelte component and nest it inside the "scene-container" div:

<script>
  import Octo from "./Octo.svelte";
</script>

And drop it in the markup like an element:

<div class="scene-container">
  <Octo />
</div>

Uh oh, it's taking over the whole page because we haven't styled the "scene-container". In App.svelte add the style tags under your markup:

<style>
  .scene-container {
    /* position relative let's the canvas position itself relative to this container */
    position: relative;
    width: 75%;
    max-width: 400px
    height: 400px;
    margin: 0 auto;
  }
</style

And there you go! An informative geometry themed page with a responsive and interactive 3D scene. But you're just getting started.

Add more shapes, change the camera, add wireframe: true to the mesh material properties. What if you change the mesh position to animate movement? What if you change the directional light position to change the angle of illumination? What about importing models and animating scenes?

If you enjoyed this and want to do more experiments, I built a little open source tool to help with some basics that will generate the svelte code for you to build on: https://sc3-lab.netlify.app/

The plan is to write a couple more of these for movement, transitions, and importing models. Until then, share what you built and be proud of it!

For Reference

REPL

https://svelte.dev/repl/71b063fc410543598e8a727999cf7bbe

App.svelte

<script>
  import Octo from "./Octo.svelte";
</script>
<h1>What is an Octahedron?</h1>

<div class="scene-container">
  <Octo></Octo>
</div>

<p>An octahedron is a three-dimensional shape having eight plane faces, especially a regular solid figure with eight equal triangular faces.</p>

<style>
.scene-container {
/* position relative let's the canvas position itself relative to this container */
  position: relative; 
  width: 75%;
  max-width: 400px;
  height: 400px;
  margin: 0 auto;
}
</style>

Octo.svelte

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

<SC.Canvas background={new THREE.Color('seagreen')}>

  <!-- LIGHTS -->
  <SC.AmbientLight
    color={new THREE.Color('white')}
    intensity={.5}
  />  
  <SC.DirectionalLight
    color={new THREE.Color('white')}
    intensity={.75}
    position={[10, 10, 10]}
  />

  <!-- MESHES -->
   <SC.Mesh
    geometry={new THREE.OctahedronGeometry()}
    material={new THREE.MeshStandardMaterial({
      color: new THREE.Color('salmon')
    })}
  />

  <!-- CAMERA -->
  <SC.PerspectiveCamera near={1} far={100} fov={55} />      
  <SC.OrbitControls
    enabled
    enablePan
    enableZoom
    enableRotate
    enableDamping
  />

</SC.Canvas>