CODEWITHSUNDEEP
webpackthree.jsblendergltf
Sid
Sid

Reputation: 1014

webpack and glTF files

IM using three js and trying to import a 3d model from blender, Im also using webpack with it. Im trying to load in a glb file but cant get it working. It is now adding the file to the dist folder on build but it is not changing the path to the file (in the javascript file).

Heres my files:

webpack config

const htmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
    watch: true,

    module: {
        rules: [
            {
                test: /\.html$/i,
                loader: 'html-loader',
            },
            {
              test: /\.(png|jpe?g|gif|glb|gltf)$/i,
              loader: 'file-loader',
              options: {
                  publicPath: './',
              },
          },
          {
            test: /\.glb$/,
            loader: '@vxna/gltf-loader',
            options: { inline: true },
          },
        ]
    },
    plugins: [
        new htmlWebpackPlugin({
            template: './src/index.html',
            filename: './index.html'
        })
    ]
}

javascript file im importing to

import * as THREE from 'three';
import gsap from "gsap";
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
import model from './fx.glb'


const scene = new THREE.Scene()
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000)
const renderer = new THREE.WebGLRenderer()

init()
const geometry= createShape()
scene.add(geometry)
const loader = new GLTFLoader()
loader.load('./fx.glb',(model)=>{
  scene.add(model)
})

Any idea what im doing wrong here?

Upvotes: 3

Views: 3468

Answers (3)

reeser00
reeser00

Reputation: 21

Using Webpack you need to import the .glb file first and then use the reference when loading it using the three.js GLTFLoader.

Change the following part to:

import model from './fx.glb'

const loader = new GLTFLoader();
loader.load(model,(gltf)=>{
  scene.add(gltf.scene);
});

Configure the Loader like @sid already answered. I'll leave a copy here:

{
  test: /\.(gltf|glb|fbx|bin)$/i,
  use: [{
    loader: 'file-loader',
    options: {
      outputPath: 'assets/models',
      limit: false,
      name: '[name].[ext]'
    }
  }],
  type: 'javascript/auto'
},

Upvotes: 1

Bartek Więckowski
Bartek Więckowski

Reputation: 1

I`m tried to use any gltf-loaders without results. This part of webpack configuration is working for my example

{
     test: /\.(png|svg|jpe?g|bin|gif|glb|gltf)$/,
     loader: 'file-loader',
     options: {
      esModule: false
    }
   },

here is Demo

Upvotes: 0

Sid
Sid

Reputation: 1014

         {
          test: /\.(png|jpe?g|gif|glb|gltf)$/i,
          loader: 'file-loader',
          options: {
              publicPath: './',
              name: '[name].[ext]'
          },

Upvotes: 2

Related Questions