React-三纤点不渲染

Question

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

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;

我评论了 Lights 和 OrbitControls，因为它与某些东西有冲突，但没有改变。我也尝试过更改光线投射并使用其他类型的灯来代替我的自定义但什么也没有。

Answer 1

那是因为 R3F 在每个 update/release 中都破坏了一些东西，这很烦人，因为没有关于它的文档。我和你一样遇到过这个问题，所以这个片段应该回答你的问题：

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>
  );
}

React-三纤点不渲染

React-three-fiber points not rendering

three.js

reactjs

react-three-fiber

react-three-drei