反应三纤维不显示缓冲对象

Question

我一直在学习很多关于三个 js 的反应，它们使用 react-three/fiber 现在我正在学习如何使用点来制作一个简单的网格，其中填充了我刚刚导入的圆形图像，但由于某种原因它不会渲染我从我的点中循环的任何对象也传递我的缓冲区几何组件我很困惑我做错了什么并且我没有在我的控制台或终端日志中看到任何错误。任何人都可以通过提供提示或解释我在这里做错了什么来帮助我，谢谢这是我的代码希望它有帮助。

import logo from './logo.svg';
import './App.css';
import {Canvas, useLoader} from "@react-three/fiber";
import { Suspense } from 'react';
import circleImg from "./asset/circle.png";
import * as THREE from "three";
import { useMemo } from 'react';
function Points(){
  const CircleImg = useLoader(THREE.TextureLoader,circleImg)
  const count = 100;// number point accross one axis ini akan generate point 10.00 dimana count hanya 100 karena multiply
  const sep = 3; //merupakan distance dari tiap point
  let positions = useMemo(()=>{
    let positions =[] 
    for(let xi=0; xi<count; xi++){
      for(let zi=0; zi<count; zi++){
        let x = sep * (xi - count / 2);
        let z = sep * (zi - count / 2);
        let y = 0;
        positions.push(x,y,z)
      }
    }
    return new Float32Array(positions);//merupakan array yang sesuai dengan buffer
  },[count,sep])//ini dibuat menjadi 1d array dikarenakan bufferAtribute tidak dapat menggunakan 2d array maka dari itu position array akan menjadi seperti [x1,y1,z1,x2,y2,z2,x....]
  return (
    <points>
        <bufferGeometry attach="geometry">
          <bufferAttribute 
            attachObject={['attributes','position']}//attribute parameter yang akan dikontrol
            array={positions}
            count={positions.length / 3} //
            itemSize={3}//dikeranakan telah diketahui bahwa tiap arraytype axis akan berisi 3 value pada 1d array
          />
        </bufferGeometry>
        <pointsMaterial attach="material" map={CircleImg}
        color={0x00AAFF}
        sizes={0.5}
        sizeAttenuation //merupakan parameter yang menscale object berdasarkan perspective camera
        transparent={false}
        alphaTest={0.5} //merupakan thresshold saat rendering untuk mencega bila opacity dibawah value alphatest
        opacity={1.0} 
        />
    </points>
  );
}

function AnimationCanvas(){
  return (
    <Canvas camera={{position:[100,10,0],fov:75}}>
    <Suspense fallback={false}>
      <Points/>
    </Suspense>
  </Canvas>
  );
}

function App() {

  return (
    <div className="App">
      <Suspense fallback={<div>Loading...</div>}>
        <AnimationCanvas />
      </Suspense>
    </div>
  );
}

export default App;

Answer 1

react-three/fiber 上的附加元素似乎发生了变化，我使用这个

修复了这段代码

  <bufferGeometry>
    <bufferAttribute
    
       attach="attributes-position" // <- new attributes attach 
    
    />
  </bufferGeometry>

反应三纤维不显示缓冲对象

react three fiber not showing buffer object

reactjs

react-three-fiber