importers

[jkinman]

What is the correct way to handle loading THREE.ColladaLoader created objects with this work flow? Is porting loaders like this to your (awesome) library in the roadmap?

[toxicFork]

#10 may be relevant :)

For loaders like this I'm thinking of creating separate modules that can be plugged into your project, so that if a new format comes along it should be easy to look at how the existing ones are done and implement the new loader.

Probably after the main functionality is complete, i.e. after #2 is resolved

[gadicc]

I'm experimenting with some patterns for this. The simplest I came up with was this:

<Loader url="/font.json" dataKey="font" loader={THREE.FontLoader}>
  <textGeometry text="hi there" size={12} height={1} />
</Loader>

Everything is cached and shared between multiple instances, and the class can be extended to make the dataKey and loader args optional for e.g. a <FontLoader>. Unfortunately though, <mesh> only accepts materials & geometries as direct children, not an interim component that would return a geometry or null (for the default case, before the font is loaded).

I'm about to rewrite it as a HOC, which I guess makes it a bit clearer what's going on and easier to use the other state properties (loading, progress and error), but I thought I might mention the above since it's such a simple pattern. @toxicFork, what are your thoughts about "interim" components inside of <mesh> and other places?

[gadicc]

Anyway, the HOC pattern is pretty straightforward too:

const MyComponentUI = ({ font }) => (
  <If condition={font.object}>
    <mesh>
      <textGeometry text="hi there" font={font.object} size={12} height={1} />
      <meshPhongMaterial color={0xffffff} />       
    </mesh>
  </If>
);

const MyComponent = Loader("/font.json", THREE.FontLoader, 'font', MyComponentUI);

export default MyComponent;

where everything in font is:

{
  loading: false,          // true while loading
  progress: {
    loaded: 2880,
    total: 2880
  },
  object: THREE.Font       // if loaded
  error: xhr.responseText  // if one occurred
}

Will publish to npm soon (with some other stuff), but interested in any feedback before.

[toxicFork]

That looks good!

Afaik meshes cannot exist without geometries so we'd need to use a replacement geometry either way. For example place an empty geometry within. That will also be similar to how textures are handled within three too, which show blank until loaded...

On Thu, 6 Oct 2016, 02:17 Gadi Cohen, [email protected] wrote:

Anyway, the HOC pattern is pretty straightforward too:

const MyComponentUI = ({ font }) => ( <If condition={font.object}> <textGeometry text="hi there" font={font.object} size={12} height={1} /> <meshPhongMaterial color={0xffffff} /> </If> ); const MyComponent = Loader("/font.json", THREE.FontLoader, 'font', MyComponentUI); export default MyComponent;

where everything in font is:

{ loading: false, // true while loading progress: { loaded: 2880, total: 2880 }, object: THREE.Font // if loaded error: xhr.responseText // if one occurred }

Will publish to npm soon (with some other stuff), but interested in any feedback before.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/toxicFork/react-three-renderer/issues/69#issuecomment-251843683, or mute the thread https://github.com/notifications/unsubscribe-auth/AA0iLfLg-eAJz1zfabrhGjRmFrN7fljPks5qxExCgaJpZM4IiEbK .

[marcooliveira]

Did we get anywhere here? I'm looking for the "right" or most elegant way to load .obj files.

[toxicFork]

Sorry for the late reply (I should have this as my signature now), just connecting #10 here again, and copying @zhuber's message

I also ran into this issue and decided to write a plugin to load objects and materials with this library as well. Hopefully some other folks find it useful: https://www.npmjs.com/package/react-three-renderer-objects