自定义几何与React三纤维，bufferGeometry不显示

Question

我试图使用React Three Fiber创建一个自定义几何体。由于几何已经从three.js中删除，我不必使用bufferGeometry，但是我无法得到任何东西来显示。

下面的场景组件只显示axesHelper, bufferGeometry显示什么，有人知道我缺少什么来显示我的自定义几何图形吗?

沙箱如下:https://codesandbox.io/s/vigilant-hertz-nqfruq

//Scene.jsx
import { Canvas, useFrame } from "react-three-fiber";
import { OrbitControls, PerspectiveCamera } from "@react-three/drei";
import React, { useRef, useEffect } from "react";
import * as THREE from "three";
const Scene = () => {
const cameraRef = useRef(null);
const groupRef = useRef(null);

useEffect(() => {
cameraRef?.current?.lookAt(groupRef.current?.position);
}, []);
const vertices = new Float32Array([
0.0, 0.0,  0.0,
1.0, 0.0,  0.0,
0.0, 1.0,  0.0,

1.0, 0.0,  0.0,
1.0, 1.0,  0.0,
0.0, 1.0,  0.0
]);

return (
<>
<axesHelper args={[10]} />
<OrbitControls enableDamping dampingFactor={0.01} rotateSpeed={1} />
<PerspectiveCamera
ref={cameraRef}
makeDefault
args={[75, 800 / 600, 1, 1000]}
position={[0, 0, 10]}
/>
<mesh position={[0, 0, 0]} ref={groupRef}>
<bufferGeometry>
<bufferAttribute
attachObject={["position"]}
array={vertices}
args={[vertices, 3]}
/>
</bufferGeometry>
<meshBasicMaterial args={[{ color: 0xff0000 }]} />
<ambientLight args={["white", 0.25]} />
<pointLight position={[2, 2, 2]} />
</group>
</>
);
};
export default Scene;

然后是App.js

import { Canvas, useFrame } from "react-three-fiber";
import { PerspectiveCamera } from "@react-three/drei";
import React, { useRef, useEffect } from "react";
import Scene from "./Scene";
function App() {
return (
<div className="App">
<Canvas>
<Scene />
</Canvas>
</div>
);
}
export default App;

Answer 1

这个适合我:

import * as THREE from "three" // <---
import React, { useRef, useEffect } from "react";
import { OrbitControls, PerspectiveCamera } from "@react-three/drei";
const Scene = () => {
const cameraRef = useRef(null);
const groupRef = useRef(null);
const ref = useRef(null) // <---
useEffect(() => {
cameraRef?.current?.lookAt(groupRef.current?.position);
}, []);
useEffect(() => {
ref.current.setAttribute( 'position', new THREE.BufferAttribute(new Float32Array(vertices), 3));
}) // <---
const vertices = new Float32Array([
0.0,
0.0,
0.0,
1.0,
0.0,
0.0,
0.0,
1.0,
0.0,
1.0,
0.0,
0.0,
1.0,
1.0,
0.0,
0.0,
1.0,
0.0
]);
return (
<>
<axesHelper args={[10]} />
<OrbitControls enableDamping dampingFactor={0.01} rotateSpeed={1} />
<PerspectiveCamera
ref={cameraRef}
makeDefault
args={[75, 800 / 600, 1, 1000]}
position={[0, 0, 10]}
/>
<mesh position={[0, 0, 0]} ref={groupRef}>
<bufferGeometry ref={ref} /* <--- */ />
<meshBasicMaterial args={[{ color: 0xff0000 }]} />
</mesh>
<ambientLight args={["white", 0.25]} />
<pointLight position={[2, 2, 2]} />
</>
);
};
export default Scene;