Загрузка текстур "useTexture" react-three/drei

[Raadsert]

Raadsert, нет, повторную отрисовку реакт-компонента. Сам почитай про реакт и как он работает, мне неохота тут переписывать документацию реакта или устраивать лекцию.

Но если в "useTexture" происходит асинхронная загрузка то каким образом у него получается вернуть хоть какие-то значения? Ведь асинхронная функция всегда будет возвращать промис.
Кроме того, не могу понять логику того как у "useTexture" получается делать то, чего не получается у "TextureLoader", он ведь основывается на нём. Хотелось бы разобраться, каким способом реакту, получается устранить недостатки "TextureLoader", но к сожалению не нашёл ни одной статьи на эту тему.

[Aetae]

А ты ищи статьи по реакту в целом, а не по твоей херне.
В рекате функция useTexture вызывается стопицот раз. В первый она нихрена не возвращает, только запускает внутри где-то загрузку и ставит флаг что загрузка пошла. Пока загрузка идёт - она всё ещё нихрена не возвращает. Когда загрузка закончилась, она снова внутри ставит флаг что загрузка завершена и следующий вызов уже возвращает загруженное.

Вот тебе утрированный код как это работает:

<script>
const условныеПотрохаРеактКомпонета = {};

function условныйРеакт(компонент) {
  // вместо статического интервала тут реакции на события, но не суть
  setInterval(() => { 
    document.body.innerHTML = компонент();
  }, 1000);
}

function загрузитьАсинхронно(url, колбэк){
  setTimeout(() => колбэк('текстура, ёба'), 5000);
}



function useTexture(url) {
  if(условныеПотрохаРеактКомпонета.загружено)
    return условныеПотрохаРеактКомпонета.текстура;
  if(условныеПотрохаРеактКомпонета.грузится)
    return 'нихуя, жди';

  условныеПотрохаРеактКомпонета.грузится = true;
  
  загрузитьАсинхронно(url, (result) => {
    условныеПотрохаРеактКомпонета.грузится = false;
    условныеПотрохаРеактКомпонета.загружено = true;
    условныеПотрохаРеактКомпонета.текстура = result;
  });
  
  return 'нихуя, жди'
}

let i = 0;

function нарисоватьХуйнюНаЭкранеКомпонент() {
  const texture = useTexture('http://хуй.пизда');
  return '<b>' + texture + '</b> (нарисовано раз ' + ++i + ')';
}


условныйРеакт(нарисоватьХуйнюНаЭкранеКомпонент);
</script>

Если даже это не поможет, то медицина тут бессильна.

[Raadsert]

<script>
const условныеПотрохаРеактКомпонета = {};

function условныйРеакт(компонент) {
  // вместо статического интервала тут реакции на события, но не суть
  setInterval(() => { 
    document.body.innerHTML = компонент();
  }, 1000);
}

function загрузитьАсинхронно(url, колбэк){
  setTimeout(() => колбэк('текстура, ёба'), 5000);
}



function useTexture(url) {
  if(условныеПотрохаРеактКомпонета.загружено)
    return условныеПотрохаРеактКомпонета.текстура;
  if(условныеПотрохаРеактКомпонета.грузится)
    return 'нихуя, жди';

  условныеПотрохаРеактКомпонета.грузится = true;
  
  загрузитьАсинхронно(url, (result) => {
    условныеПотрохаРеактКомпонета.грузится = false;
    условныеПотрохаРеактКомпонета.загружено = true;
    условныеПотрохаРеактКомпонета.текстура = result;
  });
  
  return 'нихуя, жди'
}

let i = 0;

function нарисоватьХуйнюНаЭкранеКомпонент() {
  const texture = useTexture('http://хуй.пизда');
  return '<b>' + texture + '</b> (нарисовано раз ' + ++i + ')';
}


условныйРеакт(нарисоватьХуйнюНаЭкранеКомпонент);
</script>

Сколько не читал статей, все пишут о том как использовать функции а не как они работают.

Получается, реакт создаёт некие события, которые повторно проходятся по функции и обновляют переменные? А почему тогда при первом обходе кода, приложением, оно не выдаёт ошибки на пустые или неподходящие переменные?

[Aetae]

Raadsert, надо смотреть конкретный код, очевидно. Может там есть какие-то проверки на такой случай, может по умолчанию оно возвращает не пустоту, а какую-нить однопиксельную пустую текстуру...

[Raadsert]

Raadsert, надо смотреть конкретный код, очевидно. Может там есть какие-то проверки на такой случай, может по умолчанию оно возвращает не пустоту, а какую-нить однопиксельную пустую текстуру...

Понял. Спасибо большое за помощь.

[Raadsert]

Raadsert, надо смотреть конкретный код, очевидно. Может там есть какие-то проверки на такой случай, может по умолчанию оно возвращает не пустоту, а какую-нить однопиксельную пустую текстуру...

Ещё вопрос. А каким образом реакт создаёт новое событие которое отлавливает состояние загрузки из useTexture?

[Aetae]

Raadsert, для хранения состояния там используется useState, который возвращает значение и функцию для изменения этого значения.

const [value, setValue] = useState(...);

и тут всё просто: функция setValue помимо того что устанавливает новое значение, заодно ещё и триггерит обновление компонента после этого.(опять же - условно, там всё чуть сложней для оптимизации, но суть именно такая)

Это setValue всегда одно для каждого useState(генерится один раз при первом обращении) и может быть вызвано когда угодно откуда угодно.

[Raadsert]

const [value, setValue] = useState(...);

А вы не знаете, можно ли как-то посмотреть код функций "useLoader, useThree" из "@react-three/fiber"? Заходил на гитхаб но файлов и функций с подобными именами там нет.

[Nexus]

Заходил на гитхаб но файлов и функций с подобными именами там нет.

Плохо смотрели: useThree, useLoader чуть ниже.