three.js - Trying to render a custom triangle in react-three-fiber and mesh flickers in and out of view

Question

I am trying to generate some custom geometry on the fly with R3F. However, when I attempt to generate a triangle using a geometry object with vert array, I get odd behavior. The triangle doesn't render until I right click or alt tab away from the window or sometimes scroll - otherwise it is invisible. It flickers almost like it's z-fighting, but it is the only poly in the scene. I am pretty sure that I am winding the face in correct counterclockwise order (if I reverse order, tri never renders at all, as expected.)

What am I doing wrong/how can I get R3F to render custom geometry properly?

Minimal example here, all relevant code is in App.js: https://codesandbox.io/s/wizardly-neumann-o78ry?file=/src/App.js

TIA

import React, { Suspense } from "react";
import "./styles.css";
import * as THREE from "three";
import { Canvas, useLoader, useThree, useFrame } from "react-three-fiber";
import UVTestImg from "../assets/tex/uvTest.jpg";
import TestBox from "./TestBox";

const RoomVerts = [
  new THREE.Vector3(-1, -1, 1),
  new THREE.Vector3(1, -1, 1),
  new THREE.Vector3(1, 1, 1)
];

const RoomFaces = [new THREE.Face3(0, 1, 2)];

function Room(props) {
  const { gl } = useThree();
  const meshRef = React.useRef();
  const geoRef = React.useRef();
  //const testMap = useLoader(THREE.TextureLoader, UVTestImg);
  //testMap.wrapS = THREE.RepeatWrapping;
  //testMap.wrapT = THREE.RepeatWrapping;

  // useFrame(() => {
  //   console.log("polycount:", gl.info.render.triangles); //verifies only 1 poly
  // });

  //boxbuffergeometry works, geometry does not.

  return (
    <mesh ref={meshRef}>
      {/* <boxBufferGeometry args={[1, 1, 1]} /> */}
      <geometry
        geoRef={geoRef}
        attach="geometry"
        vertices={RoomVerts}
        faces={RoomFaces}
      />
      <meshStandardMaterial attach="material" color={0xff0000} />
    </mesh>
  );
}

export default function App() {
  return (
    <Canvas
      className="main"
      shadowMap
      camera={{ fov: 50, position: [0, 0, 3.55] }}
      onCreated={({ gl }) => {
        gl.setClearColor("black");
      }}
    >
      <ambientLight intensity={0.8} />
      <Suspense fallback={TestBox}>
        <Room />
      </Suspense>
    </Canvas>
  );
}

question from:https://stackoverflow.com/questions/65931755/trying-to-render-a-custom-triangle-in-react-three-fiber-and-mesh-flickers-in-and

Answer 1

Waitting for answers