Hello,
We are trying to import a DDS file using Vue which uses webpack but we cant load the file directly because it requires a loader.
We tried using the raw loader from webpack but then the file is imported as text and causes other errors.
Anyone has experience on how to handle this?
RaananW
January 12, 2022, 10:48am
2
You could use the URL loader that will give you a base64 URL or a local URL that is hosted in your public directory by webpack. That’s what I do here -
import { HemisphericLight } from "@babylonjs/core/Lights/hemisphericLight";
import { SphereBuilder } from "@babylonjs/core/Meshes/Builders/sphereBuilder";
import { GroundBuilder } from "@babylonjs/core/Meshes/Builders/groundBuilder";
import { StandardMaterial } from "@babylonjs/core/Materials/standardMaterial";
import {CreateSceneClass} from "../createScene";
// If you don't need the standard material you will still need to import it since the scene requires it.
// import "@babylonjs/core/Materials/standardMaterial";
import { Texture } from "@babylonjs/core/Materials/Textures/texture";
import grassTextureUrl from "../../assets/grass.jpg";
export class DefaultSceneWithTexture implements CreateSceneClass {
createScene = async (
engine: Engine,
canvas: HTMLCanvasElement
): Promise<Scene> => {
// This creates a basic Babylon Scene object (non-mesh)
const scene = new Scene(engine);
{
test: /\.(js|mjs|jsx|ts|tsx)$/,
loader: "source-map-loader",
enforce: "pre",
},
{
test: /\.tsx?$/,
loader: "ts-loader",
},
{
test: /\.(png|jpg|gif|env|glb|stl)$/i,
use: [
{
loader: "url-loader",
options: {
limit: 8192,
},
},
],
},
],
Webpack doesn’t really care what file type you are loading
2 Likes