Компонент PointCloud создает пользовательские данные fetch() [response-three-fiber]

Question

На основе фрагмента исходного r3f-примера, найденного в PointCloud.js

Протестированный мной, этот исходный компонент, показанный выше, может отображать облако точек, нажимая отдельные x y z значение в цикл for в Particle() функция.

Я изменил его и добавил метод `fetch()'для получения текстового файла пользовательских данных, фрагмент, как показано ниже,

...

export function Particles() {
  const [positions, colors] = useMemo(() => {
  let positions = [], colors = []
  positions.length = 3
  colors.length = 3

  const HEADER_SIZE = 4;
  let stream, longArray, len;
  let clusterCount ;
  let xy_size ;         
  let clusterSize = [];
  let XY_arr = [];      

  fetch(map)
  .then((r) => r.text())
  .then(text => {
    stream = text.toString().split("\n");     // split by next line
    longArray = stream.slice(2,);             // remove header from main longArray
    len = longArray.length;

    for (let i = 0, count = 0; i < len; i += HEADER_SIZE ) {
      xy_size = longArray.slice((i + HEADER_SIZE - 1), (i + HEADER_SIZE));            
      XY_arr.push(longArray.slice((i + HEADER_SIZE ), (i + HEADER_SIZE + xy_size*2)));    
      console.log(" Points in PointCloud " + count + ": " + xy_size );
      clusterSize.push(xy_size);
      clusterCount = count;
      i += xy_size*2; 
      count ++;          
    }

    for (let i = 0; i < (clusterCount-2); i++) {  
      for (let j = 0; j < clusterSize[i]*2; j+=2) {  
        positions.push( XY_arr[i][j] )
        positions.push(0)
        positions.push( XY_arr[i][j+1] ) 
        colors.push(1)
        colors.push(0.5)
        colors.push(0.5)
        console.log( XY_arr[i][j] );
      }
    }
  }       
)
  return [new Float32Array(positions), new Float32Array(colors)]
}, [])

...
...

, map это пользовательский текстовый файл в строке с отдельными данными построчно

В fetch() может читать пользовательский файл pointcloud в XY_arr как объект Array(). Я проверил этоXY_arr[i][j] во вложенном цикле могут возвращать правильные x а также z значение в консоли.

Текущая проблема заключается в том, что облако точек не отображается на <Canvas />

Проблема вызвана position.push()вложенный цикл находится внутри метода fetch ()? И как разрешить. Спасибо.

Answer 1

Лучше использовать const [state, set] = useState(), а затем использовать useEffect, вызывая "set", когда закончите. размещение запроса асинхронной выборки внутри useMemo - это практически побочный эффект в функции рендеринга, что нехорошо и не будет работать так.