2

I am starting to learn React-three-fiber and was triying to render some points in the canvas. I have found some code on internet but it does not seems to render those points in the canvas. There are no errors in console. I attach the code I am running:

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;

I have commented Lights and OrbitControls as is its were conflicting with something but nothing changed. I have also tried to change the raycasiting and used other types of lights instead of my custom but nothing.

Ezequiel Gonzalez Macho
  • 53
  • 6

1 Answers1

2

That's because R3F breaks something in EVERY update/release and that's annoying because there's no docs about it. I have faced with this issue as you, so this snippets should answer your question:

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>
  );
}
Darkensses
  • 56
  • 3