dwqdaiwenqi / react-3d-viewer

A 3D model viewer component based on react.js 一个基于react.js的组件化3d模型查看工具
167 stars 64 forks source link

unable to show the file #19

Open arafat1023 opened 4 years ago

arafat1023 commented 4 years ago

I am trying to show a .obj file.

       <OBJModel
                    width="400" height="400"
                    position={{x: 0, y: -100, z: 0}}
                    src={mayas}
                    onLoad={() => {
                        //...
                    }}
                    onProgress={xhr => {
                        //...
                    }}
                />

I am gettting this error

./static/images/Maya.obj 1:0
Module parse failed: Unexpected character '#' (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> # Alias OBJ Model File
| # Exported from SketchUp, (c) 2000-2012 Trimble Navigation Limited
| # File units = inches
hugoh59 commented 4 years ago

Any fix?

arafat1023 commented 4 years ago

I did not use this plugin.Later i used threejs.I had to change my file loader configuration in my nextjs project. To serve assets correctly with file-loader, configure correct location of _next static dir as following:

{
  loader: 'file-loader',
  options: {
    publicPath: "/_next/static/images", // the path access the assets via url
    outputPath: "static/images/", // where to store on disk
  }
}
webpack: (config) => {
  config.module.rules.push({
    test: /\.(glb|gltf|obj)$/,
    use: {
      loader: 'file-loader',
      options: {
        publicPath: "/_next/static/images",
        outputPath: "static/images/",
      }
    },
  });

and try to import the the file like this: import test2 from "../../../static/images/filename.gltf";

I dont know it will work for you or not