3D旋转的时钟

初步学习WEBGL。感谢WEBGL中文网的帮助

首先是时钟的绘画过程。这里主要介绍逻辑处理的JS代码。剩余的TOUCHME

 

  
        var hour=new Date().getHours();

        if(hour>11){
            hour=hour-12;
        }

        var mins=new Date().getMinutes();

        var sec=new Date().getSeconds();
                //秒针，每周走60个单位
        var UnitSec=2*Math.PI/60;
                //分钟，每周走60*60个单位
        var UnitMins=2*Math.PI/(60*60);
                //小时，每周走12*60*60个单位
        var UnitHour=2*Math.PI/(12*60*60);

        var AngleHour=UnitHour*(hour*60*60+mins*60+sec);

        var AngleMins=UnitMins*(mins*60+sec);

        var AngleSec=UnitSec*(sec);
                //具体绘画方法
        this.drawCursor(AngleHour,AngleMins,AngleSec);

 

重点是3D立方体的绘画

 

  
        function start() {
          //开始画时钟
        clock.init();
           //开始画立方体
        init();
        //动起来
        animate();
    }

    function init() {
        //首先渲染器render
        renderer = new THREE.WebGLRenderer();
        renderer.setSize( window.innerWidth, window.innerHeight );
        document.body.appendChild( renderer.domElement );
        //其次相机Camera。
        camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 1000 );
        camera.position.z = 400;
         //然后定义场景
        scene = new THREE.Scene();

        //定义立方体
        var geometry = new THREE.CubeGeometry(150, 150, 150);

        texture = new THREE.Texture( canvas);
        //这里把canvas按照纹理的方式贴到皮肤表面
        var material = new THREE.MeshBasicMaterial({map:texture});

           texture.needsUpdate = true;
        //网格定义
        mesh = new THREE.Mesh( geometry,material );
        scene.add( mesh );

        window.addEventListener( 'resize', onWindowResize, false );
    }

    function onWindowResize() {
        camera.aspect = window.innerWidth / window.innerHeight;
        camera.updateProjectionMatrix();
        renderer.setSize( window.innerWidth, window.innerHeight );
    }

    function animate() {
          texture.needsUpdate = true;
        mesh.rotation.y -= 0.01;
        mesh.rotation.x -= 0.01;
        requestAnimationFrame( animate );
        renderer.render( scene, camera );
    }

 

这里需要强调下。threeJS的绘画过程，主要有三部分。渲染器，场景，相机。。理解好这三个部分的作用，就好了。