dwqdaiwenqi / react-3d-viewer

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

gray MTL Model problem #2

Open realapril opened 5 years ago

realapril commented 5 years ago

Hi, thanks for your 3d viewer.

I tried MTLModel with several 3d obj and mtl files. One of them is this dog model, https://free3d.com/3d-model/dog-v1--722788.html and another one is this kitchen table model. https://free3d.com/3d-model/kitchen-set-15847.html

Anyway, when I import {MTLModel} and put obj and mtl file mtl file doesn't work at all. All I get is gray(almost black) 3d objects like this:

the dog model https://user-images.githubusercontent.com/39916556/48070323-f5765480-e21a-11e8-9479-d31589f28c5c.png

the kithcen table model https://user-images.githubusercontent.com/39916556/48070178-9a446200-e21a-11e8-921c-321a1307b07a.png

Also, this is my code for MTLModel: <MTLModel width="500" height="500" position={{x:0,y:0,z:0}} mtl={dogMaterial} src={dogModel}

/>

Is there any recommendation for me?

realapril commented 5 years ago

Actually, I tried with {DAEModel} too. dae model: https://free3d.com/3d-model/pikachu-pokemon-87270.html result: https://user-images.githubusercontent.com/39916556/48072199-4c7e2880-e21f-11e8-8e4c-04ffe861203e.png Please save my poor pikachu.

dwqdaiwenqi commented 5 years ago

Hi, thanks for your 3d viewer.

I tried MTLModel with several 3d obj and mtl files. One of them is this dog model, https://free3d.com/3d-model/dog-v1--722788.html and another one is this kitchen table model. https://free3d.com/3d-model/kitchen-set-15847.html

Anyway, when I import {MTLModel} and put obj and mtl file mtl file doesn't work at all. All I get is gray(almost black) 3d objects like this:

the dog model https://user-images.githubusercontent.com/39916556/48070323-f5765480-e21a-11e8-9479-d31589f28c5c.png

the kithcen table model https://user-images.githubusercontent.com/39916556/48070178-9a446200-e21a-11e8-921c-321a1307b07a.png

Also, this is my code for MTLModel: <MTLModel width="500" height="500" position={{x:0,y:0,z:0}} mtl={dogMaterial} src={dogModel}

/>

Is there any recommendation for me?

Maybe there is a conflict between the path of the MTL file and the path of the image contained in the MTL file, and the texture is not loaded. You can directly modify the image path in the MTL file or add 'texPath ' parameter to the <MTLModel/>

texPath: <MTLModel width="500" height="500" position={{x:0,y:0,z:0}} texPath="./base_url" mtl={dogMaterial} src={dogModel}

/>

dwqdaiwenqi commented 5 years ago

Actually, I tried with {DAEModel} too. dae model: https://free3d.com/3d-model/pikachu-pokemon-87270.html result: https://user-images.githubusercontent.com/39916556/48072199-4c7e2880-e21f-11e8-8e4c-04ffe861203e.png Please save my poor pikachu.

I can successfully load pikachu's model.

https://dwqdaiwenqi.github.io/react-3d-viewer/site/#/DAE

realapril commented 5 years ago

Updated version 1.0.10 doesn't work at all!! I reinstalled react-3d-viewer and it now says " Module not found: Can't resolve 'react-3d-viewer' in '/home/ubuntu/web/src/routes' . " (which is my react project root file) Even though my code is the same, I can't import your library at all now!

In fact 1.0.9 version caused some problems to me because putting file location directely into src and mtl didn't work. For example, src={'./model/dog.obj'} didn't work (it only showed empty screen) so I had to do like this:

import dogModel from "./model/dog.obj"; and put that model like this src={dogModel}.

Although the url was the same but src={'./model/dog.obj'} didn't work and only src={dogModel} worked. For additional information model folder is in src/routes folder.

dwqdaiwenqi commented 5 years ago

Updated version 1.0.10 doesn't work at all!! I reinstalled react-3d-viewer and it now says " Module not found: Can't resolve 'react-3d-viewer' in '/home/ubuntu/web/src/routes' . "

It has been fixed in v1.0.11 .Try again ~

realapril commented 5 years ago

./node_modules/react-3d-viewer/dist/scripts/react-3d-viewer.js Module not found: Can't resolve 'React' in '/home/ubuntu/hello-react/node_modules/react-3d-viewer/dist/scripts'

That's weird!

dwqdaiwenqi commented 5 years ago

./node_modules/react-3d-viewer/dist/scripts/react-3d-viewer.js Module not found: Can't resolve 'React' in '/home/ubuntu/hello-react/node_modules/react-3d-viewer/dist/scripts'

That's weird!

Look at this example, https://github.com/dwqdaiwenqi/react-3d-viewer/blob/master/site/index.html

=====

=====

To include React from a CDN instead of bundling it

dwqdaiwenqi commented 5 years ago

./node_modules/react-3d-viewer/dist/scripts/react-3d-viewer.js Module not found: Can't resolve 'React' in '/home/ubuntu/hello-react/node_modules/react-3d-viewer/dist/scripts' That's weird!

Look at this example, https://github.com/dwqdaiwenqi/react-3d-viewer/blob/master/site/index.html

=====

=====

To include React from a CDN instead of bundling it

webpack.config.js

module.exports = { //... externals: { 'react': 'React', 'react-dom':'ReactDOM' } }

realapril commented 5 years ago

Accoring to webpack.config.js in /hello-react/node_modules/react-3d-viewer/ there is externals: { 'react': 'React', 'react-dom':'ReactDOM' } in module. exports already. I made my react project by CRA(create-react-app) and I don't have any html file that needs CDN. I recommend you to test your 3d viewer by making a simple CRA project and import the viewer.

realapril commented 5 years ago

Ok, so I tried both of your solution the first one image

the second one image

and both didn't work. The same error message ./node_modules/react-3d-viewer/dist/scripts/react-3d-viewer.js Module not found: Can't resolve 'React' in '/home/ubuntu/hello-react/node_modules/react-3d-viewer/dist/scripts'