Three.js 线框 object 无法在 Next.js 中使用“@react-three/fiber”进行渲染

Question

I've been attempting to create a moving wireframe plane using Three.js in a Next.js environment based off aCodeSandbox example I saw. When I adapt the example to my own environment, it fails to render and does not throw any errors.

My Code:

import React, { useRef, useMemo } from "react";
import { Canvas, useFrame } from "@react-three/fiber";
import * as THREE from "three";

const size = 50;
const divisions = 50;
const halfsize = size / 2;
const vertices = new Float32Array((divisions + 1) * 12).map((v, i) => {
  const step = -halfsize + (Math.trunc(i / 12) * size) / divisions;
  switch (i % 12) {
    case 0:
      return -halfsize;
    case 1:
      return 0;
    case 2:
      return step;
    case 3:
      return halfsize;
    case 4:
      return 0;
    case 5:
      return step;
    case 6:
      return step;
    case 7:
      return 0;
    case 8:
      return -halfsize;
    case 9:
      return step;
    case 10:
      return 0;
    case 11:
      return halfsize;
    default:
      return null;
  }
});

const colors = new Float32Array((divisions + 1) * 12).map(() => 0.3);

const Obj = () => {
  const meshRef = useRef();

  useFrame(() => {
    if (meshRef.current) {
      meshRef.current.position.z =
        ((meshRef.current.position.z + 0.05) % 2) - 20;
      meshRef.current.position.y = -2;
      meshRef.current.rotation.y = 0; //Math.PI / 4
      meshRef.current.rotation.x = 0; //Math.PI / 8
      meshRef.current.rotation.z = 0; //Math.PI / 4
    }
  });

  return (
    <group ref={meshRef}>
      <lineSegments>
        <bufferGeometry attach="geometry">
          <bufferAttribute
            attachObject={["attributes", "position"]}
            count={vertices.length / 3}
            array={vertices}
            itemSize={3}
          />
        </bufferGeometry>
        <lineBasicMaterial attach="material" color="orange" />
      </lineSegments>
    </group>
  );
};
const SynthwaveScene = () => (
  <div className="canvas-container">
    <Canvas>
      <Obj />
    </Canvas>
  </div>
);

I've attempted switching out various different materials, adding lighting objects, using a mesh instead of a group and other different configurations of the camera, all attempted with both the deprecated 'react-three-fiber' library and the current one.

What could be the issue here?

Answer 1

Turns out the attachObject prop for bufferAttribute is deprecated.

I switched it to attach="attributes-position" and it worked!