Custom Geometry with React Three Fiber, bufferGeometry not showing

Question

I'm trying to create a custom geometry using React Three Fiber. Since the Geometery has been removed from three.js I'm not having to use a bufferGeometry, however I can't get anything to show at all.

The following Scene component only displays the axesHelper, the bufferGeometry shows nothing, Does anyone know what I'm missing to show my custom geometery?

Sandbox below:

https://codesandbox.io/s/vigilant-hertz-nqfruq

//Scene.jsx
import { Canvas, useFrame } from "react-three-fiber";
import { OrbitControls, PerspectiveCamera } from "@react-three/drei";
import React, { useRef, useEffect } from "react";
import * as THREE from "three";
const Scene = () => {
  const cameraRef = useRef(null);
  const groupRef = useRef(null);


  useEffect(() => {
    cameraRef?.current?.lookAt(groupRef.current?.position);
  }, []);

  const vertices = new Float32Array([
    0.0, 0.0,  0.0,
    1.0, 0.0,  0.0,
    0.0, 1.0,  0.0,
      
    1.0, 0.0,  0.0,
    1.0, 1.0,  0.0,
    0.0, 1.0,  0.0
  ]);


  return (
    <>
      <axesHelper args={[10]} />
      <OrbitControls enableDamping dampingFactor={0.01} rotateSpeed={1} />
      <PerspectiveCamera
        ref={cameraRef}
        makeDefault
        args={[75, 800 / 600, 1, 1000]}
        position={[0, 0, 10]}
      />
          <mesh position={[0, 0, 0]} ref={groupRef}>
           <bufferGeometry>
             <bufferAttribute
               attachObject={["position"]}
                array={vertices}
                args={[vertices, 3]}
              />
           </bufferGeometry>
           <meshBasicMaterial args={[{ color: 0xff0000 }]} />
        <ambientLight args={["white", 0.25]} />
        <pointLight position={[2, 2, 2]} />
      </group>
    </>
  );
};

export default Scene;

and then App.js

import { Canvas, useFrame } from "react-three-fiber";
import { PerspectiveCamera } from "@react-three/drei";
import React, { useRef, useEffect } from "react";
import Scene from "./Scene";

function App() {
  return (
    <div className="App">
      <Canvas>
        <Scene />
      </Canvas>
    </div>
  );
}

export default App;

score 1 · Answer 1 · answered Sep 16 '22 at 17:23

This works for me :

import * as THREE from "three" // <---
import React, { useRef, useEffect } from "react";

import { OrbitControls, PerspectiveCamera } from "@react-three/drei";
const Scene = () => {
  const cameraRef = useRef(null);
  const groupRef = useRef(null);
  const ref = useRef(null) // <---

  useEffect(() => {
    cameraRef?.current?.lookAt(groupRef.current?.position);
  }, []);

  useEffect(() => {
    ref.current.setAttribute( 'position', new THREE.BufferAttribute(new Float32Array(vertices), 3));
  }) // <---

  const vertices = new Float32Array([
    0.0,
    0.0,
    0.0,
    1.0,
    0.0,
    0.0,
    0.0,
    1.0,
    0.0,

    1.0,
    0.0,
    0.0,
    1.0,
    1.0,
    0.0,
    0.0,
    1.0,
    0.0
  ]);

  return (
    <>
      <axesHelper args={[10]} />
      <OrbitControls enableDamping dampingFactor={0.01} rotateSpeed={1} />
      <PerspectiveCamera
        ref={cameraRef}
        makeDefault
        args={[75, 800 / 600, 1, 1000]}
        position={[0, 0, 10]}
      />
      <mesh position={[0, 0, 0]} ref={groupRef}>
        <bufferGeometry ref={ref} /* <--- */ />
        <meshBasicMaterial args={[{ color: 0xff0000 }]} />
      </mesh>
      <ambientLight args={["white", 0.25]} />
      <pointLight position={[2, 2, 2]} />
    </>
  );
};

export default Scene;

Custom Geometry with React Three Fiber, bufferGeometry not showing

1 Answers1