3D Character from UnityAssets

Questions
,
1

Hi, everyone,
I’m working on a “student project” with my team, a chat with 3D avatars.
It’s my first time working with Three.js, and React Three Fiber.
I’m responsible for the 3D because my last project was a game with Unity.

I found some really nice avatar in the Unity Asset Store, but before paying for that, I wanted to try with Free “monsters” first.
I could export the file with one monster and now I’m lost because there is so many different files.
Also, VS CODE has an extension to preview .fbx files, but it’s loading forever…
Is the .meta file, next to the .fbx file, important to use the .fbx …?
image

For the moment, I could only add some cubes to my project, so I’m happy, three.js works well with react but I don’t want cubes^^.

So my question is, how to make sure to have the right .fbx file, and how to add the materials and the animations to it…?

Thank you :smiley:

2

AFAIK, no. The FBX asset is self-contained.

I suggest you preview the assets in the three.js editor first. Normally, materials and animations should be already part of the FBX file.

3

Thank you for this fast answer !

But none of the .fbx files I put in this editor are working… I downloaded a pokemon which has a fbx file and a .dae. The dae works, not the fbx…

4

Well, that could be a problem in the FBXLoader. Is it possible for you to use glTF instead? It would be the best option out of FBX, Collada and glTF.

5

Is there a way to convert the files I have…? Or any website where I can find .gltf 3D characters…?

6

You could give this a try:


Besides, all models at Sketchfab can be downloaded as glTF:

7

Thank you for that !

I tried to read about FBX2glTF. The name is clear, but the tutorial explain you to convert Fbx to Glb …
Where is the .gltf part in all this?
I’m lost, but I can’t give up on this…

EDIT: I didn’t read correctly, or it’s maybe not explained so well… with " -b " it makes .glb files, but alone it makes .gltf, so everything is ok !
Just need to implement it in my project and then everything is perfect ! :smiley:

8

Note that glb is just the binary version of gltf. You’d be better off using glb files, because as it’s binary it’s smaller and it embed all your textures, whereas gltf files don’t.

You can load glb files with THREE.GLTFLoader the same way you do with gltf.

9

Thank you for that!
It works now, I don’t really know why, but I have my object.
My new problem is that, there is no colors, the textures are in the same files, but I guess FBX2glTF only kept the object, without reference to the textures…?
Any idea how to fix this problem…?

10

Try uploading your glb to this three.js-based web viewer : https://gltf-viewer.donmccurdy.com
If it has textures then it’s an issue with your three.js code, if not it’s an issue with FBX2glTF.

You can also import a glb/gltf file in Blender, and check the materials associated with your model.

import :

01
01751×644 268 KB

check material :

02
021049×1037 619 KB

check texture :

03
031187×890 355 KB

11

My glb is just gray…
In VSCode, I could add the texture with TextureLoader, But it’s a big mess… The object now is some kind of blue turtle with spikes on the shell, a bit like in Mario… And now it’s colorful, but it only looks like stains ^^
Can I use Blender to add correctly the textures, and then export as a new .glb file?
If not, how to fix the texture with code? And how to add many textures to the same object?

    function Model({ url }) {
  const { nodes, materials } = useLoader(GLTFLoader, url, draco())
  const texture = useLoader(TextureLoader, "PBRTurtleShellAlbedo.png")
  return (
    <group rotation={[-Math.PI / 2, 0, 0]} position={[0, -7, 0]} scale={[7, 7, 7]}>
      <group rotation={[Math.PI / 13.5, -Math.PI / 5.8, Math.PI / 5.6]}>
        <mesh castShadow receiveShadow geometry={nodes.TurtleShell.geometry} material={materials.lambert1} >
        {/* <mesh castShadow receiveShadow geometry={nodes.planet002.geometry} material={materials.scene} > */}
          <meshStandardMaterial attach="material" map={texture} />
        </mesh>
      </group>
    </group>

This is my model (I try to understand it since I just copy paste someone’s code to add my 3DObject)…

12

That’s what I do when I’m in your situation. I import the fbx in Blender, possibly rework a bit the mesh and materials, then export do glb.

13

I propably do it wrong since it’s the first time I use Blender.
But I can take my object, add the texture perfectly, but when I export as glTF/glb, when I try it in the three.js editor, it’s still gray.

14

When you reopen your glb in Blender after exporting it, has its material changed ?
Anyway can you share the fbx and the glb here ?

15

Yes, the material changed, but just the name.
I would love to know how to make a complete object (textures + animations) to export as .glb
Anyway I could find on another topic how to apply the textures correctly: texture.flipY = false;

TurtleShellMeshPBR.fbx (191.0 KB)

PBRTurtleShellAlbedo
PBRTurtleShellAlbedo512×512 59.1 KB
PBRTurtleShellAO
PBRTurtleShellAO512×512 77.6 KB
PBRTurtleShellMetalicSmoothness
PBRTurtleShellMetalicSmoothness512×512 23.9 KB
TurtleShellColor.glb (126.7 KB)

Now I’m facing 2 problems, “How to add several textures to 1 object” and “How to add animations”, In VSCode, not in Blender…

16

‘Is the .meta file, next to the .fbx file, important to use the .fbx …?’

The meta file is just for unity to keep track of files within a project it doesn’t have anything to do with the model being used outside of unity.

As Mugen said Sketchfab or similar might be an easier to work from source? Also not sure on if you have a public deliverable / how hot your Uni is on complying with asset licences but if you need to stick it up on web then you might be better with CC-BY-A licenced assets rather than Unity assets store ones.

17

You’re probably looking for texture atlas.
The way I personally do this is again in Blender, there is a tuto here.