Discrepancy Between Original 3D Jeans Model and Output in React.js Using Three.js

Kishan Suvagiya — Wed, 05 Feb 2025 09:49:29 +0000

I am facing an issue in development. I am implementing a 3D model of jeans in React.js using the Three.js library. In fact, the model is showing in the output, but there is a difference between the original designer model and the output. I am attaching the complete code with a screenshot for reference.

const canvasRef = useRef();
const containerRef = useRef();
const sceneRef = useRef(null);
const rendererRef = useRef(null);
const cameraRef = useRef(null);
const controlsRef = useRef(null);
const modelRef = useRef(null);

useEffect(() => {
if (!canvasRef.current || !containerRef.current) return;

// Scene setup
const scene = new THREE.Scene();
sceneRef.current = scene;

// Get container dimensions instead of window
const container = containerRef.current;
const containerWidth = container.clientWidth;
const containerHeight = container.clientHeight || window.innerHeight * 0.7; // Set a default height

// Camera setup
const camera = new THREE.PerspectiveCamera(
  35,
  containerWidth / containerHeight,
  1,
  1000
);
camera.position.set(5, 5, 5);
cameraRef.current = camera;
scene.add(camera);

// Renderer setup
const renderer = new THREE.WebGLRenderer({
  canvas: canvasRef.current,
  antialias: true,
});
renderer.setSize(containerWidth, containerHeight);
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
renderer.setClearColor(new THREE.Color("#ffffff"));
renderer.shadowMap.enabled = true; // Enable shadows
renderer.shadowMap.type = THREE.PCFSoftShadowMap;
rendererRef.current = renderer;

// Controls setup
const controls = new OrbitControls(camera, canvasRef.current);
controls.enableDamping = true;
controls.enablePan = false;
controls.enableZoom = true;
controls.update();
controlsRef.current = controls;

// Lighting setup
const ambientLight = new THREE.AmbientLight(0xffffff, 1); // Increased intensity
scene.add(ambientLight);

const directionalLight = new THREE.DirectionalLight(0xffffff, 0.5); // Adjusted intensity
directionalLight.position.set(0, 10, 10);
scene.add(directionalLight);


// Add fill light from the front
const fillLight = new THREE.PointLight(0xffffff, 0.5);
fillLight.position.set(0, 3, 3);
scene.add(fillLight);

const backLight = new THREE.DirectionalLight(0xffffff, 0.4);
backLight.position.set(0, -2, -5);
scene.add(backLight);

// Model loading
const loader = new GLTFLoader();
const textureLoader = new THREE.TextureLoader();

loader.load(
  jeansglb,
  (gltf) => {
    const model = gltf.scene;
    modelRef.current = model;
    model.scale.set(1, 1, 1);

    // Load and apply texture
    textureLoader.load(
      jeans,
      (texture) => {
        texture.minFilter = THREE.LinearFilter;
        texture.magFilter = THREE.LinearFilter;
        texture.anisotropy = renderer.capabilities.getMaxAnisotropy();
        texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
        texture.repeat.set(1, 1);

        model.traverse((child) => {
          if (child.isMesh && child.material instanceof THREE.MeshStandardMaterial) {
            child.material.map = texture;
            child.material.roughness = 0.85;
            child.material.metalness = 0.1;
            child.material.needsUpdate = true;
            child.material.side = THREE.DoubleSide;
          }
        });

        // Center the model
        const box = new THREE.Box3().setFromObject(model);
        const center = box.getCenter(new THREE.Vector3());
        model.position.sub(center);

        // Add model to scene
        scene.add(model);

        // Adjust camera to frame model
        const boundingBox = new THREE.Box3().setFromObject(model);
        const boundingBoxCenter = boundingBox.getCenter(new THREE.Vector3());
        const boundingBoxSize = boundingBox.getSize(new THREE.Vector3());
        const maxDimension = Math.max(
          boundingBoxSize.x,
          boundingBoxSize.y,
          boundingBoxSize.z
        );

        camera.position.copy(boundingBoxCenter);
        camera.position.z += maxDimension * 2;
        controls.target.copy(boundingBoxCenter);
        controls.update();
      },
      undefined,
      (error) => console.error("Error loading texture:", error)
    );
  },
  (xhr) => console.log((xhr.loaded / xhr.total) * 100 + "% loaded"),
  (error) => console.error("Error loading 3D model:", error)
);

// Window resize handler
const handleResize = () => {
  const newWidth = container.clientWidth;
  const newHeight = container.clientHeight || window.innerHeight * 0.7;

  if (cameraRef.current && rendererRef.current) {
    cameraRef.current.aspect = newWidth / newHeight;
    cameraRef.current.updateProjectionMatrix();
    rendererRef.current.setSize(newWidth, newHeight);
  }
};

window.addEventListener("resize", handleResize);

// Animation loop
let animationFrameId;
const animate = () => {
  animationFrameId = requestAnimationFrame(animate);

  if (controlsRef.current) {
    controlsRef.current.update();
  }

  if (rendererRef.current && sceneRef.current && cameraRef.current) {
    rendererRef.current.render(sceneRef.current, cameraRef.current);
  }
};
animate();

// Cleanup
return () => {
  window.removeEventListener("resize", handleResize);
  if (animationFrameId) {
    cancelAnimationFrame(animationFrameId);
  }
  if (rendererRef.current) {
    rendererRef.current.dispose();
  }
  if (modelRef.current) {
    modelRef.current.traverse((child) => {
      if (child.isMesh) {
        child.geometry.dispose();
        if (child.material.map) child.material.map.dispose();
        child.material.dispose();
      }
    });
  }
};

}, []);

I used the Three.js library to implement a 3D model of jeans in my React.js project. The model successfully renders in the output, but there are noticeable differences between the original designer model and the rendered output.

I have tried the following:

Adjusting the camera settings (e.g., position, field of view).
Modifying the light settings (e.g., intensity, type, and position of lights).
Ensuring the model file is correctly exported and imported (e.g., verifying .glb or .obj formats and textures).
Checking for material or texture mismatches in the Three.js code.
Despite these efforts, the rendered model does not match the original. I was expecting the rendered 3D model to look identical to the designer's version in terms of proportions, materials, and textures.

DEV Community: Kishan Suvagiya

Discrepancy Between Original 3D Jeans Model and Output in React.js Using Three.js