Hi,
I am currently facing an issue where the content loaded using three.js has a white outline around the mesh as shown below.
Other meshes that were loaded are working fine. Just the grass mesh is facing this issue. May I check what could be causing this issue?
I am loading the content from a GLTF file as a scene through @react-three/fiber. The codes are as follows:
export default function Map1(props) {
const group = useRef();
const model = useLoader(GLTFLoader, "/models/new_map1.gltf");
/* if (props.mipMapper) { */
model.scene.traverse((child) => {
if (child.isMesh) {
child.material.map.generateMipmaps = false;
child.material.map.magFilter = THREE.LinearFilter;
child.material.map.minFilter = THREE.LinearFilter;
child.material.map.encoding = THREE.sRGBEncoding;
child.material.map.anisotropy = 0;
}
});
return (
<Suspense fallback={null}>
<primitive ref={group} {...props} object={model.scene} />
</Suspense>
);
<Canvas
onCreated={({ gl }) => {
/* setMipMapper(new RoughnessMipmapper(gl)); */
gl.outputEncoding = THREE.sRGBEncoding;
}}
gl={{
antialias: true,
toneMapping: THREE.ACESFilmicToneMapping,
toneMappingExposure: 1,
outputEncoding: THREE.sRGBEncoding,
}}
dpr={window.devicePixelRatio}
shadows
camera={{
position: [0, 12, 12],
rotation: [-Math.PI / 4, 0, 0],
fov: 50,
near: 1,
far: 100,
}}
>
<Map1 />
</Canvas>
Thank You