Three.js 线框对象无法在 Next.js 中使用 \'@react-three/fiber\' 呈现

Question

我一直在尝试在基于 CodeSandbox example 的 Next.js 环境中使用 Three.js 创建一个移动的线框平面。当我将示例调整到我自己的环境时，它无法呈现并且不会抛出任何错误。

我的代码：

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>
);

我尝试过切换各种不同的材料，添加照明对象，使用网格而不是一组和其他不同的相机配置，所有这些都尝试使用已弃用的“反应三纤维”库和当前库。

这里可能是什么问题？

Answer 1

原来 bufferAttribute 的“attachObject”道具已被弃用。

我将其切换为 'attach="attributes-position"' 并且成功了！