gatsby three js

Created on 26 Apr 2018 · 11Comments · Source: gatsbyjs/gatsby

Hi everyone! First of all thanks for Gatsby wich is very cool! I'm trying Gtasby with react three js wich works fine and i want now to get and 3d model with react-three-renderer-objects so i just need to import a file .obj in my react component wich one is in my static folder, but i'm new in webpack and i think that i need loader maybe? So i'm trying to implement it but i can't get the good webpack config!
So i try to add 'npm install --save-dev webpack-obj-loader' for helping me but i can't get it! Thanks for your help!

question or discussion

Source

Caboteur

👍1

Most helpful comment

I was able to get the OBJ files to import by extending Gatby's webpack config with the Webpack OBJ loader package.

exports.onCreateWebpackConfig = ({
  stage,
  rules,
  loaders,
  plugins,
  actions,
}) => {
  actions.setWebpackConfig({
    module: {
      rules: [
        {
          test: /\.obj$/,
          use: [
            `webpack-obj-loader`,
          ],
        },
      ],
    },
  })
}

8ctopotamus on 10 Nov 2019

🚀2 👍2 🎉1

All 11 comments

You shouldn't need a webpack loader for that.

Three js provides a loader:
https://threejs.org/docs/#examples/loaders/OBJLoader

magicspon on 26 Apr 2018

yep but if i put a file .obj in my static file when i'm compiling gatsby it tells me that
`in ./public/static/chair.obj

Module parse failed: C:\Users\cabot\Desktop\gatsby\gatsby-threejs\public\static\chair.obj Unexpected token (2:2)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected token (2:2)
at Parser.pp$4.raise (C:\Users\cabot\Desktop\gatsby\gatsby-threejsnode_modules\acorn\dist\acorn.js:2221:15)
at Parser.pp.unexpected (C:\Users\cabot\Desktop\gatsby\gatsby-threejsnode_modules\acorn\dist\acorn.js:603:10)
at Parser.pp.semicolon (C:\Users\cabot\Desktop\gatsby\gatsby-threejsnode_modules\acorn\dist\acorn.js:581:61)
at Parser.pp$1.parseExpressionStatement (C:\Users\cabot\Desktop\gatsby\gatsby-threejsnode_modules\acorn\dist\acorn.js:966:10)
at Parser.pp$1.parseStatement (C:\Users\cabot\Desktop\gatsby\gatsby-threejsnode_modules\acorn\dist\acorn.js:730:24)
at Parser.pp$1.parseTopLevel (C:\Users\cabot\Desktop\gatsby\gatsby-threejsnode_modules\acorn\dist\acorn.js:638:25)
at Parser.parse (C:\Users\cabot\Desktop\gatsby\gatsby-threejsnode_modules\acorn\dist\acorn.js:516:17)
at Object.parse (C:\Users\cabot\Desktop\gatsby\gatsby-threejsnode_modules\acorn\dist\acorn.js:3098:39)
at Parser.parse (C:\Users\cabot\Desktop\gatsby\gatsby-threejsnode_modules\webpack\lib\Parser.js:902:15)
at NormalModule. (C:\Users\cabot\Desktop\gatsby\gatsby-threejsnode_modules\webpack\lib\NormalModule.js:104:16)
at NormalModule.onModuleBuild (C:\Users\cabot\Desktop\gatsby\gatsby-threejsnode_modules\webpacknode_modules\webpack-core\lib\NormalModuleMixin.js:310:10)
at nextLoader (C:\Users\cabot\Desktop\gatsby\gatsby-threejsnode_modules\webpacknode_modules\webpack-core\lib\NormalModuleMixin.js:275:25)
at C:\Users\cabot\Desktop\gatsby\gatsby-threejsnode_modules\webpacknode_modules\webpack-core\lib\NormalModuleMixin.js:259:5
at Storage.finished (C:\Users\cabot\Desktop\gatsby\gatsby-threejsnode_modules\enhanced-resolve\lib\CachedInputFileSystem.js:38:16)
at C:\Users\cabot\Desktop\gatsby\gatsby-threejsnode_modules\graceful-fs\graceful-fs.js:78:16
at FSReqWrap.readFileAfterClose [as oncomplete] (fs.js:511:3)

@ ./src/pages/index.js 26:13-53`

thanks for your answer!

Caboteur on 26 Apr 2018

Hey, @Caboteur did you ever figure this out?

sarahannnicholson on 27 Jul 2018

Due to the high volume of issues, we're closing out older ones without recent activity. Please open a new issue if you need help!

KyleAMathews on 8 Sep 2018

Hey @sarahannnicholson , sorry for the delay , i finnaly used babylon js wich is pretty similar to three js but much more easy (for me) to deals with react and gatsby !

Caboteur on 27 Sep 2019

👍1

I was able to get the OBJ files to import by extending Gatby's webpack config with the Webpack OBJ loader package.

exports.onCreateWebpackConfig = ({
  stage,
  rules,
  loaders,
  plugins,
  actions,
}) => {
  actions.setWebpackConfig({
    module: {
      rules: [
        {
          test: /\.obj$/,
          use: [
            `webpack-obj-loader`,
          ],
        },
      ],
    },
  })
}

8ctopotamus on 10 Nov 2019

🚀2 👍2 🎉1

@8ctopotamus working fine 👍

mtiziano on 20 Nov 2019

I'll give that a go! Thanks @8ctopotamus

sarahannnicholson on 20 Nov 2019

You just need an additional rule for url-loader.

This is what I did and it works well:

exports.onCreateWebpackConfig = ({
  stage,
  rules,
  loaders,
  plugins,
  actions,
}) => {
  actions.setWebpackConfig({
    module: {
      rules: [
        {
          test: /\.obj$/,
          use: [`url-loader`],
        },
      ],
    },
  });
};

You can then import the obj and use threejs's OBJLoader to load it by passing it as such:

import HandModel from './hand.obj';
const loader = new THREE.OBJLoader(manager);
let object;

loader.load(
  HandModel,
  obj => {
    object = obj;
  },
  onProgress,
  onError
);