Striped shadows on OBJ/MTL model

Hello. We bought this model for our webpage project. On the product page linked above it looks like this:

But after I managed to upload the model on my localhost, the can looks like this:
Overall quality is literally worse than the preview. Water droplets seem glitched and there are some striped shadow on the can, instead of smooth effect.

This is my js:

  import * as THREE from 'three';
  import { OBJLoader } from 'three/addons/loaders/OBJLoader.js';
  import { MTLLoader } from 'three/addons/loaders/MTLLoader.js';

  const renderer = new THREE.WebGLRenderer({ alpha: true });
  const canvas_section = document.querySelector('.canvas-section');
  renderer.setSize(window.innerWidth, window.innerHeight);
  canvas_section.insertBefore(renderer.domElement, canvas_section.children[0]);

  const scene = new THREE.Scene();
  const camera = new THREE.PerspectiveCamera(
    window.innerWidth / window.innerHeight,

  camera.position.set(0, 3, 25);

  const mtlLoader = new MTLLoader();
  mtlLoader.load('./models/CAN____473ml___STANDARD__3D_MODEL.mtl', function (materials) {


    const objLoader = new OBJLoader();
    objLoader.load('./models/CAN____473ml___STANDARD__3D_MODEL_OBJ.obj', function (object) {
      object.position.set(0, -1.4, 18);

      const directionalLight = new THREE.DirectionalLight(0xFFFFFF, .8);
      directionalLight.position.set(-240, 240, 240);

      renderer.render(scene, camera);

I was trying to play with lights and shadows, but I guess the problem lies somewhere else. Could you guys tell me if it’s my mistake somewhere or just this model’s .obj/.mtl versions have low quality? It’s my first time with Three.js. :slight_smile:

Into blender or 3dsmax apply smoothing.

I’m sorry, but I don’t understand your answer.

@Chaser_Code say that you should use a program like Blender vor 3dsmax and the tools inside to apply smoothing.

But i think this a bad workaround. The designer do have a better quality of this modell. I think you habe download a preview or the Designer had uploaded the wrong quality. I would ask him for a better export.

Smoothing without adding new vertexes.

Hey guys. Thanks to your advices I managed to smooth the shades in Blender. It’s also my first time using Blender, I’m a Frontend Dev. I also managed to apply a texture to the can. But the effect is far from website preview. This is the preview:

This is how it looks in Blender:
And this is how it looks in my browser after I added the can with Three.js, with the code from first post + this traverse function to add a texture:

const texture = new THREE.TextureLoader().load( 'DIFUSE___473 ml____RED BULL TYPE.jpg' );
const material = new THREE.MeshStandardMaterial( { map: texture } );
object.traverse( function( child ) {
   if ( child instanceof THREE.Mesh ) {
      child.material = material;


Droplets are still glitched and overall quality is bad. Do you guys have any ideas what I’m doing wrong? What can I do to achieve the effect from preview? Can I do anything in Blender, or maybe use other file type? I also have some .max, .fbx and .psd files, apart from .obj and .mtl. If you guys can’t spot any mistake or find any workaround, I think I’ll follow Fleixi’s advice and ask the designer about better quality model.

For drops maybe need transmission or refraction

and environment map for can