如何在MeshStandardMaterial中使用各向异性?

时间:2017-05-22 07:05:53

标签: three.js hdr

I use this example to add Sphere at the scene我只将EnvMap设置到Sphere并删除所有其他地图(Map,NormalMap,Rougness,Metalness)。我看到各向异性问题。全部用矩形网格化。

我尝试为envMap设置各向异性。但现在我看到一些白色坏像素。

我的问题是: - “如何为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>

已更新

为了解决这个问题,我将四个空的32x32图像设置为Map,NormalMap,RougnessMap和MetalnessMap纹理。

0 个答案:

没有答案