Hi, first of all, we would like to thank you for this amazing library. It works fine and it is very efficient. We can load small files without any issue in ReactJS when when we try to Load a file having a size of 20 MB this library doesn't work and show a blank screen. Is there any size limitations for using this library?
We would be happy to know more about it and contribute to fixing this issue.

Kind Regards.

Any idea how to resolve this? I am using webpack and it can't seem to locate this module.

Hello @dwqdaiwenqi ,
I really appreciate this repo, actually we are developing an electron / react app, and we need a simple 3d view inside of it.
I tried your repo and this is exactly what we need.
We have some troubles loading the texture file though, because we are taking it from a web server and THREE is giving us a cross-origin error

"THREE.WebGLState: DOMException: Failed to execute 'texImage2D' on 'WebGLRenderingContext': The image element contains cross-origin data, and may not be loaded"

On the server we have all the response headers for CORS

I was following the example below to render a GLTF asset:
https://dwqdaiwenqi.github.io/react-3d-viewer/site/#/GLTF

It works well if the GLTF only contains a .gltf file, but when I try to render a GLTF folder contains .gltf file .png for material, and .bin file, and I use the `src="../abc.gltf", "An error happened", how to properly reference the GLTF asset with multiple files. Can you provide an example?

Thank you!

Could u pls add support for Initial zoom and max/min zoom level?

Hello,

Im trying to use the OBJModel from the lib but i keep getting following error:

./node_modules/react-3d-viewer/dist/scripts/react-3d-viewer.js
Cannot find file: 'index.js' does not match the corresponding name on disk: './node_modules/React/react'.

Setup:

import React, { Component } from 'react'
import { OBJModel } from 'react-3d-viewer'
import TEST_OBJ_MODEL from 'static/__TEST_IMAGES__/test_3d_model.obj'

class 3DViewer extends Component {

    render() {
        // const { t } = this.props

        return (
            <div>
                    <OBJModel 
                        width="400" height="400"  
                        position={{x:0,y:-100,z:0}}
                        src={TEST_OBJ_MODEL} 
                        texPath=""
                    />
            </div>
        );
    }
}

Not sure what im doing wrong here, im just following the example on the website :)

But i will give you some ❤️ for making such lib :D

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?

This component renders fine when I'm developing and viewing with npm start, but after running npm run build and uploading the build to my production server, I just get this error in console:

react-3d-viewer.js:6821 Uncaught TypeError: r.setValue is not a function
    at $n.setValue (react-3d-viewer.js:6821)
    at Be (react-3d-viewer.js:9198)
    at Ar.renderBufferDirect (react-3d-viewer.js:8970)
    at Ue (react-3d-viewer.js:9113)
    at De (react-3d-viewer.js:9100)
    at Ar.render (react-3d-viewer.js:9312)
    at Object.fuc (react-3d-viewer.js:17663)
    at react-3d-viewer.js:21729
    at Array.forEach (<anonymous>)
    at e (react-3d-viewer.js:21726)

repeatedly, and the object is never rendered.

Any idea what could be causing this?

Our use case requires us to query a database for the location of a file. We update state with the returned URL and we are trying to set the src of the model with the state. For example:

< OBJModel src={this.state.filePath} texPath="" />

This does not work. Is there something I am missing here? Or is this something that would be difficult to add? The only way we can get this to work is to hardcode the url into the src path.

Thanks in advance for any help you can offer!

Is it possible to set the zoom level when loading a model? Should I perhaps be passing something as an onLoad function?

Loading a model using <GLTFModel....../> is OK,
(a) how does one access the model data, such as vertices?
(b) How does one add user annotations into the model ?
(c) Is there a full list of parameters for <GLTFModel.... other than src= & width=...?)

Hi, I am using laravel framework. I can access the model without a framework, but when i put it in Laravel, I do not know where should I put the model in order to show in the page. Is there a main directory for these MODEL?

Hi,
I keep getting an error when i try to load an obj file: Uncaught Error: THREE.OBJLoader: Unexpected line: ""

what can be the issue here?

There is white background on your example. Why?

I can see the model, but for some reason the texture don't show

Code:

Thank you for building this. It helps a lot on easier display on 3d model.

Will there be any support on using extension "KHR_texture_transform" with gltf file on react-3d-viewer?? I want to display my jacket .gltf file but those tile image was missing.

https://github.com/KhronosGroup/glTF/tree/master/extensions/2.0/Khronos/KHR_texture_transform

Getting this error on build.
WebpackError: ReferenceError: window is not defined
Anyone else having the same issue?

我使用的是MTLModel组件，我的模型本身是有透明的

但是我用组件的运行结果却是这样子的

这个有办法解决吗

Hi, @dwqdaiwenqi Nice to meet you.

I am going to apply various color to the obj model.
So I'd like you to explain how can I work it.

Regards.

is there any i can set the width by percantage(like 100%). I know right now i can do it by width={400}

<GLTFModel
                                                            src={this.state.apiUrl + '/api/v1/visitImageRequirementInfo/getImageByImagePathId?imagePath=' + this.props.filePathing} >
                                                            <AmbientLight color={0xffffff}/>
                                                            <DirectionLight color={0xffffff} position={{x:100,y:200,z:100}}/>
                                                            <DirectionLight color={0xff00ff} position={{x:-100,y:200,z:-100}}/>
                                                        </GLTFModel>

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

Can we use it with react-native and if yes, how?

the 3d object is gray and not affected with tex file
here is the code
https://codesandbox.io/embed/determined-lumiere-1omml