search

WhitestormJS / whs.js

:rocket: 🌪 Super-fast 3D framework for Web Applications 🥇 & Games 🎮. Based on Three.js
MIT License
6.13k stars 392 forks source link

Any way to import a GLTF? #393

Open zardilior opened 5 years ago

zardilior commented 5 years ago

Describe your issue here.

Version:
Issue type:

How would you go about writing a parser for loading a gltf with whs importer. As of now three.js json format has had even its blender exporter removed.

noahcoetsee commented 5 years ago

I wish I could answer this in a fuller extent, but basically, look into using the three.js tool. It is still working and should be specifiable through WhitestormJS

You should be able to integrate it into WHJS by specifying that loader (after importing it into your project) with this code:

geometry: {
    path: '', // String. Url to model file.
    physics: '', // String. Url of physics model. (opional)
    loader: JSONLoader // Three.js loader. CHANGE THIS TO GLTFLoader
  }

Obviously, make sure you change the code and import the GLTFLoader into your project!

And, if you have any further questions, I would suggest checking out this page: https://whsjs.readme.io/docs/model

Edit: Extended Formatting

zardilior commented 5 years ago

Problem with gltf in the parsing step The three.js json format has already being deprecated That format and the official blender exporter project have been removed. Gltf is now the better approach according to three.js docs.

noahcoetsee commented 5 years ago

I'm not sure I understand your meaning. The three.js JSON format shouldn't affect the importing of a GLTF...

Did you see where I said "CHANGE THIS TO GLTFLoader"?

Sorry if I'm misunderstanding?

sasha240100 commented 5 years ago

@zardilior There is a geometry.parser property in options object of Importer class that handles loader input and converts to the right output.

You can find an example here: http://whs.io/module-components_meshes.Importer.html

I guess that's what he was asking about, @FeaturedSpace

noahcoetsee commented 5 years ago

Yeah I mean, what I mentioned was specifically was the GLTF parser that WHS is already supporting..

zardilior commented 5 years ago

@FeaturedSpace ok so I would import the GLTFLoader from the three.js website? Or is there one already made integrated within WHS, which isn't documented yet?

noahcoetsee commented 5 years ago

Import both. Use the WHS one.

Like this:


geometry: {
    path: '', // String. Url to model file.
    physics: '', // String. Url of physics model. (opional)
    loader: new Importer({
      loader: new THREE.GLTFLoader(),

      parser(geometry, material) { // data from loader
        return new THREE.Mesh(geometry, material); // should return your .native (mesh in this case)
      },

      position: [0, 100, 0]
    }).addTo(app);
  }
zardilior commented 5 years ago

How to add to docs? I offer myself to do so, now that I have the code. I think its very important @FeaturedSpace

noahcoetsee commented 5 years ago

That's a question for @sasha240100 !