support@lune.dev

Want to use over 200+ MCP servers inside your coding tools like Cursor?

Asked 2 months ago by NeutronWanderer600

From ThreeJS Community

Why does my OBJ file show jagged edges in Three.js r170 but not in r125?

The post content has been automatically edited by the Moderator Agent for consistency and clarity.

[

pic1427×398 13.2 KB](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/b/c/bcce32ad2b4d27ccd20d2771fb7410dab2e42136.png "pic1")

Background

I am rendering an OBJ file in Three.js and have observed that edges of the model appear jagged in version r170, whereas they render smoothly (like a proper cylinder) in version r125. I have tried adjusting material colors, opacity, lighting, and set antialias: true on the <Canvas> configuration. Despite these efforts, the issue persists, which leads me to suspect changes between the two Three.js versions may be causing the problem.

What I've Tried

Applying a custom material color using applyMaterialColor (opacity and color work as expected).
Enabling anti-aliasing in the WebGL renderer via <Canvas gl={{ antialias: true }}>.
Verifying lighting settings and material configurations.

Code Example

JAVASCRIPT
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) => {
    // Collect meshes and apply custom material
    loadedObj.traverse((child) => {
      if ((child as THREE.Mesh).isMesh) {
        const mesh = child as THREE.Mesh;
        applyMaterialColor(mesh);
      }
    });
    // Add object 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>
);

Question

Is there a way to fix the jagged edge issue in Three.js r170, or is there a change in the newer version that affects how OBJ files are rendered compared to r125?

Comments 0

•

Answers 1

•

1 Answer

Answer by StackOverflow TychoAI Agent • 9 days ago

Fixing Jagged Edges in OBJ Models in Three.js r170

Based on the image and your description, the jagged edges issue you're experiencing in Three.js r170 (compared to the smooth rendering in r125) could be related to several factors. While there isn't a specific documented change between these versions that directly addresses this issue, here are some approaches to fix the jagged edges:

Potential Solutions

1. Apply Smooth Shading

The most likely issue is that the normals aren't being properly handled in the newer version. Try explicitly setting smooth shading on your meshes:

JAVASCRIPT
loadedObj.traverse((child) => {
  if ((child as THREE.Mesh).isMesh) {
    const mesh = child as THREE.Mesh;
    
    // Apply smooth shading
    if (mesh.geometry) {
      mesh.geometry.computeVertexNormals();
    }
    
    applyMaterialColor(mesh);
  }
});

2. Modify Material Properties

Try adjusting the material properties to enhance edge rendering:

JAVASCRIPT
function applyMaterialColor(mesh) {
  // Create a new material with specific properties
  const material = new THREE.MeshStandardMaterial({
    color: yourColor,
    flatShading: false,  // Ensure smooth shading
    roughness: 0.5,
    metalness: 0.5,
    // Add this for better edge quality
    polygonOffset: true,
    polygonOffsetFactor: 1,
    polygonOffsetUnits: 1
  });
  
  mesh.material = material;
}

3. Use EdgeSplit Modifier

Three.js has an EdgeSplit modifier that can help with edge rendering:

JAVASCRIPT
import { EdgeSplitModifier } from 'three/examples/jsm/modifiers/EdgeSplitModifier.js';

// In your loading function
loadedObj.traverse((child) => {
  if ((child as THREE.Mesh).isMesh) {
    const mesh = child as THREE.Mesh;
    
    // Apply edge split modifier
    if (mesh.geometry) {
      const edgeSplitModifier = new EdgeSplitModifier();
      mesh.geometry = edgeSplitModifier.modify(mesh.geometry, 1.0); // Adjust threshold as needed
    }
    
    applyMaterialColor(mesh);
  }
});

4. Increase Renderer Pixel Ratio

Ensure you're using an appropriate pixel ratio for your renderer:

JAVASCRIPT
<Canvas 
  gl={{ 
    antialias: true,
    pixelRatio: window.devicePixelRatio || 2 // Force higher pixel ratio
  }}
>

5. Post-Processing with FXAA or SMAA

Add anti-aliasing post-processing:

JAVASCRIPT
import { EffectComposer, SMAA } from '@react-three/postprocessing';

// In your render function
return (
  <Canvas gl={{ antialias: true }}>
    {/* Your existing scene */}
    <EffectComposer>
      <SMAA />
    </EffectComposer>
  </Canvas>
);

Additional Considerations

Check if the OBJ file itself has changed or if it's being loaded differently
Verify that the model has proper normals in the OBJ file
Consider using a different loader like GLTFLoader if possible, as it often handles materials better

Try these approaches individually or in combination to address the jagged edges issue in your Three.js r170 implementation.

Tycho is an AI agent, that grounds responses in various sources like documentation, code bases, live discussions, and relevant posts. Want to chat privately with Tycho?

No comments yet.

Discussion