Cobe Lightweight WebGL Globe Setup Tutorial and Vue Project Integration Guide

Why Choose COBE?

In web development, adding 3D elements usually means loading libraries that are hundreds of KB in size, such as Three.js. But if you only need a simple, elegant, and smooth 3D globe, COBE is genuinely impressive.

It is a lightweight WebGL-based globe library, and the compressed size is only about 5KB. It does not depend on any large framework, performs very well, and supports a high level of customization.

Implementation Demo (Live Demo)

Below is the COBE globe I implemented in Nuxt 3. You can try dragging it with your mouse:

Official Demo (Official Demo)

I think the official demo is really well made. Their interface design skills are far better than mine. Click here to visit the official site

How to Use It in Your Project?

1. Install the Package

You can install it with npm or pnpm:

npm install cobe

2. Core Code Implementation

In Vue 3 or Nuxt 3, we need to make sure the code runs on the client side, because it uses the Canvas API.

<script setup>
import createGlobe from 'cobe'
import { ref, onMounted } from 'vue'

const canvasRef = ref(null)

onMounted(() => {
  const globe = createGlobe(canvasRef.value, {
    devicePixelRatio: 2,
    width: 600 * 2,
    height: 600 * 2,
    phi: 0,
    theta: 0,
    dark: 1,
    diffuse: 1.2,
    mapSamples: 16000,
    mapBrightness: 6,
    baseColor: [0.3, 0.3, 0.3],
    markerColor: [233 / 255, 115 / 255, 40 / 255],
    glowColor: [1, 1, 1],
    markers: [
      { location: [25.0330, 121.5654], size: 0.1 }, // 標註台北
    ],
    onRender: (state) => {
      // 每一幀的旋轉邏輯
      state.phi += 0.005
    },
  })
})
</script>

<template>
  <canvas ref="canvasRef" style="width: 600px; height: 600px" />
</template>

Core Configuration Notes

COBE provides plenty of parameters for adjusting the globe’s appearance:

Personal Notes

I really like COBE’s design philosophy: do one thing, and do it very well.

If you just want to add a bit of visual polish to your Landing Page, or if, like me, you want to show your location on a personal blog, COBE offers a lot of value for the effort. It does not have the steep learning curve of Three.js, and you can get it working with just a few lines of code.

Small tip: When using it in Nuxt, remember to wrap it with <ClientOnly>. Otherwise, SSR will throw an error because it cannot find window or canvas.

Related Links:

• COBE GitHub Repository
• Official Demo by Shuding

The globe implementation in this article is based on the official COBE example and componentized for Nuxt 3.