title: bufferGeometry and shadow react-three-fiber
body: <p>I am trying to make my own bufferGeometry work in react-three-fiber, and I am just not getting any shadows. I think I'm doing everything fine with the vertices, normals and even uvs of my bufferGeometry. I also tried to add indices to faces but for some reason that is messing up my geometry as well.</p>
  <p>If I put a small test box in the scene, it cast shadows. Only my bufferGeometry doesn't seem to work.</p>
  <p>Here is the code:</p>
  <pre><code>//MyGeometry.js -- it is stripe of quadrilaterals
  
  import * as THREE from 'three'
  import {useMemo} from 'react'
  
  export default function MyGeometry({ position, L, W, res }) {
  
      const [vertices, faces, normals, uvs] = useMemo( () =&gt; 
      {
          const arr = [];
          const facesArr = [];
          const normsArr = [];
          const uvArr = []
          const triangle_pairs = Math.floor(L/res);
          const upper_left_corner = [
              position[0] - W/2,
              position[1] - L/2,
              position[2]
          ];
  
          for(let i=0; i&lt;triangle_pairs; i++) {
  
              //v0
              const v0x = upper_left_corner[0] + Math.random()*(res/3);
              const v0y = upper_left_corner[1] + i*res + Math.random()*(res/3);
              const v0z = upper_left_corner[2] + Math.random()*(res/3);
              const v0 = new THREE.Vector3(v0x, v0y, v0z); //for computing normals
              //v1
              const v1x = upper_left_corner[0] + W + Math.random()*(res/3);
              const v1y = upper_left_corner[1] + i*res + Math.random()*(res/3);
              const v1z = upper_left_corner[2] + Math.random()*(res/3);
              const v1 = new THREE.Vector3(v1x, v1y, v1z); //for computing normals
              //v2
              const v2x = upper_left_corner[0] + Math.random()*(res/3);
              const v2y = upper_left_corner[1] + (i+1)*res + Math.random()*(res/3);
              const v2z = upper_left_corner[2] + Math.random()*(res/3);
              const v2 = new THREE.Vector3(v2x, v2y, v2z); //for computing normals
              //v3
              const v3x = upper_left_corner[0] + W + Math.random()*(res/3);
              const v3y = upper_left_corner[1] + (i+1)*res + Math.random()*(res/3);
              const v3z = upper_left_corner[2] + Math.random()*(res/3);
              const v3 = new THREE.Vector3(v3x, v3y, v3z); //for computing normals
  
  
              //UPPER triangle - 0,1,2
  
              //positions
  
              arr.push(v0x, v0y, v0z, v1x, v1y, v1z, v2x, v2y, v2z);
  
              //face, or indices
  
              facesArr.push(2*i, 2*i+1, 2*i+2);
  
              //normals
  
              const s21 = new THREE.Vector3();
              s21.copy(v2).sub(v1);
              const s01 = new THREE.Vector3();
              s01.copy(v0).sub(v1);
              const n1 = new THREE.Vector3();
              n1.copy(s21).cross(s01).normalize();
              normsArr.push(n1.x, n1.y, n1.z);
              normsArr.push(n1.x, n1.y, n1.z);
              normsArr.push(n1.x, n1.y, n1.z);
  
              //uvs
              uvArr.push(0,0, 1,0, 0,1)
  
              //LOWER triangle - 2,1,3
              
              //positions
  
              arr.push(v2x, v2y, v2z, v1x, v1y, v1z, v3x, v3y, v3z);
  
              //face, or indices
  
              facesArr.push(2*i+2, 2*i+1, 2*i+3);
  
              //normals
  
              const s31 = new THREE.Vector3();
              s31.copy(v3).sub(v1);
              const n2 = new THREE.Vector3();
              n2.copy(s31).cross(s21).normalize();
              normsArr.push(n2.x, n2.y, n2.z);
              normsArr.push(n2.x, n2.y, n2.z);
              normsArr.push(n2.x, n2.y, n2.z);
  
              //uvs
              uvArr.push(0,1, 1,0, 1,1);
  
          }        
  
          const vertices = new Float32Array(arr);
          const faces = new Uint16Array(facesArr);
          const normals = new Float32Array(normsArr);
          const uvs = new Float32Array(uvs);
  
          return [vertices, faces, normals, uvs];
  
      } 
      , []);
  
      return (
        &lt;mesh castShadow={true} receiveShadow={true} position={position}&gt;
  
          &lt;bufferGeometry 
              attach=&quot;geometry&quot;
          &gt;
              &lt;bufferAttribute
                  attachObject={[&quot;attributes&quot;, &quot;position&quot;]}
                  count={vertices.length / 3}
                  array={vertices}
                  itemSize={3}
              /&gt;
  
              &lt;bufferAttribute
                  attachObject={[&quot;attributes&quot;, &quot;normal&quot;]}
                  count={normals.length / 3}
                  array={normals}
                  itemSize={3}
              /&gt;
  
              &lt;bufferAttribute
                  attachObject={[&quot;attributes&quot;, &quot;uv&quot;]}
                  count={uvs.length / 2}
                  array={uvs}
                  itemSize={2}
              /&gt;
              
              //faces - for some reason if i uncomment this my geometry gets messed up
              {/* &lt;bufferAttribute
                  attach=&quot;index&quot;
                  count={faces.length}
                  array={faces}
                  itemSize={1}
              /&gt; */}
  
          &lt;/bufferGeometry&gt;
  
          &lt;meshPhongMaterial attach=&quot;material&quot; color=&quot;blue&quot; /&gt;
  
        &lt;/mesh&gt;
      )
  }
  </code></pre>
  <p>and then it gets rendered in here</p>
  <pre><code>//Main.js
  
  import { useRef, useState, useEffect } from 'react'
  import { Canvas, useFrame, useThree } from 'react-three-fiber'
  import { Box } from '@react-three/drei'
  import MyCamera from '../three/MyCamera'
  import MyGeometry from '../three/MyGeometry'
  
  
  export default function Main() { 
  
    return (
      &lt;div className=&quot;canvasContainer&quot;&gt;
      &lt;Canvas 
        linear = &quot;true&quot;
        frameloop=&quot;demand&quot; 
        shadows = &quot;true&quot;
        shadowMap
      &gt;
        &lt;MyCamera position={[0, 5, 30]} infLimit={-200} supLimit ={200} /&gt;
        &lt;ambientLight intensity={1}/&gt;
        &lt;mesh receiveShadow castShadow position={[0,0,0]}&gt;
          &lt;planeBufferGeometry attach=&quot;geometry&quot; args={[1000, 1000]} /&gt;
          &lt;meshStandardMaterial attach=&quot;material&quot; color=&quot;gray&quot; /&gt;
        &lt;/mesh&gt;
        &lt;MyGeometry position={[0, 0, 0]} L={10} W={5} res={10} /&gt;
      &lt;/Canvas&gt;
      &lt;/div&gt;
    )
  }
  </code></pre>