Nuxt 3 with Three.js

Nuxt 3 with Three.js
In this article, we will learn how to use Three.js with Nuxt 3 and build cool things!
What is Three.js?
Three.js is a cross-browser JavaScript library and application programming interface (API) used to create and display animated 3D computer graphics in a web browser. Three.js uses WebGL.
What is Nuxt 3?
Nuxt 3 is a web application framework based on Vue.js, it is designed to make web development powerful and performant.
Getting Started
First, we need to create a new Nuxt 3 project:
npx nuxi init nuxt-threejs
Then, we need to install the Three.js dependency:
yarn add three @types/three --dev
Using Three.js
Now, we can use Three.js in our Nuxt 3 project. Let's create a new component called arch.vue
in the components
directory and add the following code:
<script lang="ts" setup>
import { Mesh, MeshBasicMaterial, PerspectiveCamera, Scene, SphereGeometry, WebGLRenderer } from 'three'
import { useWindowSize } from '@vueuse/core'
import { Ref } from 'vue'
let renderer: WebGLRenderer
const container: Ref<HTMLCanvasElement | null> = ref(null)
const { width, height } = useWindowSize()
const aspectRatio = computed(() => width.value / height.value)
const scene = new Scene()
const camera = new PerspectiveCamera(75, aspectRatio.value, 0.1, 1000)
camera.position.set(0, 0, 4)
function updateCamera() {
camera.aspect = aspectRatio.value
camera.updateProjectionMatrix()
}
function updateRenderer() {
renderer.setSize(width.value, height.value)
renderer.render(scene, camera)
}
function setRenderer() {
if (container.value) {
renderer = new WebGLRenderer({ canvas: container.value })
updateRenderer()
}
}
function animate() {
updateRenderer()
requestAnimationFrame(animate)
}
watch(aspectRatio, () => {
updateCamera()
updateRenderer()
})
onMounted(() => {
setRenderer()
animate()
})
</script>
<template>
<canvas ref="container" />
</template>
- don't forget when using
arch.vue
component you need to wrap it withClientOnly
component to prevent errors on server-side rendering; or add.client
to end of component name.