0

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>
  );
}
HowDoIDoComputer
  • 1,383
  • 1
  • 10
  • 19
  • I'm not seeing anything onscreen, just an error in the console: `Warning: Functions are not valid as a React child. This may happen if you return a Component instead of from render. ` – M - Jan 29 '21 at 00:26
  • Yep the missing render is the bug. If you right click the tri should flicker. The function error happens regardless, seems to be an r3f thing.... – HowDoIDoComputer Jan 29 '21 at 02:29
  • yeah, cleared that error, was the useLoader func. Still having the issue – HowDoIDoComputer Jan 29 '21 at 05:07
  • 1
    I took a look at it, and couldn't figure it out. It might have something to do with your material and `AmbientLight` because when I change the material to `meshBasicMaterial`, the triangle shows up without any issue. I've never used Three with `react-three-fiber`, so who knows. As an aside, you should know that `Geometry` [is gone from the library as of `r125`](https://discourse.threejs.org/t/three-geometry-will-be-removed-from-core-with-r125/), so I recommend you use `BufferGeometry`. Who knows, it might solve your problem! – M - Jan 29 '21 at 05:12
  • Thanks for taking the time, much appreciated surprised that meshbasicmaterial worked for you, I had the same issue with that as well. I had tried with buffergeo, but had a different issue. I may have to revisit that approach. Cheers! – HowDoIDoComputer Jan 29 '21 at 16:41

0 Answers0