Skybox failed to load using dds

Questions
,
1

I followed the tutorial to create a skybox using dds and I get an error when using it, I think it might be missing one of the loaders, but I don’t know which one.

import earCut from "earcut";
import {defineComponent, h, ref} from "vue";
import "./City.less";
import {ArcRotateCamera} from "@babylonjs/core/Cameras/arcRotateCamera";
import {Engine} from "@babylonjs/core/Engines/engine";
import {Scene} from "@babylonjs/core/scene";
import {HemisphericLight} from "@babylonjs/core/Lights/hemisphericLight";
import {Axis, Color3, Quaternion, Space, Vector3, Vector4} from "@babylonjs/core/Maths/math";
import {CreateBox} from "@babylonjs/core/Meshes/Builders/boxBuilder";
import {CreateGround, CreateGroundFromHeightMap} from "@babylonjs/core/Meshes/Builders/groundBuilder";
import {CreateSphere} from "@babylonjs/core/Meshes/Builders/sphereBuilder";
import {CreateCylinder} from "@babylonjs/core/Meshes/Builders/cylinderBuilder";
import {ExtrudePolygon} from "@babylonjs/core/Meshes/Builders/polygonBuilder";
import {SceneLoader} from "@babylonjs/core/Loading/sceneLoader";
import {StandardMaterial} from "@babylonjs/core/Materials/standardMaterial";
import {Texture} from "@babylonjs/core/Materials/Textures/texture";
import {CubeTexture} from "@babylonjs/core/Materials/Textures/cubeTexture";
import {Mesh} from "@babylonjs/core/Meshes/mesh";
import {Animation} from "@babylonjs/core/Animations/animation";

import "@babylonjs/loaders/glTF";
import "@babylonjs/loaders/OBJ/objFileLoader";
import "@babylonjs/core/Loading/Plugins/babylonFileLoader";
import "@babylonjs/core/Animations/animatable";

let hdrTexture = new CubeTexture("src/assets/SpecularHDR.dds", scene);
scene.createDefaultSkybox(hdrTexture, true, 10000);

chunk-CSKSSX56.js?v=32df63ae:198 Uncaught (in promise) Error: Cannot load cubemap because files were not defined, or the correct loader was not found.
    at AbstractEngine.createCubeTextureBase (chunk-CSKSSX56.js?v=32df63ae:198:17)
    at ThinEngine.createCubeTexture (chunk-CSKSSX56.js?v=32df63ae:261:19)
    at _CubeTexture._loadTexture (chunk-CSKSSX56.js?v=32df63ae:1216:47)
    at _CubeTexture.updateURL (chunk-CSKSSX56.js?v=32df63ae:1131:16)
    at new _CubeTexture (chunk-CSKSSX56.js?v=32df63ae:1065:14)
    at renderScene (City.tsx:215:30)
    at init (City.tsx:352:33)
    at callWithErrorHandling (chunk-7ZMIVIHH.js?v=32df63ae:1590:18)
    at callWithAsyncErrorHandling (chunk-7ZMIVIHH.js?v=32df63ae:1598:17)
    at invokeVNodeHook (chunk-7ZMIVIHH.js?v=32df63ae:8474:3)
2

You need to introduce the DDS loader.
see:

import "@babylonjs/core/Materials/Textures/Loaders/ddsTextureLoader.ts";
1 Like
3

Thanks for the answers guys, they were great!