CODEWITHSUNDEEP
performancethree.js
João Vilaça
João Vilaça

Reputation: 621

Improving THREE js loading time

I'm new to webgl and three js but I managed to finished a small project in a few weeks. But what I want to ask is, what can I do do improve loading times of the app? I'm not complaining about the fps's because the interaction with it is smooth, but it takes quite a while to load everything. Do you guys have any tips or resources that I can check to improve the bundle js loading times?

Im using d3, topojson and three js. The project is a 3d globe with a background image. The globe has a texture and it shows the overlay of the country you're hovering with (so it has mousemove and click events). It also has 3d markers (spheres and cylinders) and interact when you click them.

I tried removing all the code i could, avoid heavy computations, and use BufferGeometry everywhere I could. It also has particles. Since it uses click events I needed Projector.js and I needed OrbitControls.js for the controls logic. Im using debounce on the events also. I'm just asking about general three js tips, some guidelines to avoid waiting 6-9seconds for whole scene to load. Thanks!

Upvotes: 1

Views: 939

Answers (1)

Jim Tang
Jim Tang

Reputation: 92

  • shrink your 3D model data;
  • use compressed texture format such as dds or crunch;
  • cut big scene into small ones and load them by lods;

Hope this helpful.

Upvotes: 2

Related Questions