使用反应三纤维增加线框厚度

Question

我正在尝试增加一个球体线框的厚度。使用three.js可以很好地工作，但我不确定如何将其转换为react-three-fiber

Three.js

var geometry = new WireframeGeometry2(geo);
const matLine = new LineMaterial({
color: 0xffffff,
linewidth: 2,
});
matLine.resolution.set(window.innerWidth, window.innerHeight);
const mesh = new Wireframe(geometry, matLine);
scene.add(mesh);

React-three-fiber

const Globe = () => {
return (
<mesh>
<sphereBufferGeometry args={[2, 9, 9]} />
<meshStandardMaterial wireframe wireframeLinewidth={0.5} />
</mesh>
);
};

wireframeLinewidth不工作的地方，如文档

中所解释的任何想法?

Answer 1

import { LineMaterial } from 'three/examples/jsm/lines/LineMaterial';
import { Wireframe } from 'three/examples/jsm/lines/Wireframe';
import { WireframeGeometry2 } from 'three/examples/jsm/lines/WireframeGeometry2';
import { useRef, useMemo } from 'react';
import { useFrame } from 'react-three-fiber';
function MyComponent({ geo }) {
const meshRef = useRef();
const geometry = useMemo(() => new WireframeGeometry2(geo), [geo]);
const matLine = useMemo(
() =>
new LineMaterial({
color: 0xffffff,
linewidth: 2,
}),
[]
);
matLine.resolution.set(window.innerWidth, window.innerHeight);
const mesh = useMemo(() => new Wireframe(geometry, matLine), [geometry, matLine]);
useFrame(() => {
meshRef.current.rotation.x += 0.01;
meshRef.current.rotation.y += 0.01;
});
return (
<mesh ref={meshRef}>
<primitive object={mesh} />
</mesh>
);
}