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纹理。