Let’s Code a Rotating Donut! 🍩

Today, we’re going to be creating a rotating donut using Javascript with ThreeJS and VueJS.

First, make sure you have Node.js and Vue CLI installed on your system. If not, you can download them from their official websites.

Photo by Patrick Fore on Unsplash

Let’s get started by setting up our Vue project. In your terminal, type:

vue create threejs-vue-donut

Navigate to the created directory:

cd threejs-vue-donut

Now, let’s install Three.js:

npm install three

In the src/components directory, create a new file RotatingoDonut.vue. This is where we'll be writing our Three.js and Vue.js code.

Here’s the complete structure of our Vue component:

<template>
  <div ref="container"></div>
</template>

<script>
import * as THREE from 'three';
export default {
  name: 'RotatingDonut',
  mounted() {
    const container = this.$refs.container;
    const scene = new THREE.Scene();
    const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
    const renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);
    container.appendChild(renderer.domElement);
    const geometry = new THREE.TorusGeometry(10, 3, 16, 100);
    const material = new THREE.MeshBasicMaterial({ color: 0xffffff, wireframe: true });
    const donut = new THREE.Mesh(geometry, material);
    scene.add(donut);
    camera.position.z = 50;
    const animate = function () {
      requestAnimationFrame(animate);
      donut.rotation.x += Math.random() * 0.05;
      donut.rotation.y += Math.random() * 0.05;
      renderer.render(scene, camera);
    };
    animate();
  },
};
</script>

Let’s explain each block of the above code:

1. The template section is where you define the HTML structure of the Vue component. It contains a div element with a reference container. This is where the Three.js renderer will be appended.

<template>
  <div ref="container"></div>
</template>

2. Inside the script section, we first import THREE. This is the Three.js library that allows us to create and display 3D graphics in a web browser.

<script>
import * as THREE from 'three';

3. The mounted function is a Vue lifecycle hook that runs when the Vue component is added to the DOM. This is where we initialize our Three.js scene, camera, and renderer.

mounted() {
    const container = this.$refs.container;
    const scene = new THREE.Scene();
    const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
    const renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);
    container.appendChild(renderer.domElement);
    ...

We create a scene, camera, and renderer using Three.js. The camera is positioned 50 units along the z-axis from the origin, and the renderer is set to the size of the window.

4. We define the geometry of the donut using THREE.TorusGeometry and give it a wireframe material. This creates the shape of the donut.

const geometry = new THREE.TorusGeometry(10, 3, 16, 100);
const material = new THREE.MeshBasicMaterial({ color: 0xffffff, wireframe: true });
const donut = new THREE.Mesh(geometry, material);
scene.add(donut);

camera.position.z = 50;

We add the donut to the scene and set up an animate function. This function is called repeatedly using requestAnimationFrame, creating a loop that allows the donut to animate.

5. Inside the animate function, we rotate the donut slightly on the x and y axes and then render the scene from the perspective of the camera. Here, you can adapt the speed of the rotation by changing the values added to donut.rotation.x and donut.rotation.y.

const animate = function () {
      requestAnimationFrame(animate);
      donut.rotation.x += Math.random() * 0.05;
      donut.rotation.y += Math.random() * 0.05;
      renderer.render(scene, camera);
    };
    animate();
  },
};

To use the RotatingDonut component in the App.vue file, you first need to import it at the top of your script section:

<script>
import RotatingDonut from './components/RotatingDonut.vue';

Then, register it within the components object in your Vue instance:

export default {
  components: {
    RotatingDonut
  }
}

Finally, you can now use the RotatingDonut component in your template section like so:

<template>
  <div id="app">
    <RotatingDonut/>
  </div>
</template>

After these steps, the rotating donut should now be visible when you run your Vue application.

Run the following command to start rotating your 🍩:

npm run serve

This was a fun side project to explore how much code is required to create a rotating donut using Javascript and the ThreeJS library. It showcases the power and flexibility of ThreeJS and VueJS, and serves as a great introduction to 3D programming.