我想扩展 threejs 编辑器,以便能够加载类似于此示例的 hdr 环境映射:http: //threejs.org/examples/#webgl_materials_envmaps_hdr
我在 app.js Start() 函数中成功加载了示例代码,不知何故,当在编辑器中执行完全相同的代码时,示例圆环呈现出亮白色,没有任何阴影。
加载环境地图时是否会自动执行任何操作?或者为什么它不能正常工作?
这是我正在使用的代码:
//renderer = new THREE.WebGLRenderer( { antialias: false } );
//renderer.setClearColor( new THREE.Color( 0xffffff ) );
standardMaterial = new THREE.MeshStandardMaterial( {
map: null,
bumpScale: - 0.05,
color: 0xffffff,
metalness: 0.0,
roughness: 1.0,
shading: THREE.SmoothShading
} );
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( "./textures/cube/pisaHDR/", ".hdr" );
new THREE.HDRCubeTextureLoader().load( THREE.UnsignedByteType, hdrUrls, function ( hdrCubeMap ) {
var pmremGenerator = new THREE.PMREMGenerator( hdrCubeMap );
pmremGenerator.update( renderer );
var pmremCubeUVPacker = new THREE.PMREMCubeUVPacker( pmremGenerator.cubeLods );
pmremCubeUVPacker.update( renderer );
hdrCubeRenderTarget = pmremCubeUVPacker.CubeUVRenderTarget;
standardMaterial.envMap = hdrCubeRenderTarget.texture;
standardMaterial.needsUpdate = true;
SetChildEnvMaps(editor.scene,hdrCubeRenderTarget.texture);
} );
//renderer.gammaInput = true;
//renderer.gammaOutput = true;
var geometry = new THREE.TorusKnotGeometry( 18, 8, 150, 20 );;
var torusMesh1 = new THREE.Mesh( geometry, standardMaterial );
torusMesh1.position.x = 0.0;
torusMesh1.castShadow = true;
torusMesh1.receiveShadow = true;
editor.scene.add( torusMesh1 );
var textureLoader = new THREE.TextureLoader();
textureLoader.load( "./textures/roughness_map.jpg", function( map ) {
map.wrapS = THREE.RepeatWrapping;
map.wrapT = THREE.RepeatWrapping;
map.anisotropy = 4;
map.repeat.set( 9, 2 );
standardMaterial.roughnessMap = map;
standardMaterial.bumpMap = map;
standardMaterial.needsUpdate = true;
} );