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>
);