The 3D object on my web site doesnt look as good as it should be

49 Views Asked by At

I got a 3d shape object in ".glb" on internet and wanted to add it to my website BUT the 3D object doesnt look as beautiful as it should be on the web site.

On the original web site : https://sketchfab.com/3d-models/just-an-eye-ac6d700dba9247f79f8bedc4410a9e11

On my web site : The eye on my eb site As u can see on both situation it seems tha many details are missing on the shape of my web site like the little glowy zone on the eye's iris.

I thought tha maybe the problem was because i had no HDR on the scene but after so tries it seems that its not this (i'm not sure of ainything i'm saying in this storie just was i think today maybe i'm wrong)

I added light on the scene but this litthe blow on the eye is still missing. here is the code where i intergrate the 3D shape on my web site :

var loader = new THREE.GLTFLoader();
loader.load("../EYE/just_an_eye.glb", function (gltf) {
  var model = gltf.scene;
  model.position.set(0, 0, 0); // Position du modèle au centre
  scene.add(model);

  // Jouez l'animation
  mixer = new THREE.AnimationMixer(gltf.scene);

  const animation = gltf.animations[0];
  const action = mixer.clipAction(animation);
  action.play();

  render();
});

// some lights : 
var directionalLight = new THREE.DirectionalLight(0xffeeb1, 1);
directionalLight.intensity = 1;
directionalLight.position.set(0, 0, 1); // Position de la lumière directionnelle
scene.add(directionalLight);
// Création de la lumière directionnelle 2
var directionalLight2 = new THREE.DirectionalLight(0xffffff, 1);
directionalLight2.intensity = 0.5;
directionalLight2.position.set(40, 0, -2); // Position de la lumière directionnelle
scene.add(directionalLight2);
// Création de la lumière directionnelle 3
var directionalLight3 = new THREE.DirectionalLight(0xffeeb1, 1);
directionalLight3.intensity = 0.5;
directionalLight3.position.set(-40, 0, -2); // Position de la lumière directionnelle
scene.add(directionalLight3);
// Création de la lumière directionnelle 4
var directionalLight4 = new THREE.DirectionalLight(0xffffff, 1);
directionalLight4.intensity = 0.5;
directionalLight4.position.set(-2, -2, 0.5); // Position de la lumière directionnelle
scene.add(directionalLight4);

//The HDR testing 

// Chargement de l'environnement HDR
var textureLoader = new THREE.TextureLoader();
var hdrTexture = textureLoader.load("../fond.hdr", function () {
  hdrTexture.mapping = THREE.EquirectangularReflectionMapping;
  scene.background = hdrTexture;

  var pmremGenerator = new THREE.PMREMGenerator(renderer);
  pmremGenerator.compileEquirectangularShader();
  var envMap = pmremGenerator.fromEquirectangular(hdrTexture).texture;

  // Parcourir les objets du modèle GLB pour leur appliquer l'environnement HDR
  model.traverse(function (child) {
    if (child.isMesh) {
      child.material.envMap = envMap;
      child.material.envMapIntensity = 1; // Réglez l'intensité des reflets
    }
  });
});



0

There are 0 best solutions below