threejs效果tips
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;
};