反应-三纤维点不呈现

Question

我开始学习React-three-fiber，并试图在画布上渲染一些点。我在互联网上找到了一些代码，但它似乎没有在画布上渲染这些点。控制台没有错误。我附加了我正在运行的代码:

App.js

import { OrbitControls } from "@react-three/drei";
import { Canvas } from '@react-three/fiber';
import './App.css';
import Points from './components/Points';
import Lights from './components/Lights';
function App() {
  return (
    <div className="App">
      <Canvas orthographic camera={{ zoom: 60 }} raycaster={{ params: { Points: { threshold: 0.2 } } }}> 
          <color attach="background" args={["#161c24"]}/>
          {/* <Lights/> */}
          <Points/>
          {/* <OrbitControls/> */}
      </Canvas>
    </div>
  );
}
export default App;

Point.js

import { useRef } from 'react';
const Points = () => {
    const attrib = useRef();
    const positions = new Float32Array(
        [1,1,1, 
         0,0,0]);
    const colors = new Float32Array(
        [1,0.5,0.5,
         1,0.5,0.5]);
    return (
        <points>
            <bufferGeometry attach="geometry">
                <bufferAttribute attachObject={["attributes", "position"]} count={positions.length / 3} array={positions} itemSize={3} />
                <bufferAttribute ref={attrib} attachObject={["attributes", "color"]} count={colors.length / 3} array={colors} itemSize={3} />
            </bufferGeometry>
            <pointsMaterial attach="material" vertexColors size={100} sizeAttenuation={false} />
        </points>
    );
}
export default Points;

我已经评论了灯光和轨道控制，因为它们与某些东西相冲突，但没有任何改变。我也尝试改变光线投射和使用其他类型的光代替我的自定义，但没有。

Answer 1

这是因为R3F在每次更新/发布中都会破坏一些东西，这很烦人，因为没有关于它的文档。我和你一样遇到过这个问题，所以这段代码应该能回答你的问题:

function MyPoints() {
  const positions = new Float32Array(
      [-10,0,0, 
        10,0,0]);
  const colors = new Float32Array(
      [1,0.5,0.5,
        1,0.5,0.5]);
  return (
    <points>
        <bufferGeometry attach="geometry">
          <bufferAttribute
              attach="attributes-position"
              count={positions.length / 3}
              array={positions}
              itemSize={3}
              usage={THREE.DynamicDrawUsage}
            />
            <bufferAttribute
              attach="attributes-color"
              count={colors.length / 3}
              array={colors}
              itemSize={3}
              usage={THREE.DynamicDrawUsage}
            />
        </bufferGeometry>
        <pointsMaterial attach="material" vertexColors size={10} sizeAttenuation={false} />
    </points>
  );
}
function App() {
  return (
    <div className='App'>
      <Canvas
        camera={{
          fov: 75,
          aspect: 2,
          near: 0.1,
          far: 1000,
          position: [0,0,20],
          rotation: [0,0,0]
        }}
      >               
        <MyPoints/>        
        <Controls/>
      </Canvas>
    </div>
  );
}