GLTF model has transparent edge pixels

[GijsSickenga]

I have imported a .glb file into my application. It loads the model and textures correctly, but the edges of transparent textures show the webpage background behind the threejs canvas. When loading my .glb file into someone else's gltf viewer, this effect seems to be negated.

Any ideas as to what might cause this behavior, or how to fix it?

In my application, the model looks like this:

As you can see, the top of the flower shows green pixels behind it, and the bottom shows white pixels, as per the web page's background.

In the online gltf viewer, it looks like this:

My GLTF model loading code:

import React from 'react';
import * as THREE from 'three';
import { Primitive } from 'react-three-fiber/components';
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';
import { useLoader } from 'react-three-fiber';

interface ModelAssetProps {
  modelUrl: string;
  position: THREE.Vector3;
  rotation: THREE.Euler;
  scale: THREE.Vector3;
}
export default ({ modelUrl, position, rotation, scale }: ModelAssetProps): JSX.Element => {
  const mesh = useLoader(GLTFLoader, modelUrl);
  
  if (mesh.scene === null) return null;
  
  return (
    <Primitive receiveShadow castShadow
      object={mesh.scene}
      position={position}
      rotation={rotation}
      scale={scale}
    />
  );
};

[drcmda]

i guess it depends on how you set up threejs, lights, background, environment. the online viewer looks also strange to me, the edges aren't normal at least, they're jagged.

[drcmda]

btw a scene can't receive and cast shadow. look into gltfjsx, this saves from having to use primitive.

[GijsSickenga]

Thank you for this suggestion. I was able to fix it by using gltfjsx and using that to easily alter the material settings for each converted gltf model. Turns out threejs was treating the transparent materials as non-transparent, which lead to this weird edge problem. Setting them to transparent fixed the issue.

It also made it easy to turn on shadow casting and receiving, like you said, so thanks for that as well : )