React-Three-Fiber中平面顶点位置移动的合理方法

import React, { useState } from 'react';
import { Canvas } from 'react-three-fiber';

const Plane = () => {
  const [vertices, setVertices] = useState([
    [0, 0, 0], // 左上角
    [1, 0, 0], // 右上角
    [1, 1, 0], // 右下角
    [0, 1, 0]  // 左下角
  ]);

  const updateVertices = () => {
    // 更新顶点位置，这里仅作示例，你可以根据实际需求进行计算
    setVertices([
      [0, 0, 0], // 左上角
      [1, 0, 0], // 右上角
      [1, 1, 0], // 右下角
      [0, 1, 0]  // 左下角
    ]);
  };

  return (
    <mesh>
      <planeBufferGeometry args={[1, 1]} />
      <meshBasicMaterial color="red" />
      <primitive attach="vertices" vertices={vertices.flat()} />
    </mesh>
  );
};

const App = () => {
  return (
    <Canvas>
      <ambientLight />
      <Plane />
    </Canvas>
  );
};

export default App;