从Maya中把模型搬运至网页3D展示的过程

var camera,scene,renderer

scene = new THREE.Scene();

camera = new THREE.PerspectiveCamera(40, 750 / 1200, 0.1, 10000);

renderer = new THREE.WebGLRenderer({antialias: true, alpha: false, preserveDrawingBuffer: true});

renderer.shadowMap.enabled = true;

renderer.autoClear = true;

var render = function () {

	renderer.render(scene, camera);

} 
var animate = function () {

	requestAnimationFrame(_that.animate);
    
    render();

}

//一个简单的场景就写好了

var createSkinningAnimate = function (model) {

    var blendMesh = new THREE.BlendCharacter();

    blendMesh.modelId = model.id;

    blendMesh.load( model.modelSrc, function(){

         blendMesh.name = model.modelName;

         blendMesh.scale.set(model.scaleX, model.scaleY, model.scaleZ);

         blendMesh.position.set(model.x, model.y, model.z);

         blendMesh.frustumCulled = false;

         blendMesh.material.transparent =  true;
        //
         blendMesh.material.opacity = 0;

        if(model.shadow) {

            blendMesh.castShadow = true;  //表示这个物体是可以产生阴影的

        }

        if(model.receive) {

            blendMesh.receiveShadow = true;  //表示这个物体是可以接受（显示）阴影的

        }


        if(model.side) {

            blendMesh.material.side = THREE.DoubleSide;  //解决单双面显示问题

        }

        blendMesh.visible = false;

        for(var i = 0, len = model.action.length; i < len; i++) {

            blendMesh.applyWeight( model.action[i].name, model.action[i].weight);
        };

        blendModelGroup.add(blendMesh);

        loadModelProgress();

    });

}

//设置material的side

blendMesh.material.side = THREE.DoubleSide;  //解决单双面显示问题

//设置这个属性为false时这个bug就好了。

blendMesh.frustumCulled = false;

_that.ambientLight = new THREE.AmbientLight( 0xffffff);

scene.add(_that.ambientLight);

var spotLight = new THREE.SpotLight(0xffffff);

_that.spotLight = spotLight;

spotLight.angle = 0.74;
spotLight.position.set(0, 60, -1);
spotLight.castShadow = true;
spotLight.penumbra = 0.7;
spotLight.intensity = 2;
spotLight.distance = 200;
spotLight.shadow.camera.near = 50;
spotLight.shadow.camera.far = 200;
spotLight.shadow.camera.fov = 35;
spotLight.shadow.mapSize.height = 1024;
spotLight.shadow.mapSize.width = 1024;

spotLight.name = 'spotLight';

scene.add(spotLight);

spotLight.target.position.set(-15,0,0);

//scene.add(new THREE.SpotLightHelper( spotLight ));

scene.add(spotLight.target);

var testW = 750,
    testH = 1200;

var views = {
    left: 0.5,
    bottom: 0,
    width: 0.5,
    height: 0.5,
    eye: [0, 0, 50],
    direction: [-1, 0, 0]
};

var orthoCam = new THREE.OrthographicCamera(testW / -2, testW / 2, testH / 2, testH / -2, -500, 10000);
view.orthoCam = orthoCam;

update () {
	var left   = Math.floor( testW  * 0.0 );
	var bottom = Math.floor( testH * 0 );
	var width  = Math.floor( testW  * 1.0 );
	var height = Math.floor( testH * 1.0 );
	
	renderer.setViewport( left, bottom, width, height );
	renderer.setScissor( left, bottom, width, height );
	renderer.setScissorTest ( true );
	
	camera.updateProjectionMatrix();
	
	cameraHelper.update();
	cameraHelper.visible = false;
	
	renderer.render(scene, camera);
	cameraHelper.visible = true;
	
	var view = views;
	orthoCam = view.orthoCam;
	orthoCam.left = testW / - 2;
	orthoCam.right = testW / 2;
	orthoCam.top = testH / 2;
	orthoCam.bottom = testH / - 2;
	orthoCam.position.x = view.eye[ 0 ];
	orthoCam.position.y = view.eye[ 1 ];
	orthoCam.position.z = view.eye[ 2 ];
	orthoCam.rotation.x = view.direction[ 0 ] * Math.PI * 0.5;
	orthoCam.rotation.y = view.direction[ 1 ] * Math.PI * 0.5;
	orthoCam.rotation.z = view.direction[ 2 ] * Math.PI * 0.5;
	orthoCam.updateProjectionMatrix();
	
	var left1   = Math.floor( testW  * view.left );
	var bottom1 = Math.floor( testH * view.bottom );
	var width1  = Math.floor( testW  * view.width );
	var height1 = Math.floor( testH * view.height );
	renderer.setViewport( left1, bottom1, width1, height1 );
	renderer.setScissor( left1, bottom1, width1, height1 );
	renderer.setScissorTest ( true );
	renderer.shadowMap.enabled = true;
	renderer.render( scene, orthoCam );
}

var canvas = document.createElement("canvas");
var gl =  canvas.getContext('webgl') || canvas.getContext('experimental-webgl');
if( gl ){

  var OES_TextureExtension = gl.getExtension('OES_texture_half_float');

  var EXT_TextureExtension = gl.getExtension( 'EXT_texture_filter_anisotropic' );
}

if(gl && OES_TextureExtension && EXT_TextureExtension&& !(isIos && version < 9)) {

	//..3d code

}else {

	//..2d code

};