Help Needed with Exporting Blender Particle and Line Effects to Three.js (GLTF Issues)

Questions
, , ,
1

Hi everyone,

I’m a front-end developer who recently started learning 3D and Three.js — I only have about two weeks of experience so far. My designer has provided me with a Blender project that includes some particle effects and line trails, and I need to convert it into a Three.js project. The goal is to replace a rendered video with an interactive model to save bandwidth. However, I’m running into some problems and could really use some guidance.

The Issue:

I exported the Blender project using the default GLTF export settings, and the file I got is around 7MB, which is quite large. After importing the GLTF into the Three.js Editor, I noticed several issues:

  • Missing elements: The line trails and some colors are gone.
  • Unexpected geometry: There’s a spherical geometry and some distorted shapes that weren’t present in the Blender render.
  • File size concerns: The GLTF file contains geometry with over 20,000 faces, which is a big part of why the file size is so large. This is something I want to optimize.

What I’m Trying to Achieve:

  • Correct GLTF export: I’d like to know how I can export the Blender model in a way that ensures the line trails, particle effects, and colors are preserved in Three.js without any additional geometry appearing.
  • Using code for particle effects: I recently completed the Particles and Galaxy Generator lessons from threejs-journey, and I’m wondering if it would make sense to use code to recreate the particle effects instead of using the exported geometry, to optimize the file size and keep the visual fidelity.
  • Separate GLTF exports for lines and particles: Is it possible to export the line trails and particle effects separately into different GLTF files? In the final rendering, I need the line trails to appear in front of the particles.

Attachments and Screenshots:

Additional Context:

I’ve noticed that the line trails and particles in Blender use specific shaders and materials, which might be causing problems during export. If you have any advice on handling this or suggestions for optimizing the GLTF export, I’d greatly appreciate it!

Thank you so much in advance for your help! I’m still learning the ropes, and any guidance would mean a lot to me.

Best regards,
Garfield Lee

Note: I am not a native English speaker, and parts of this post were generated using GPT. I hope everything is clear, and I appreciate your understanding!

2

Vertices / faces take up a reaaaaaaally small % of the file size. The main culprit in terms of file size is the textures - make sure to run your exported model via gltf-transform or another optimised, that will reduce especially the texture size. Reducing vertex count will not give you that much of a difference.

Many elements in Blender are Blender-specific and cannot be exported (some types of objects and especially shader materials - if your material in Blender uses node combinations, there’s a huge chance that it won’t export, since that node system is Blender-specific.)

It’s not possible to export physics / simulations / volumes / particles / geometry nodes out of Blender - these systems work only inside Blender. You’ll need to code them in three.js by hand.

Taking all above into consideration - it’s good to realise three.js is not an engine / framework, it’s just a rendering library. So to recreate quality of Blender, you’ll need to code quite a lot by yourself - using Blender GLTF as a base, that you extend with three.js interactivity.

1 Like
3

Thank you for your patient explanation,

I noticed that there are a large number of data like the following in the glTF text file, these structures with different numbers occupy a lot of space.

I realize they are the same geometry at different positions, with different rotation angles and scaling ratios.

{
  "mesh": 3,
  "name": "po01",
  "rotation": [
    0.8527572751045227,
    0.18599353730678558,
    0.4108201265335083,
    0.2635118067264557
  ],
  "scale": [
    -0.0011945146834477782,
    -0.0011945147998631,
    -0.0011945146834477782
   ],
   "translation": [
     -0.7636423110961914,
     -0.49072757363319397,
     0.9620266556739807
   ]
}

What key concepts do I need to learn in order to replace this data through coding?

Thank you again for your answer. Are there any other important concepts that I need to learn in order to achieve my goals? Hope to receive your reply again.