Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

218
Vistas
Why model renders with a blade color with Three.js?

enter image description here

Hi, I imported my model (obj + mtl + texture) but it renders with a blade color.

Normally it should be like this :

enter image description here

Currently the code of the scene configuration is:

loadModel()

    scene.current.background = new THREE.Color( 'transparent' );

    scene.current.add(new THREE.AxesHelper( 5 ));

    const mesh = new THREE.Mesh( new THREE.PlaneGeometry( 100, 100 ), new THREE.MeshPhongMaterial( { color: 0xffffff, depthWrite: false } ) );
    mesh.rotation.x = - Math.PI / 2;
    mesh.receiveShadow = true;
    scene.current.add( mesh );

    controls.current.enableDamping = true; // an animation loop is required when either damping or auto-rotation are enabled
    controls.current.dampingFactor = 0.2;
    controls.current.screenSpacePanning = false;
    controls.current.maxPolarAngle = Math.PI / 2;
    controls.current.maxDistance = 200
    controls.current.minDistance = 20
    controls.current.target = new THREE.Vector3(0, 16, 0)

    camera.current.position.set( -3, 17, 8 );
    camera.current.lookAt(new THREE.Vector3( 0, 15, 0 ));
    controls.current.update();

    scene.current.background = new THREE.Color( 0xFFFFFF );

    const ambilentLight = new THREE.AmbientLight( 0xffffff, 0.5)
    scene.current.add(ambilentLight)

    const hemiLight = new THREE.HemisphereLight( 0xffffff, 0xffffff );
    hemiLight.position.set( 0, 500, 30 );
    hemiLight.castShadow = true
    scene.current.add( hemiLight );

    scene.current.add(new THREE.HemisphereLightHelper( hemiLight, 5 ));

    const dirLight = new THREE.DirectionalLight( 0xffffff, 0.5 );
    dirLight.position.set( -10, 50, 50   );
    dirLight.castShadow = true;
    scene.current.add( dirLight );

    scene.current.add(new THREE.DirectionalLightHelper( dirLight, 5 ));

    renderer.current.shadowMap.enabled = true;
    renderer.current.setPixelRatio( window.devicePixelRatio );
    renderer.current.setSize( window.innerWidth, window.innerHeight );
    renderer.current.outputEncoding = THREE.sRGBEncoding;
    renderer.current.toneMapping = THREE.ACESFilmicToneMapping;
    renderer.current.toneMappingExposure = 1;
    renderer.current.physicallyCorrectLights = true;
    container.current.appendChild(renderer.current.domElement);

    window.addEventListener( 'resize', onWindowResize );

    animate();

I dont know if it's a problem of lighting or another thing. Anybody know this problem ?

about 4 years ago · Juan Pablo Isaza
1 Respuestas
Responde la pregunta

0

If you are working with OBJ/MTL and set WebGLRenderer.outputEncoding to THREE.sRGBEncoding;, I suspect the issue is caused by an incomplete color space configuration. You can solve this in two way:

  1. Do no touch outputEncoding.
  2. Set the encoding property of all color textures to THREE.sRGBEncoding;.

Since OBJLoader returns an instance of THREE.Group, you can update the textures like so:

group.traverse( function( object ) {

    if ( object.isMesh === true && object.material.map !== null ) {

        object.material.map.encoding = THREE.sRGBEncoding;

    }

} );

BTW: You normally use tone mapping only if you apply HDR textures to your scene.

about 4 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda