基于图像的fbx和draco-gltf文件上的三个js照明

时间:2019-12-03 06:21:58

标签: three.js render fbx gltf

我想在单个代码中更改路径和加载程序来呈现不同格式的模型。想要渲染质量更好的模型,类似于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);

0 个答案:

没有答案