我想在单个代码中更改路径和加载程序来呈现不同格式的模型。想要渲染质量更好的模型,类似于Sketchfab。在相同的照明效果下,我渲染的不同模型看起来非常呆板。那么基于图像的照明是否可以在fbx n draco-gltf模型上工作?如何解决这个问题?这就是我试图不再工作的地方...
this.scene.background = new THREE.Color(config.backgroundColor);
//add light
const ambientLight = new THREE.AmbientLight(0x404040, 2);
this.scene.add(ambientLight);
const lightProbe = new THREE.LightProbe();
this.scene.add(lightProbe);
const directionalLight1 = new THREE.DirectionalLight(0x404040, 2);
directionalLight1.position.set(10, 10, 10);
this.scene.add(directionalLight1);
const directionalLight2 = new THREE.DirectionalLight(0x404040, 2);
directionalLight2.position.set(0, -10, 0);
this.scene.add(directionalLight2);
const directionalLight3 = new THREE.DirectionalLight(0x404040, 2);
directionalLight3.position.set(0, 0, 0);
this.scene.add(directionalLight3);
// load model
var pmremGenerator = new PMREMGenerator( this.scene.background );
pmremGenerator.update( this.renderer );
var pmremCubeUVPacker = new PMREMCubeUVPacker( pmremGenerator.cubeLods );
pmremCubeUVPacker.update( this.renderer );
var envMap = pmremCubeUVPacker.CubeUVRenderTarget.texture;
var fbx= new FBXLoader();
fbx.load( 'model.fbx', ( object )=> {
object.traverse( function ( child ) {
if ( child.isMesh ) {
child.material.envMap = envMap;
}
} );
var box = new THREE.Box3();
box.setFromObject(object);
var size = new THREE.Vector3();
box.getSize(size);
var center = new THREE.Vector3();
box.getCenter(center);
var scaleTemp = new THREE.Vector3().copy(this.scaleV3).divide(size);
var scale = Math.min(scaleTemp.x, Math.min(scaleTemp.y, scaleTemp.z));
object.scale.setScalar(scale);
object.position.sub(center.multiplyScalar(scale));
this.scene.add( object );
this.group.add(object);
});
pmremGenerator.dispose();
pmremCubeUVPacker.dispose();
this.renderer.setSize( this.width, this.height );
this.renderer.render( this.scene, this.camera );
this.renderer.gammaOutput = true;
this.renderer.gammaInput = true;
this.mount.appendChild( this.renderer.domElement );
this.controls = new OrbitControls(this.camera, this.mount);
window.addEventListener('click', this.onMouseClick, false);
window.requestAnimationFrame(this.animate);