@cesium/engine and @cesium/widgets with vite

CesiumJS
1

Hi all,

I am trying to get @cesium/engine and @cesium/widgets running with Vite. So far, I don’t get any error messages, but 3D tiles and terrain are not displayed at all (although the data is being fetched). My vite.config.js looks like this:

import { defineConfig } from "vite";
import { viteStaticCopy } from "vite-plugin-static-copy";

const cesiumBaseUrl = "cesiumStatic";

export default defineConfig({
  base: "./",
  define: {
    CESIUM_BASE_URL: JSON.stringify(cesiumBaseUrl),
  },
   plugins: [
            viteStaticCopy({
                targets: [
                    { src: `node_modules/@cesium/engine/Source/Assets`, dest: cesiumBaseUrl },
                    { src: `node_modules/@cesium/engine/Source/Core`, dest: cesiumBaseUrl },
                    { src: `node_modules/@cesium/engine/Source/Renderer`, dest: cesiumBaseUrl },
                    { src: `node_modules/@cesium/engine/Source/Scene`, dest: cesiumBaseUrl },
                    { src: `node_modules/@cesium/engine/Source/Shaders`, dest: cesiumBaseUrl },
                    { src: `node_modules/@cesium/engine/Source/ThirdParty`, dest: cesiumBaseUrl },
                    { src: `node_modules/@cesium/engine/Source/Workers`, dest: cesiumBaseUrl },

                    { src: `node_modules/@cesium/widgets/Source`, dest: cesiumBaseUrl },
                ],
            })
        ]
});

Does anyone know how to solve this problem? I’d like to build Cesium myself so that I have control over things like tree-shaking, compression, etc.

Thanks in advance.

Best regards

2

Hi there,

Do you see any errors in the developer console? Any 404’s in particular?

3

Did you set your personal Cesium Ion token ?

You can have a look at demo-cesium-widget…

Note: I’m the author of vite-plugin-cesium-engine

4

Thank you both for your responses, and I apologize for my delayed reply.

@Gabby_Getz I encountered some errors related to loading files in the workers folder. These issues were resolved after setting node_modules/.vite/deps as my cesiumBaseUrl. Previously, some worker files couldn’t be loaded, which led to follow-up errors from Resource.js. However, these problems ceased once I adjusted the cesiumBaseUrl.

@jerome.fayot , I tried both approaches: running a project without a Cesium ion token (since I host terrain and 3D tiles myself) and a clean project set up as follows:

import { Viewer } from '@cesium/widgets';
import { Ion, Cartesian3, Terrain } from '@cesium/engine';

Ion.defaultAccessToken = "myAccessToken";
const viewer = new Viewer('cesiumContainer', {
  terrain: Terrain.fromWorldTerrain(),
});

In both projects, I do not receive any errors. However, no terrain or 3D tiles are being loaded, although my instanced 3D tiles v1.1 do load successfully.