Can anyone explain how to port over THREE.js examples to R3F?

[c-t-y]

I've been trying to convert this to R3F but to no avail:
https://threejs.org/examples/?q=waves#webgl_points_waves

Already running into errors:

import React, { useRef, useEffect, useMemo } from 'react';
import { useFrame } from 'react-three-fiber';
import * as THREE from 'three';
import { useSprings, a } from 'react-spring/three';

export default function BackgroundAnimation() {
  var SEPARATION = 100,
    AMOUNTX = 50,
    AMOUNTY = 50;

  var particles,
    count = 0;

  var mouseX = 0,
    mouseY = 0;

  var numParticles = AMOUNTX * AMOUNTY;
  var positions = new Float32Array(numParticles * 3);
  var scales = new Float32Array(numParticles);

  var i = 0,
    j = 0;

  for (var ix = 0; ix < AMOUNTX; ix++) {
    for (var iy = 0; iy < AMOUNTY; iy++) {
      positions[i] = ix * SEPARATION - (AMOUNTX * SEPARATION) / 2; // x
      positions[i + 1] = 0; // y
      positions[i + 2] = iy * SEPARATION - (AMOUNTY * SEPARATION) / 2; // z

      scales[j] = 1;

      i += 3;
      j++;
    }
  }

  // using useMemo, not sure if this is correct
  var geometry = useMemo(() => {
    new THREE.BufferGeometry();
    geometry.setAttribute('position', new THREE.BufferAttribute(positions, 3));
    geometry.setAttribute('scale', new THREE.BufferAttribute(scales, 1));
  });

  var material = useMemo(() => {
    var material = new THREE.ShaderMaterial({
      uniforms: {
        color: { value: new THREE.Color(0xffffff) },
      },
      vertexShader: document.getElementById('vertexshader').textContent,
      fragmentShader: document.getElementById('fragmentshader').textContent,
    });
  });

  return <div></div>;
}

[gsimone]

This is maybe not the easiest example to implement if you don't already have some react and r3f knowledge, I can work on it tomorrow but my advice would be to take it slow and start with simple scenes and checking out the examples/sandboxes in this repo.

[drcmda]

here's an easier points example that you can adapt: https://codesandbox.io/s/r3f-points-czhxx

and this one is using a custom shadermaterial https://codesandbox.io/s/hopeful-chatelet-lt473

r3f is three, you could take the code wholesale and dump it into a useMemo, put it into the scene via <primitive object={...} /> and animate it via useFrame. when you want to have it clean though you need to pluck apart the example bit by bit, that can be tough because these examples are mostly a soup.