OBJ file render has a problem with showing sharp parts in obj file

Questions
, ,
1

pic1
pic1427×398 13.2 KB

Question: Why does my OBJ file render with jagged edges in Three.js r170 but not in r125?

I’m rendering an OBJ file in Three.js, and I’ve noticed that the edges of the object appear jagged when using version r170. The same file renders perfectly smooth (like a proper cylinder) in version r125. I’ve already tried tweaking colors and lighting, and I set antialias: true in the <Canvas> configuration. However, the issue persists.

Here’s what I’ve tried:

  • Applying a custom material color using applyMaterialColor (opacity and color are correctly applied).
  • Ensuring anti-aliasing is enabled in the WebGL renderer.
  • Checking lighting and material configurations.

I suspect it might be related to changes in Three.js between versions r125 and r170. How can I fix the jagged appearance in the newer version?

Code Example

import * as THREE from "three";
import { OBJLoader } from "three/examples/jsm/loaders/OBJLoader.js";
import { Canvas } from "@react-three/fiber";
import { CameraControls, Center } from "@react-three/drei";

const loader = new OBJLoader();
loader.load(
  "/data/obj1.obj",
  (loadedObj) => {
    // 1) Collect meshes with and without groups
    const meshesWithGroup = [];
    const meshesNoGroup = [];

    loadedObj.traverse((child) => {
      if ((child as THREE.Mesh).isMesh) {
        const mesh = child as THREE.Mesh;
        applyMaterialColor(mesh); // Applies color and opacity
 
      }
    });

    // Add to scene
    setObj(loadedObj);
  },
  undefined,
  (error) => {
    console.error("Error loading OBJ file:", error);
  }
);

return (
  <Canvas gl={{ antialias: true }}>
    <CameraControls ref={cameraControlsRef} />
    <Lights />
    <Center>
      <primitive
        ref={objRef}
        object={obj}
        scale={scale}
        position={[position.x, position.y, position.z]}
        rotation={[rotation.x, rotation.y, rotation.z]}
        castShadow
        receiveShadow
      />
    </Center>
  </Canvas>
);
2

a before and after image would be good.

im not sure if you may be referring to the flat shading.

3

Make sure the material you’re applying has:

shading:THREE.SmoothShading