Striped shadows on OBJ/MTL model

Questions
, ,
1

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

1
1396×708 209 KB

But after I managed to upload the model on my localhost, the can looks like this:
2
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.appendChild(renderer.domElement);
  canvas_section.insertBefore(renderer.domElement, canvas_section.children[0]);
  renderer.domElement.classList.add('canvas');

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

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

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

    materials.preload();

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

      const directionalLight = new THREE.DirectionalLight(0xFFFFFF, .8);
      scene.add(directionalLight);
      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:

2

Into blender or 3dsmax apply smoothing.

3

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

4

@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.

5

Smoothing without adding new vertexes.

image
image1028×327 41.4 KB

6

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:

thumbnail001
thumbnail0011920×1920 248 KB

This is how it looks in Blender:
a
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;
   }
})

b

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.

7

For drops maybe need transmission or refraction
https://threejs.org/examples/?q=tra#webgl_loader_gltf_transmission

https://threejs.org/examples/?q=refrac#webgl_materials_cubemap_refraction

and environment map for can
https://threejs.org/examples/?q=gltf#webgl_loader_gltf