PointCloud Component отображает проблему fetch () пользовательских данных [реагирует на три волокна] - PullRequest
Новая
       6

PointCloud Component отображает проблему fetch () пользовательских данных [реагирует на три волокна]

0 голосов
/ 04 марта 2020

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

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

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

...

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] в nested-forl oop могут возвращать правильные значения x и z в консоли.

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

Является ли проблема, вызванная тем, что position.push() nested l oop находится внутри метода fetch ()? И как решить. Спасибо.

1 Ответ

0 голосов
/ 04 марта 2020

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

...