THREE.js - Cloned and rotated LOD objects - wrong shading

200 views Asked by At

I have a txt. file exported from 3ds Max with name of objects, position, rotation and scale. Secondly I have a javascript initial list of this objects with paths on extern obj. and mtl. files. From initial list I create a LOD objects that are cloned across my scene according to txt file. But I have a problem with shading/lighting of these cloned object that are rotated in the scene.

Please do you know what needs updating after I place the objects in scene?

Two clones of same LOD object with different shading

Here is a link on my project

Piece of txt files with positioning of objects (name-of-LOD+number;positionXYZ;rotation;scale):

tree_small013;17.5686;0.15;34.1358;-0.0001;180.0;0.0;1.0;1.0;1.0
tree_small014;17.5686;0.15;44.5792;-0.0001;180.0;0.0;1.0;1.0;1.0
tree_small015;17.5686;0.15;13.1515;-0.0001;180.0;0.0;1.0;1.0;1.0
tree_small016;17.5686;0.15;65.6183;-0.0001;180.0;0.0;1.0;1.0;1.0
tree_small017;17.5686;0.15;55.1539;-0.0001;180.0;0.0;1.0;1.0;1.0
pavement_corner;20.0;0.0;73.5;0.0;0.0;0.0;1.0;1.0;1.0
pavement;20.0;0.0;70.0;0.0;0.0;0.0;1.0;1.0;1.0
pavement_tree;20.0;0.0;63.0;0.0;0.0;0.0;1.0;1.0;1.0
pavement001;20.0;0.0;66.5;0.0;0.0;0.0;1.0;1.0;1.0
pavement_tree001;20.0;0.0;52.5;0.0;0.0;0.0;1.0;1.0;1.0
pavement002;20.0;0.0;56.0;0.0;0.0;0.0;1.0;1.0;1.0
pavement003;20.0;0.0;59.5;0.0;0.0;0.0;1.0;1.0;1.0
pavement004;20.0;0.0;34.9999;0.0;0.0;0.0;1.0;1.0;1.0

Example of importList.js with initializing LOD objects:

// STATIC MODELS IMPORT LIST
var models = {
    tree_small: {
    levels: {
            0: {
                name:"high",
                obj:"models/tree_small_high.obj",
                mtl:"maps/mtl/tree_small_high.mtl",
                mesh:null,
                dist:10
            },
            1: {
                name:"mid",
                obj:"models/tree_small_mid.obj",
                mtl:"maps/mtl/tree_small_mid.mtl",
                mesh:null,
                dist:15
            },
            2: {
                name:"low",
                obj:"models/tree_small_low.obj",
                mtl:"maps/mtl/tree_small_low.mtl",
                mesh:null,
                dist:20
            }               
        },  
        lod: null,
        shadows: true
    },
    pavement_corner: {
    levels: {
            0: {
                name:"high",
                obj:"models/pavement_corner_high.obj",
                mtl:"maps/mtl/pavement_corner_high.mtl",
                mesh:null,
                dist:10
            }                   
        },  
        lod: null,
        shadows: true
    },
    pavement: {
    levels: {
            0: {
                name:"high",
                obj:"models/pavement_high.obj",
                mtl:"maps/mtl/pavement_high.mtl",
                mesh:null,
                dist:10
            }                   
        },  
        lod: null,
        shadows: false
    },

Function Obj() in models.js which take a clone of LOD object and set it in scene by a txt. file:

function Obj(objName, x,y,z, rx,ry,rz, sx,sy,sz, mass, friction, flag){

    var offset = 0;
    var pos = new THREE.Vector3();
    var quat = new THREE.Quaternion();

    this.obj = models[objName].lod.clone(false);
    this.obj.layers.set(objName);
    this.obj.name = objName;
    this.obj.position.set(x,y,z);
    this.obj.rotation.set(rx,ry,rz);
    this.obj.scale.set(sx,sy,sz);

    this.obj.matrixWorldNeedsUpdate = true;
    this.obj.matrixAutoUpdate = true;
    this.obj.updateMatrixWorld();
    this.obj.children[0].geometry.tangentsNeedUpdate = true;

    makeObj(this.obj, 0); // add to collision system 

    this.obj.levels[0].object.updateMatrix();
    this.obj.children[0].updateMatrix();

    this.obj.levels[0].object.updateMatrixWorld();
    this.obj.children[0].updateMatrixWorld();

    this.obj.levels[0].object.geometry.computeFaceNormals();
    this.obj.levels[0].object.geometry.computeVertexNormals();

    this.obj.children[0].geometry.computeFaceNormals();
    this.obj.children[0].geometry.computeVertexNormals();

    this.obj.updateMatrix();
    this.obj.updateMatrixWorld();

    scene.add(this.obj);

    return this.obj;        
}
0

There are 0 answers