Jump to content
GameMonetize.com © The leading broker of high quality cross-platform HTML5 games ×

webpack loading babylon file trouble

rikrik527

By rikrik527,
in Questions & Answers

 Share

Recommended Posts

rikrik527 Newbie

rikrik527

Posted
Posted

i am using webpack and i try to load 3d model for babylonjs here is how i write the code , i require it after i require it ,the images files can not be shown also, i have tried this and that SceneLoader.loader or SceneLoader.ImportMesh and i have npm install --save babylongjs-loaders also but ican not load 3d model i am stucked here help 

 BABYLON.SceneLoader.ImportMesh("him",require('./Dude/dude.babylon'), scene, function (newMeshes, particleSystems, skeletons) {

    newMeshes[0].position = new BABYLON.Vector3(0, 0, 5);  // The original dude
    scene.beginAnimation(skeletons[0], 0, 120, 1.0, true);


})

the error log is 

         Uncaught TypeError: o._addPendingData is not a function
      at Function.i.ImportMesh (babylon.js?0ab6:35)
at createScene2 (app.js?11ea:42)
at Object.module.exports.Game (app.js?11ea:22)
at eval (index.js?9bdc:58)
at Object.<anonymous> (shanli.bundle.js?e7156e9c7a7b9cbf4463:1)
at m (shanli.bundle.js?e7156e9c7a7b9cbf4463:1)
at l (shanli.bundle.js?e7156e9c7a7b9cbf4463:1)
at Object.<anonymous> (shanli.bundle.js?e7156e9c7a7b9cbf4463:1)
       at m (shanli.bundle.js?e7156e9c7a7b9cbf4463:1)
           at shanli.bundle.js?e7156e9c7a7b9cbf4463:1

my webpack is webpack 2.7.0 i have also npm install --save babylon-file-loader

my webpack.config.js 

 const path = require('path');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
  const ExtractTextPlugin = require('extract-text-webpack-plugin');
  const webpack = require('webpack');
  const autoprefixer = require('autoprefixer');
  const PurifyCSSPlugin = require('purifycss-webpack');
   const glob = require('glob-all');
  module.exports = {
  devtool: 'inline-source-map',
  context: path.resolve(__dirname, './src'),
entry: {

    shanli: ["./app/index.js"]
        // 'vendor': ['./app/index.js']


},
output: {
    path: path.join(__dirname, 'public', 'assets'),
    filename: 'js/[name].bundle.js',
    publicPath: '/public/assets/'
},
externals:{
     oimo:'OIMO',
     cannon:'CANNON',
     earcut:'EARCUT'
},
module: {
    rules: [{
            test: /\.css$/,
            loader: ExtractTextPlugin.extract({
                fallback: 'style-loader',
                use: ['css-loader', 'postcss-loader'],
            }),




        },
        // {
        //     test: /\.(scss)$/,
        //     use: [{
        //       loader: 'style-loader', // inject CSS to page
        //     }, {
        //       loader: 'css-loader', // translates CSS into CommonJS modules
        //     }, {
        //       loader: 'postcss-loader', // Run post css actions
        //       options: {
        //         plugins: function () { // post css plugins, can be exported to postcss.config.js
        //           return [
        //             require('precss'),
        //             require('autoprefixer')
        //           ];
        //         }
        //       }
        //     }, {
        //       loader: 'sass-loader' // compiles SASS to CSS
        //     }]
        //   },
        {
            test: /\.scss$/,
            loader: ExtractTextPlugin.extract({
                fallback: 'style-loader',
                use: ['css-loader', 'sass-loader', 'postcss-loader'],


            })
        }, {
            test: /\.(js|jsx)$/,
            exclude: /node_modules/,
            use: [{
                loader: 'babel-loader',
                options: {
                    presets: [
                        ['es2015']
                    ]
                }
            }]
        }, {
            test: /\.(ico|jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp3|wav|mp4)(\?.*)?$/,
            use:[
                {
                    loader: 'file-loader',
                query: {
                    name: 'images/[name].[ext]?[hash]'
                }
            },{
                loader:'img-loader'
            }
            ],


        },{
            test: /\.babylon$/,
            use: [
              {
                loader: 'babylon-file-loader',

                query:{
                    name:'models/[name].[ext]?[hash]'
                }  
              }
            ]
          }, {
            test: /\.(mp4|webm|wav|mp3|m4a|aac|oga)(\?.*)?$/,
            loader: 'url-loader',
            query: {
                limit: 10000,
                name: 'media/[name].[ext]?[hash]'
            }

        }, {
            test: /\.json$/,
            loader: 'json-loader',
            query: {
                name: 'models/[name].[ext]?[hash]'

            },
        },
    ]
},

devServer: {
    overlay: true,
    proxy: {
      '/web': {
        target: 'http://localhost:8000',
        pathRewrite: {'^/web': ''}
      }
    },
    contentBase:path.resolve(__dirname,'./public/assets/html'),
    headers:{
        'Access-Control-Allow-Origin':'*',
        'Access-Control-Allow-Methods': 'GET, POST, PUT, DELETE, PATCH, OPTIONS',
  'Access-Control-Allow-Headers': 'X-Requested-With, content-type'
    }
},
    node:{
        fs:'empty'
    },
plugins: [

    new webpack.LoaderOptionsPlugin({
        options: {
            minimize: true,
            postcss: [
                autoprefixer({
                    browsers: ['last 2 version', 'Chrome >=49', 'Firefox >=49', 'Edge >= 11', 'ie >= 9']
                }),
            ]
        }

    }),



    new HtmlWebpackPlugin({
        title: 'shanli',
        minify: {
            removeComments: true,
            collapseWhitespace: true,
            removeRedundantAttributes: true,
            useShortDoctype: true,
            removeEmptyAttributes: true,
            removeStyleLinkTypeAttributes: true,
            keepClosingSlash: true,
            minifyJS: true,
            minifyCSS: true,
            minifyURLs: true,
            collapseWhitespace: true
        },
        hash: true,
        inject: true,
        template: './template/index.html', //load custom template .ejs by default.
        filename: 'html/index.html',
        chunks: ['shanli']
    }),

    new webpack.optimize.UglifyJsPlugin({
        test: /(\.jsx|\.js)$/,
        minimize: true,
        sourceMap: true,
        compress: {
            sequences: true,
            dead_code: true,
            unused: true,
            warnings: false,
            screw_ie8: true,
            conditionals: true,

            comparisons: true,
            evaluate: true,
            if_return: true,
            join_vars: true
        },
        compressor: {
            warnings: false
        },
        output: {
            comments: false
        }
    }),
    new ExtractTextPlugin({
        filename: 'css/[name].bundle.css',
        disable: false,
        allChunks: true,

    }),

    new webpack.ProvidePlugin({
        $: "jquery",
        jQuery: "jquery",
        "window.jQuery": "jquery"
            // Popper:['Popper.js', 'defalut']
            // in case you imported plugins individually, you must also require them there ;

    }),
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoEmitOnErrorsPlugin()
]

}

 
Link to comment
Share on other sites
Guest

Guest

Posted
Posted

Hey!

guess what? we are working on adding support for ES-modules in the next release :)

In the meantime can you try something like that? 

import * from 'babylonjs-loaders'

 BABYLON.SceneLoader.ImportMesh("him",'./Dude/dude.babylon', scene, function (newMeshes, particleSystems, skeletons) {

    newMeshes[0].position = new BABYLON.Vector3(0, 0, 5);  // The original dude
    scene.beginAnimation(skeletons[0], 0, 120, 1.0, true);


})

 

Link to comment
Share on other sites
brianzinn Newbie

brianzinn

Posted
Posted

If that doesn't work try this: 

import 'babylonjs-loaders'

BABYLON.SceneLoader.ImportMesh("him",'./Dude/', 'dude.babylon', scene, function (newMeshes, particleSystems, skeletons) {
    newMeshes[0].position = new BABYLON.Vector3(0, 0, 5);  // The original dude
    scene.beginAnimation(skeletons[0], 0, 120, 1.0, true);
})

The differences are that I'm only importing only for side effects and I have added a parameter for 'rootUrl'.

 

edit: and Welcome to the forum! :)

Link to comment
Share on other sites
rikrik527 Newbie

rikrik527

Posted
  • Author
Posted

i get this 

Uncaught TypeError: o._addPendingData is not a function
    at Function.i.ImportMesh (babylon.js?0ab6:35)
    at createScene2 (app.js?11ea:42)
    at Object.module.exports.Game (app.js?11ea:22)
    at eval (index.js?9bdc:58)
    at Object.<anonymous> (shanli.bundle.js?782050f335416b1f2bdf:1)
    at m (shanli.bundle.js?782050f335416b1f2bdf:1)
    at l (shanli.bundle.js?782050f335416b1f2bdf:1)
    at Object.<anonymous> (shanli.bundle.js?782050f335416b1f2bdf:1)
    at m (shanli.bundle.js?782050f335416b1f2bdf:1)
    at shanli.bundle.js?782050f335416b1f2bdf:1

after i use import * as a from 'babylonjs-loaders'

a.SceneLoader.ImportMesh('him','./Dude/Dude.babylon',scene,function( newMeshes,particleSystems,skeletons){
newMeshs[0].position = new BABYLON.Vector3(0,0,5)

scene.beginAnimation(skeleton[0],0,120,1.0,true)})

 

Link to comment
Share on other sites
rikrik527 Newbie

rikrik527

Posted
  • Author
Posted

i get this after i use import 'babylonjs-loaders'

babylon.js?0ab6:36 GET http://localhost:8080/Dude/dude.babylon.manifest?1538105830756 404 (Not Found)
t._checkManifestFile @ babylon.js?0ab6:36
t @ babylon.js?0ab6:36
i._loadData @ babylon.js?0ab6:35
i.ImportMesh @ babylon.js?0ab6:35
createScene2 @ app.js?11ea:42
module.exports.Game @ app.js?11ea:22
(anonymous) @ index.js?9bdc:58
(anonymous) @ shanli.bundle.js?782050f335416b1f2bdf:1
m @ shanli.bundle.js?782050f335416b1f2bdf:1
l @ shanli.bundle.js?782050f335416b1f2bdf:1
(anonymous) @ shanli.bundle.js?782050f335416b1f2bdf:1
m @ shanli.bundle.js?782050f335416b1f2bdf:1
(anonymous) @ shanli.bundle.js?782050f335416b1f2bdf:1
(anonymous) @ shanli.bundle.js?782050f335416b1f2bdf:1
babylon.js?0ab6:4 GET http://localhost:8080/Dude/dude.babylon 404 (Not Found)
s @ babylon.js?0ab6:4
d @ babylon.js?0ab6:4
t.LoadFile @ babylon.js?0ab6:4
b @ babylon.js?0ab6:35
i @ babylon.js?0ab6:36
(anonymous) @ babylon.js?0ab6:36
load (async)
t._checkManifestFile @ babylon.js?0ab6:36
t @ babylon.js?0ab6:36
i._loadData @ babylon.js?0ab6:35
i.ImportMesh @ babylon.js?0ab6:35
createScene2 @ app.js?11ea:42
module.exports.Game @ app.js?11ea:22
(anonymous) @ index.js?9bdc:58
(anonymous) @ shanli.bundle.js?782050f335416b1f2bdf:1
m @ shanli.bundle.js?782050f335416b1f2bdf:1
l @ shanli.bundle.js?782050f335416b1f2bdf:1
(anonymous) @ shanli.bundle.js?782050f335416b1f2bdf:1
m @ shanli.bundle.js?782050f335416b1f2bdf:1
(anonymous) @ shanli.bundle.js?782050f335416b1f2bdf:1
(anonymous) @ shanli.bundle.js?782050f335416b1f2bdf:1
babylon.js?0ab6:4 BJS - [11:37:10]: Unable to import meshes from ./Dude/dude.babylon: Failed to load scene.
t._ErrorEnabled @ babylon.js?0ab6:4
f @ babylon.js?0ab6:35
(anonymous) @ babylon.js?0ab6:35
p @ babylon.js?0ab6:4
XMLHttpRequest.send (async)
s @ babylon.js?0ab6:4
d @ babylon.js?0ab6:4
t.LoadFile @ babylon.js?0ab6:4
b @ babylon.js?0ab6:35
i @ babylon.js?0ab6:36
(anonymous) @ babylon.js?0ab6:36
load (async)
t._checkManifestFile @ babylon.js?0ab6:36
t @ babylon.js?0ab6:36
i._loadData @ babylon.js?0ab6:35
i.ImportMesh @ babylon.js?0ab6:35
createScene2 @ app.js?11ea:42
module.exports.Game @ app.js?11ea:22
(anonymous) @ index.js?9bdc:58
(anonymous) @ shanli.bundle.js?782050f335416b1f2bdf:1
m @ shanli.bundle.js?782050f335416b1f2bdf:1
l @ shanli.bundle.js?782050f335416b1f2bdf:1
(anonymous) @ shanli.bundle.js?782050f335416b1f2bdf:1
m @ shanli.bundle.js?782050f335416b1f2bdf:1
(anonymous) @ shanli.bundle.js?782050f335416b1f2bdf:1
(anonymous) @ shanli.bundle.js?782050f335416b1f2bdf:1
 

Link to comment
Share on other sites
brianzinn Newbie

brianzinn

Posted
Posted

 

On 9/27/2018 at 8:38 PM, rikrik527 said:

i get this after i use import 'babylonjs-loaders'

babylon.js?0ab6:36 GET http://localhost:8080/Dude/dude.babylon.manifest?1538105830756 404 (Not Found)


That is the manifest (note the filename suffix) and getting a 404 (Not found) is expected by default for manifests - that big number at the end is just a cache buster, it's part of the way caching is done and can be disabled.
"http://localhost:8080/Dude/dude.babylon"
For that url the rootUrl is "/Dude/".  The rootUrl is used in case additional assets are available for the model.  Not all 3D models are in a single file.

The second 404, however, is a problem!! :) In this case, you are saying that the file "dude.babylon" is avalalable on your local web server in /Dude/.  You need to look at 2 things:
1. ".babylon" extensions are being served - this can be a mimeType issue
2. that is the correct location for the file.  ie: it may instead be in "/assets/Dude/".

We cannot help you without you posting your code on github or somewhere.  This is a webserver issue and not related specifically to BabylonJS per se.  If you are using a starter kit on the web, I can check it out for how you add assets.  Based on your webpack config, I would start with copying that .babylon to "/public/assets/" and use "/assets/" as the rootUrl.  The file should be in "http://localhost:8080/assets/dude.babylon".  Cheers.

Link to comment
Share on other sites
  • 2 weeks later...
rikrik527 Newbie

rikrik527

Posted
  • Author
Posted

i am sorry , i have github , its here https://github.com/rikrik527/heroku-yushan-li

the 3d model is in the src /app /babylon/Dude

i am studying babylon and stuck on loading 3d model with webpack

after importing the model 

error log this 

babylon.js?0ab6:35 Uncaught TypeError: o._addPendingData is not a function
    at Function.i.ImportMesh (babylon.js?0ab6:35)
    at createScene2 (app.js?11ea:44)
    at Object.module.exports.Game (app.js?11ea:22)
    at eval (index.js?9bdc:58)
    at Object.<anonymous> (shanli.bundle.js?bdd3d48eab09f8f92a18:1)
    at m (shanli.bundle.js?bdd3d48eab09f8f92a18:1)
    at l (shanli.bundle.js?bdd3d48eab09f8f92a18:1)
    at Object.<anonymous> (shanli.bundle.js?bdd3d48eab09f8f92a18:1)
    at m (shanli.bundle.js?bdd3d48eab09f8f92a18:1)
    at shanli.bundle.js?bdd3d48eab09f8f92a18:1
i.ImportMesh @ babylon.js?0ab6:35
createScene2 @ app.js?11ea:44
module.exports.Game @ app.js?11ea:22
(anonymous) @ index.js?9bdc:58
(anonymous) @ shanli.bundle.js?bdd3d48eab09f8f92a18:1
m @ shanli.bundle.js?bdd3d48eab09f8f92a18:1
l @ shanli.bundle.js?bdd3d48eab09f8f92a18:1
(anonymous) @ shanli.bundle.js?bdd3d48eab09f8f92a18:1
m @ shanli.bundle.js?bdd3d48eab09f8f92a18:1
(anonymous) @ shanli.bundle.js?bdd3d48eab09f8f92a18:1
(anonymous) @ shanli.bundle.js?bdd3d48eab09f8f92a18:1
 

maybe its because i should upgrade my webpack? because its only version 2 ?

Link to comment
Share on other sites
ssaket Newbie

ssaket

Posted
Posted

1.6GB !! you got to be kidding me :D !! 

if you have trouble in bundling assets, you can try webpack's copy-plugin https://github.com/webpack-contrib/copy-webpack-plugin (https://medium.com/a-beginners-guide-for-webpack-2/copy-all-images-files-to-a-folder-using-copy-webpack-plugin-7c8cf2de7676)

and based on your env you can change the assets path -https://webpack.js.org/guides/public-path/ (refer webpack's docs for best practices)

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
 Share
Go to topic listing

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...