利用three.js在网页嵌入dae类型的3d模型

/* 模型样式 */
#glFullscreen {width: 100%;height: 66%;min-width: 640px;min-height: 360px;position: relative;overflow: hidden;z-index: 0;}
#glFullscreen canvas {width: 100%;height: 100%;top: 0;left: 0;background-color: #000000; }
/* 模型控制按钮样式 */
#button{z-index: 100;position: absolute;bottom: 33%;right: 5px;cursor: pointer;}
#button  .button {background: #1b4f63;width: 50px;border-radius: 3px;margin: 5px;float: left;}
#button  .button p{font-family: 'Roboto'; text-align: center;text-transform: uppercase;font-size: 14px;color: #FFF;user-select: none;line-height: 16px;padding: 5px 0;margin: 0;}
#button  .button p:hover{cursor: pointer;}
#button  .button p:after{content: "";display: block;width: 100%;border-radius: 50%;background-color: darken(#f1c40f, 20%);opacity: 0.4;}

//获取dom对象
function getDom(){
    container = document.getElementById('glFullscreen');
 }

//模型加载
function initLoader(){
    var loader = new THREE.ColladaLoader();
    loader.load('model/demo.DAE', function(collada){
        dae = collada.scene;
        dae.traverse(function(child){
            if (child instanceof THREE.Mesh) {
                child.material.flatShading = true;
            }
         });
         //设置模型的位置
         dae.position.x = 4.1;
         dae.position.y = 8;
         dae.position.z = 1.8;
         //调整模型的大小
         dae.scale.x = dae.scale.y = dae.scale.z = 0.05;
         dae.updateMatrix();
         kinematics = collada.kinematics;
         scene.add(dae);
         setupTween();
    }); 
}

//创建相机
function createCamera(posX, posY, posZ){
   camera = new THREE.PerspectiveCamera( 45, 1, 0.1, 10000 );
   camera.position.copy(new THREE.Vector3( 20, 10, 30 ));
   camera.lookAt( new THREE.Vector3( 0, 5, 0) );
   //camera.position.set( posX, posY, posZ );
}

//轨迹控制 鼠标按下左右移动， 滚轮远近
function initControl(){
    controls = new THREE.OrbitControls( camera, renderer.domElement );
    // 如果使用animate方法时，将此函数删除
    //controls.addEventListener( 'change', render );
    // 使动画循环使用时阻尼或自转 意思是否有惯性
    controls.enableDamping = true;
    //动态阻尼系数 就是鼠标拖拽旋转灵敏度
    //controls.dampingFactor = 0.25;
    //是否可以缩放
    controls.enableZoom = true;
    //是否自动旋转
    controls.autoRotate = true;
    controls.autoRotateSpeed = 0.5;
    //设置相机距离原点的最远距离
    controls.minDistance = 10;
    //设置相机距离原点的最远距离
    controls.maxDistance = 600;
    //是否开启右键拖拽
    controls.enablePan = false;
}

//初始场景
function initScene(){
    scene = new THREE.Scene();
}

//创建网格
function createGrid(){
    var grid = new THREE.GridHelper( 20, 20 );
    scene.add( grid );
}

//设置光照
function setLight(){
    particleLight = new THREE.Mesh( new THREE.SphereGeometry( 4, 8, 8 ), new THREE.MeshBasicMaterial( { color: 0xffffff } ) );              
    var light = new THREE.HemisphereLight( 0xffeeee, 0x111122 );
    var pointLight = new THREE.PointLight( 0xffffff, 0.3 );
    //scene.add( particleLight );
    scene.add( light );
    //particleLight.add( pointLight );
}

//创建webglr层
function initRenderer(){
    var params = {
         antialias:true
     };
     renderer = new THREE.WebGLRenderer(params);
     renderer.setPixelRatio( window.devicePixelRatio );
     renderer.setSize( window.innerWidth, window.innerHeight );
     renderer.setClearColor( 0x103f51 );
     container.appendChild( renderer.domElement );
}

//创建监视器
function createStats(){
    stats = new Stats();
    //container.appendChild( stats.dom );
}

//模型动画
function setupTween() {
    var duration = THREE.Math.randInt( 1000, 5000 );
    var target = {};
    for ( var prop in kinematics.joints ) {
        if ( kinematics.joints.hasOwnProperty( prop ) ) {
            if ( ! kinematics.joints[ prop ].static ) {
                var joint = kinematics.joints[ prop ];
                var old = tweenParameters[ prop ];
                var position = old ? old : joint.zeroPosition;
                tweenParameters[ prop ] = position;
                target[ prop ] = THREE.Math.randInt( joint.limits.min, joint.limits.max )
             }
         }
     }
     kinematicsTween = new TWEEN.Tween( tweenParameters ).to( target, duration ).easing( TWEEN.Easing.Quadratic.Out );
     kinematicsTween.onUpdate( function() {
         for ( var prop in kinematics.joints ) {
             if ( kinematics.joints.hasOwnProperty( prop ) ) {
                    if ( ! kinematics.joints[ prop ].static ) {
                        kinematics.setJointValue( prop, this[ prop ] );
                    }
                }
            }
        } );
        kinematicsTween.start();
        setTimeout( setupTween, duration );
    }

function animate() {
    /*requestAnimationFrame( animate );
    render();
    stats.update();
    TWEEN.update();*/
    stats.update();
    TWEEN.update();
    controls.update();
    renderer.render(scene, camera);
}

function render() {
    var timer = Date.now() * 0.0001;
    camera.lookAt( new THREE.Vector3( 0, 5, 0) );
    particleLight.position.x = Math.sin( timer * 4 ) * 3009;
    particleLight.position.y = Math.cos( timer * 5 ) * 4000;
    particleLight.position.z = Math.cos( timer * 4 ) * 3009;
    //更新控制器
    controls.update();
    renderer.render( scene, camera );
}

window.addEventListener( 'resize', onWindowResize, false );
function onWindowResize() {
    //camera.aspect = container.clientWidth / container.clientHeight;
    camera.updateProjectionMatrix();
    renderer.setSize( window.innerWidth, window.innerHeight );
}

function resetObj(){
    //是否自动旋转
    controls.autoRotate = true;
    camera.position.copy(new THREE.Vector3( 20, 10, 30 ));
    //animate();
 }
 function frontObj(){
     //是否自动旋转
    controls.autoRotate = false;
    camera.position.copy(new THREE.Vector3( 0.0, 10, 20.0 ));
    //createCamera(20, 10, 50); 
    //animate();
 }
 function backObj(){
     //是否自动旋转
     controls.autoRotate = false;
     camera.position.copy(new THREE.Vector3( 0.0, 10, -20.0 ));
     //animate();
}
function threeStart(){
    initLoader();
    getDom();
    createCamera(20, 10,30); 
    initScene();
    createGrid();
    setLight();
    initRenderer();
    initControl();
    createStats();
    //setupTween();
    //animate();
    setInterval(animate, parseInt(1000 / frameCount));              
}
threeStart();