Question

基于在PointCloud.js中找到的原始r3f示例的摘要

由我自己测试，上面的原始组件能够通过将单个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()。我检查了nested-forloop中的XY_arr[i][j]是否可以在控制台中返回正确的x和z值。

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

是因为position.push()嵌套循环在'fetch（）'方法内部引起的问题？以及如何解决。谢谢。

Answer 1

最好使用const [state，set] = useState（），然后在useEffect中获取内容，并在完成后调用“ set”。在useMemo中放入异步获取请求实际上是渲染功能的副作用-这不好，也不会那样工作。

PointCloud组件渲染问题fetch（）自定义数据[react-three-fiber]

1 个答案: