Как повысить производительность при загрузке моделей в three.js?

Question

Я пытаюсь загрузить .stl-файлы в свой просмотрщик, а затем использовать элементы управления орбиты, входящие в состав three.js, чтобы позволить пользователю перемещать камеру вокруг файла и просматривать ее со всех сторон. Модели загружаются успешно, но даже на более высоких конечных системах вращение вокруг детали происходит очень медленно и замедляется еще больше, чем дольше зритель активен.

Что я могу сделать для улучшения производительности просмотра?

Я не могу сделать jsFiddle для этого или использовать Codepen из-за того, как у меня настроен мой сайт, но он работает на ethanhammond.github.io, а код можно посмотреть на github.com/ ethanhammond/ethanhammond.github.io.

Это также мой первый раз, когда я использовал three.js, и из-за этого у меня могут возникнуть некоторые проблемы в моем коде.

Answer 1

Ваша проблема эта линия:

orbitControls.addEventListener('change', renderScene); 

С каждым изменением контроля орбиты вы начинаете новый цикл рендеринга. Поэтому со временем у вас есть несколько циклов рендеринга. Вместо того, чтобы слушать change события, вам нужно поместить эту строку в вашу renderScene функции:

orbitControls.update(); 

Вы также можете посмотреть на официальных примеров: misc_orbit_controls. Там он также говорит

//controls.addEventListener('change', render); // add this only if there is no animation loop (requestAnimationFrame)