0
208
Views¿Por qué el modelo se renderiza con un color de hoja con Three.js?
Hola, importé mi modelo (obj + mtl + textura) pero se renderiza con un color de hoja.
Normalmente debería ser así:
Actualmente el código de configuración de la escena es:
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();No sé si es un problema de iluminación u otra cosa. ¿Alguien conoce este problema?
·
Juan Pablo Isaza
1 answers
Answer question0
Si está trabajando con OBJ/MTL y establece WebGLRenderer.outputEncoding en THREE.sRGBEncoding; , sospecho que el problema se debe a una configuración incompleta del espacio de color. Puedes resolver esto de dos maneras:
- No toque la
outputEncoding. - Establezca la propiedad de
encodingde todas las texturas de color enTHREE.sRGBEncoding;.
Dado que OBJLoader devuelve una instancia de THREE.Group , puede actualizar las texturas de la siguiente manera:
group.traverse( function( object ) { if ( object.isMesh === true && object.material.map !== null ) { object.material.map.encoding = THREE.sRGBEncoding; } } );Por cierto: normalmente usa el mapeo de tonos solo si aplica texturas HDR a su escena.
·
Juan Pablo Isaza
Report
Answer question