so i’m new to threejs and i was trying to render a basic rectangle using BufferGeometry but i can’t see the material that was applied to the geometry.

the material would only show if i set the side option to THREE.DoubleSide otherwise it’s just pure black.
the code:

import * as THREE from "three"

function main() {
  const renderer = new THREE.WebGLRenderer({ antialias: true })
  renderer.setSize(window.innerWidth, window.innerHeight)

  document.body.appendChild(renderer.domElement)

  const fov = 75
  const aspect = window.innerWidth / window.innerHeight // the canvas default
  const near = 0.1
  const far = 2000
  const camera = new THREE.PerspectiveCamera(fov, aspect, near, far)
  camera.position.z = 1000
  camera.position.x = 0
  camera.position.y = 0

  camera.lookAt(0, 0, 0)

  const scene = new THREE.Scene()

  {
    const color = 0xffffff
    const intensity = 10
    const light = new THREE.DirectionalLight(color, intensity)

    light.position.set(10, 10, 500)
    light.target.position.set(0, 0, 0)
    scene.add(light)
    scene.add(light.target)
  }

  const positions = []
  const normals = []

  const vertices = [
    { position: [0, 256, 64], norm: [0, 0, 1], uv: [0, 0] },
    { position: [256, 256, 64], norm: [0, 0, 1], uv: [0, 0] },
    { position: [256, 0, 64], norm: [0, 0, 1], uv: [0, 0] },
    { position: [0, 0, 64], norm: [0, 0, 1], uv: [0, 0] },
  ]
  
  for (const vertex of vertices) {
    positions.push(...vertex.position)
    normals.push(...vertex.norm)
  }

  const geometry = new THREE.BufferGeometry()
  const positionNumComponents = 3
  const normalNumComponents = 3

  geometry.setAttribute(
    "position",
    new THREE.BufferAttribute(
      new Float32Array(positions),
      positionNumComponents
    )
  )
  geometry.setAttribute(
    "normal",
    new THREE.BufferAttribute(new Float32Array(normals), normalNumComponents)
  )

  geometry.setIndex([0, 1, 2, 2, 3, 0])

  const material = new THREE.MeshPhongMaterial({
    color: 0x8888ff,
    // side: THREE.DoubleSide
  })

  const kzmap = new THREE.Mesh(geometry, material)

  scene.add(kzmap)

  function resizeRendererToDisplaySize(renderer: THREE.WebGLRenderer) {
    const canvas = renderer.domElement
    const width = canvas.clientWidth
    const height = canvas.clientHeight
    const needResize = canvas.width !== width || canvas.height !== height
    if (needResize) {
      renderer.setSize(width, height, false)
    }

    return needResize
  }

  function render(time: number) {
    time *= 0.001

    if (resizeRendererToDisplaySize(renderer)) {
      const canvas = renderer.domElement
      camera.aspect = canvas.clientWidth / canvas.clientHeight
      camera.updateProjectionMatrix()
    }

    // const speed = 1
    // const rot = time * speed
    // kzmap.rotation.x = rot
    // kzmap.rotation.y = rot
    // kzmap.rotation.z = rot

    renderer.render(scene, camera)

    requestAnimationFrame(render)
  }

  requestAnimationFrame(render)
}

main()

any help would be appreciated!