0

I use this example to add Sphere at the scene I set only EnvMap to the Sphere and remove all other maps (Map, NormalMap, Rougness, Metalness). And I see anisotropy problem. All mesh with rectangles.

I tried to set anisotropy for envMap. But now I see some white bad pixels.

My questions is: -"How can I set anisotropy for HDR envMap"?

var container, stats, loader;

var camera, scene, renderer;

var controls;

var mesh;

var spotLight;

init();
animate();

function init() {
    container = document.createElement( 'div' );
 document.body.appendChild( container );

 //
 camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 0.01, 1000 );
 camera.position.z = 2;

 controls = new THREE.TrackballControls( camera );

 //
 renderer = new THREE.WebGLRenderer( { antialias: true } );
 renderer.setClearColor( 0x202020 );
 renderer.setPixelRatio( window.devicePixelRatio );
 renderer.setSize( window.innerWidth, window.innerHeight );
 container.appendChild( renderer.domElement );

 renderer.gammaInput = true;
 renderer.gammaOutput = true;
 renderer.toneMapping = THREE.ReinhardToneMapping;
 renderer.toneMappingExposure = 3;

 var textureCube = new THREE.CubeTextureLoader()
  .setPath( 'textures/cube/pisa/' )
  .load( [ 'px.png', 'nx.png', 'py.png', 'ny.png', 'pz.png', 'nz.png' ] );

 scene = new THREE.Scene();
 scene.background = textureCube;

 // LIGHTS
 scene.add( new THREE.HemisphereLight( 0x443333, 0x222233, 4 ) );

 //     
 var material = new THREE.MeshStandardMaterial();
    
 material.roughness = 1;
 material.metalness = 1;
 

 var genCubeUrls = function( prefix, postfix ) {
  return [
   prefix + 'px' + postfix, prefix + 'nx' + postfix,
   prefix + 'py' + postfix, prefix + 'ny' + postfix,
   prefix + 'pz' + postfix, prefix + 'nz' + postfix
  ];
 };

 var hdrUrls = genCubeUrls( 'https://rawgit.com/mrdoob/three.js/r83/examples/textures/cube/pisaHDR/', '.hdr' );
 new THREE.HDRCubeTextureLoader().load( THREE.UnsignedByteType, hdrUrls, function ( hdrCubeMap ) {

  hdrCubeMap.anisotropy = 2;

  var pmremGenerator = new THREE.PMREMGenerator( hdrCubeMap );
  pmremGenerator.update( renderer );

  var pmremCubeUVPacker = new THREE.PMREMCubeUVPacker( pmremGenerator.cubeLods );
  pmremCubeUVPacker.update( renderer );

  hdrCubeRenderTarget = pmremCubeUVPacker.CubeUVRenderTarget;

  material.envMap = hdrCubeRenderTarget.texture;
  material.needsUpdate = true;

  var geometry = new THREE.SphereGeometry( 5, 32, 32 );
  var sphere = new THREE.Mesh( geometry, material );

  scene.add( sphere );
  sphere.position.z = -5;

  console.log( material.envMap );
 } );

 //
 window.addEventListener( 'resize', onWindowResize, false );
}

//
function onWindowResize( event ) {

 SCREEN_WIDTH = window.innerWidth;
 SCREEN_HEIGHT = window.innerHeight;

 renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );

 camera.aspect = SCREEN_WIDTH / SCREEN_HEIGHT;
 camera.updateProjectionMatrix();
}

//
function animate() {
 requestAnimationFrame( animate );

 controls.update();

 renderer.render( scene, camera );
}
body {
 background:#000;
 color:#fff;
 padding:0;
 margin:0;
 font-weight: bold;
 overflow:hidden;
}

a { color: #ffffff; }

#info {
 position: absolute;
 top: 0px; width: 100%;
 color: #ffffff;
 padding: 5px;
 font-family:Monospace;
 font-size:13px;
 text-align:center;
 z-index:1000;
}

#oldie {
 background:rgb(200,100,0) !important;
 color:#fff;
}

#vt { display:none }
#vt, #vt a { color:orange; }
<script src="https://rawgit.com/mrdoob/three.js/r83/build/three.min.js" type=" text/javascript"></script>
<script src="https://cdn.rawgit.com/mrdoob/stats.js/r17/build/stats.min.js" type=" text/javascript"></script>
<script src="https://rawgit.com/mrdoob/three.js/r83/examples/js/controls/TrackballControls.js" type=" text/javascript"></script> 
<script src="https://rawgit.com/mrdoob/three.js/r83/examples/js/loaders/RGBELoader.js" type=" text/javascript"></script>
<script src="https://rawgit.com/mrdoob/three.js/r83/examples/js/loaders/HDRCubeTextureLoader.js" type=" text/javascript"></script>

<script src="https://rawgit.com/mrdoob/three.js/r83/examples/js/pmrem/PMREMGenerator.js"
 type=" text/javascript"></script>
<script src="https://rawgit.com/mrdoob/three.js/r83/examples/js/pmrem/PMREMCubeUVPacker.js" type=" text/javascript"></script>

UPDATED

To fix this i set four empty 32x32 images to Map, NormalMap, RougnessMap and MetalnessMap textures.

Alexander
  • 11
  • 3
  • Welcome to SO. Please show the relevant parts of your code in your post. You should be setting `mesh.material.map.anisotropy = value`. – WestLangley May 22 '17 at 07:39
  • [Code is here](http://78.46.244.10:1603/hdr/examples/webgl_materials_standard.html) I do not set any maps except envMap, and it is has mesh.material.envMap.anisotropy = 2 [like at this screenshot](http://prntscr.com/faqwhm) – Alexander May 22 '17 at 13:32
  • As WestLangley said, **Please show the relevant parts of your code _in your post_**. If your link stops working (even now, it's unreachable), then we lose all context to your question. – TheJim01 May 22 '17 at 13:40
  • Full code added. – Alexander May 23 '17 at 06:57

0 Answers0