FBX模型效果

FBX模型效果


var manager = new THREE.LoadingManager();
manager.crossOrigin = '';
manager.onProgress = function(item, loaded, total) {
    console.log(item, loaded, total);
};

texture = new THREE.TextureLoader().load( "https://security-press.com/fbx/model/DigestiveSystem_2k.png",function(tx){
    tx.anisotropy = 0;
    tx.magFilter = THREE.NearestFilter;
    tx.minFilter = THREE.LinearFilter;
} );

//var material = new THREE.MeshBasicMaterial();
//material.transparent =true
var material = new THREE.MeshStandardMaterial({ map: texture, roughness: 0.25, metalness:0.9,fog:true,});
//var material=new THREE.MeshLambertMaterial({ map: texture});

var loader = new THREE.FBXLoader(manager);
loader.crossOrigin = '';
loader.load('https://security-press.com/fbx/model/FBXHighPoly.fbx', function(object) {
//	object.materials[0].shading = THREE.SmoothShading;
//		object.computeVertexNormals();

//重点!!!!!!!!!!!!!!!!!!!!traverse是three模型对象得一个方法,可以遍历属性
	object.traverse(function(child) {
      if (child instanceof THREE.Mesh) {
		  child.material = material;
//        child.material.map = texture;
      }
    });


	object1 = object;
	object.mixer = new THREE.AnimationMixer( object );
    mixers.push( object.mixer );

	var box3 = new THREE.Box3().setFromObject(object);
	var shift = box3.getCenter();
    var action = object.mixer.clipAction( object.animations[ 0 ] );
    action.play();
	object.position.sub(shift);
	console.log(box3.getSize());
	var vFOV = camera.fov * Math.PI / 180;        // convert vertical fov to radians
	var dist = box3.getSize().y / ( 2 * Math.tan( camera.fov * Math.PI / 360 ) );
	var vheight = 2 * Math.tan( vFOV / 2 ) * dist; // visible height
	camera.position.set( 0, 0, dist );
	scene.add(object);

	generateMarker();

  }, onProgress, onError);

//

light = new THREE.HemisphereLight(0xc7cbff, 0x4c3333, 1.0);
  light.position.set(0, 50, 50);
//  light.position.set(1, 1, 1);
  scene.add(light);
  //light = new THREE.DirectionalLight(0xffffff, 0.7);
//  light.position.set(0, 0, 0);
// scene.add(light);

	directionalLight = new THREE.DirectionalLight(0xffffff, 1.0);
  directionalLight.position.setScalar(10);
  scene.add(directionalLight);

beforcompile shader 一段扭曲模型的shader


var material = new THREE.MeshNormalMaterial();

material.onBeforeCompile = function ( shader ) {

    // console.log( shader )

    shader.uniforms.time = { value: 0 };

    shader.vertexShader = 'uniform float time;\n' + shader.vertexShader;
    shader.vertexShader = shader.vertexShader.replace(
        '#include <begin_vertex>',
        [
            'float theta = sin( time + position.y ) / 2.0;',
            'float c = cos( theta );',
            'float s = sin( theta );',
            'mat3 m = mat3( c, 0, s, 0, 1, 0, -s, 0, c );',
            'vec3 transformed = vec3( position ) * m;',
            'vNormal = vNormal * m;'
        ].join( '\n' )
    );

    materialShader = shader;

};