0

基于 PointCloud.js 中的原始 r3f-example片段

经我自己测试，上面这个原始组件能够通过将单个x y z值推送到Particle()函数中的 for 循环来渲染点云。

我对其进行了修改并添加了一个 `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()方法能够将自定义点云文件XY_arr作为Array(). 我已经检查XY_arr[i][j]了嵌套的forloop能够在控制台中返回正确x的值。z

当前的问题是没有点云被渲染到<Canvas />

position.push()嵌套循环是否在 'fetch()' 方法中引起的问题？以及如何解决。谢谢你。

4

1 回答 1

0

最好使用 const [state, set] = useState() ，然后在完成后调用“set”在 useEffect 中获取。在 useMemo 中放置一个异步获取请求实际上是渲染函数的副作用——这不好，也不会那样工作。

于 2020-03-04T10:24:30.280 回答