AutoCAD 命令统计魔幻球的实现过程（2）

在第一部分中介绍了如何使用ASP.net Web API和Entity Framework实现服务器端程序，这篇博客将讲述如何使用JQuery从服务器获取数据并利用WebGL/Three.Js来实现浏览器端魔幻球的渲染。

本文地址：http://www.cnblogs.com/junqilian/archive/2013/03/14/2958698.html

这部分比较简单，就是一个html页面，为了方便，我就利用服务器端ASP.NET MVC中的view – index.cshtml好了。在这个文件中我要添加一些Javascript代码来以REST的方式从服务器获取数据，然后渲染魔幻球。Web页面中利用JavaScript与服务器进行通信，JQuery是很好的选择，实际上JQuery也已经包含在了ASP.NET MVC里面。对于WebGL的渲染，我选用了一个流行的类库Three.Js。类库和源码都可以从GitHub上下载。 里面包含好多示例，是理解和应用Three.Js很好的学习资料。

大家也看到了，这个程序的界面非常简单，就是一个下拉框用来选择用户，还有一个div标签作为魔幻球的渲染容器：

<div id="body">
    <section class="featured">
        <div class="content-wrapper">
            <div>
                <select id="sel_userName" >
                    <option value="All_Users">Select a User Name</option>
                </select>
            
              </div>
        </div>
 
        
    </section>
    <section class="content-wrapper main-content clear-fix"> 
        
      >
        <div id="Containner" style="height:500px; width:800px;
  background-color:black;" ></div>
        
    </section>
    
</div>

首先在document Ready的时候从服务器请求可用的用户列表。这里我使用JQuery发送Ajax请求到“api/AcadCommands”来获取所有的用户命令统计数据，然后从中选择用户名。当然这样效率是不高的，更好的应该是在服务器端实现一个action只返回可用的用户列表就行了。如果你感兴趣，可以自己实现这部分做练习。

    $(document).ready(function () {
        // Send an AJAX request
        $.getJSON("api/AcadCommands/",
                function (data) {
                    // On success, 'data' contains a list of UserCommandsHits.
                    $.each(data, function (key, val) {
                        $("select").append(
                            '<option value="' + val.UserName + '">'
                                + val.UserName +
                            '</option>');
                    });
                });

        var container = document.getElementById('Containner');
        initThree(container);
        animate();


   });

在document ready的时候还要初始化ThreeJs，这部分一会儿再说。先说说当用户从下列框中选择一个用户后，我们需要获取指定用户的命令统计信息。使用JQuery发送Ajax请求到 api/AcadCommands?username=" + username：

代码如下：

        $("#sel_userName").change(this, function () {
 
            var username = $(this).children('option:selected').val();
            $('#txt_userName').text = username;
 
            var commandHitDic = new Array();
 
            $.getJSON("api/AcadCommands?username=" + username,
                    function (data) {
                        var str = data.UserName + ': $' + data.CommandHits;
                        cmdHits = data.CommandHits;
 
                        //add 3D objects to WebGL scene
                        addObjectsToScene(cmdHits);
 
 
                    })
                .fail(
                    function (jqXHR, textStatus, err) {
                        alert(err);
                        $('#txt_userName').text('Error: ' + err);
                    });
 
 
 
        }); //$("#sel_userName").change

获取到用户命令统计数据后，就可以用ThreeJs来渲染了，我把这部分放在一个单独的javascript文件中。直接上代码：

var mouseX = 0, mouseY = 0,
 

 
    SEPARATION = 200,
    AMOUNTX = 10,
    AMOUNTY = 10,
 
 
 
    camera, scene, renderer;
 
var magicBall = new THREE.Object3D();
    
var targetRotation = 0;
var targetRotationOnMouseDown = 0;
 
var mouseX = 0;
var mouseXOnMouseDown = 0;
 
///////////////////////////////
var MIN_TEXT_FONT_SIZE = 10;
var MAX_TEXT_FONT_SIZE = 80;
 
var MIN_LINE_LENGTH = 50;
var MAX_LINE_LENGTH = 450;
 
var PARTICLE_BALL_RADIUS = 850;
 
///////////////////////////////
 
//initThree();
//animate();
 
    var minHitNumber = 0;
    var maxHitNumber = 0;
 
    function computeMinMaxHitNum(cmdHits) {
 
        //get min and max hit number
        for (var i in cmdHits) {
            var hitNum = cmdHits[i].HitNumber;
            var cmd = cmdHits[i].CommandName;
 
            if (hitNum > maxHitNumber) maxHitNumber = hitNum;
            if (hitNum < minHitNumber) minHitNumber = hitNum;
        }
 
    }
 
function getLineLength(hitNumber) {
 
    var ratio = (hitNumber - minHitNumber) / (maxHitNumber - minHitNumber);
 
    var lineLength = MIN_LINE_LENGTH + ratio * (MAX_LINE_LENGTH - MIN_LINE_LENGTH);
 
    return lineLength;
 
}
 
function getTextFontSize(hitNumber) {
 
    var ratio = (hitNumber - minHitNumber) / (maxHitNumber - minHitNumber);
 
    var textSize = MIN_TEXT_FONT_SIZE + ratio * (MAX_TEXT_FONT_SIZE - MIN_TEXT_FONT_SIZE);
 
    return textSize;
 
}
 
 
function initThree(container) {
 
 
 
 
    var separation = 100, amountX = 50, amountY = 50,
                particles, particle;
 
 
    camera = new THREE.PerspectiveCamera(75, 
            container.clientWidth / container.clientHeight, 1, 10000);
    camera.position.z = 1000;
 
    scene = new THREE.Scene();
 
    renderer = new THREE.CanvasRenderer(); //WebGLRenderer()
    renderer.setSize(container.clientWidth, container.clientHeight);
    container.appendChild(renderer.domElement);
 
    //add particles just for visual effect
 
    var PI2 = Math.PI * 2;
    var material = new THREE.ParticleCanvasMaterial({
 
        color: 0xffffff,
        program: function (context) {
 
            context.beginPath();
            context.arc(0, 0, 1, 0, PI2, true);
            context.closePath();
            context.fill();
 
        }
 
    });
 
    for (var i = 0; i < 1000; i++) {
 
        particle = new THREE.Particle(material);
        particle.position.x = Math.random() * 2 - 1;
        particle.position.y = Math.random() * 2 - 1;
        particle.position.z = Math.random() * 2 - 1;
        particle.position.normalize();
        particle.position.multiplyScalar(Math.random() * 10 + PARTICLE_BALL_RADIUS);
        scene.add(particle);
 
    }
 
 
 
 
 
 
    container.addEventListener('mousedown', onContainerMouseDown, false);
    container.addEventListener('touchstart', onContainerTouchStart, false);
    container.addEventListener('touchmove', onContainerTouchMove, false);
 
   
 
}
 
function addObjectsToScene(cmdHits){
 
    //prepartion
    computeMinMaxHitNum(cmdHits);
    
    if(magicBall.children.length > 0){
        
        var obj, i;
        for ( i = magicBall.children.length - 1; i >= 0 ; i -- ) {
            obj = magicBall.children[ i ];
            
            magicBall.remove(obj);
            
        }
 
        scene.remove(magicBall);
    }
    // add line and text 
 
    for (var i in cmdHits) {
 
        var hitNum = cmdHits[i].HitNumber;
        var cmdName = cmdHits[i].CommandName;
 
        //draw line and text 3d object
        var lineLength = getLineLength(hitNum);
        var textSize = getTextFontSize(hitNum);
 
        var lineAndText = creatLineAndText(lineLength, cmdName, textSize);
        magicBall.add(lineAndText);
    }
 
 
 
    magicBall.rotation.x = 0;
    magicBall.rotation.y = Math.PI * 2;
                            
    scene.add(magicBall);
    
}
 
function creatLineAndText(lineLength, textString, textSize) {
 
    var lineAndText = new THREE.Object3D();
    
    //draw line 
 
    var startVector = new THREE.Vector3(0, 0, 0);// always start from center of ball.
 
    var endX = Math.random() * 2 - 1;
    var endY = Math.random() * 2 - 1;
    var endZ = Math.random() * 2 - 1;
    var endVector = new THREE.Vector3(endX, endY, endZ);
    endVector = endVector.normalize();
    endVector.multiplyScalar(lineLength);
 
    var geomLine = new THREE.Geometry();
    geomLine.vertices.push(startVector);
    geomLine.vertices.push(endVector);
 
    var line = new THREE.Line(geomLine, new THREE.LineBasicMaterial(
            { color: Math.random() * 0xffffff, opacity: 0.5 }));
 
    lineAndText.add(line);
 
    //draw text
    
        //inline function
        function creatTextAt(textPosition, textString, textSize) {
 
            var text3d = new THREE.TextGeometry(textString, {
 
                size: textSize,
                height: 5, //thickness of the text
                curveSegments: 2,
                font: "helvetiker"
 
            });
 
            text3d.computeBoundingBox();
            var centerOffset = -0.5 * (text3d.boundingBox.max.x - text3d.boundingBox.min.x);
 
            var textMaterial = new THREE.MeshBasicMaterial(
                { color: Math.random() * 0xffffff,
                    overdraw: true });
            text = new THREE.Mesh(text3d, textMaterial);
 
            text.position.x = textPosition.x + centerOffset;
            text.position.y = textPosition.y;
            text.position.z = textPosition.z;
                            
 
                    
 
            return text;
        };
 
    var text3D = creatTextAt(endVector, textString, textSize);
    lineAndText.add(text3D);
 
    
 
    return lineAndText;
}
 
 
 

 
function onContainerMouseDown(event) {
    
    event.preventDefault();
 
    var container = event.srcElement;
    
    container.addEventListener('mousemove', onContainerMouseMove, false);
    container.addEventListener('mouseup', onContainerMouseUp, false);
    container.addEventListener('mouseout', onContainerMouseOut, false);
 
    var windowHalfX = container.clientWidth / 2;
    
    mouseXOnMouseDown = event.clientX - windowHalfX;
    targetRotationOnMouseDown = targetRotation;
 
}
 
function onContainerMouseMove(event) {
 
    var container = event.srcElement;
    var windowHalfX = container.clientWidth / 2;
 
    mouseX = event.clientX - windowHalfX;
 
    targetRotation = targetRotationOnMouseDown + (mouseX - mouseXOnMouseDown) * 0.02;
 
}
 
function onContainerMouseUp(event) {
 
    var container = event.srcElement;
 
    container.removeEventListener('mousemove', onContainerMouseMove, false);
    container.removeEventListener('mouseup', onContainerMouseUp, false);
    container.removeEventListener('mouseout', onContainerMouseOut, false);
 
}
 
function onContainerMouseOut(event) {
 
    var container = event.srcElement;
 
    container.removeEventListener('mousemove', onContainerMouseMove, false);
    container.removeEventListener('mouseup', onContainerMouseUp, false);
    container.removeEventListener('mouseout', onContainerMouseOut, false);
 
}
 
function onContainerTouchStart(event) {
 
    if (event.touches.length == 1) {
 
        event.preventDefault();
 
        var container = event.srcElement;
        var windowHalfX = container.clientWidth / 2;
    
        mouseXOnMouseDown = event.touches[0].pageX - windowHalfX;
        targetRotationOnMouseDown = targetRotation;
 
    }
 
}
 
function onContainerTouchMove(event) {
 
    if (event.touches.length == 1) {
 
        event.preventDefault();
 
        var container = event.srcElement;
        var windowHalfX = container.clientWidth / 2;
        
        mouseX = event.touches[0].pageX - windowHalfX;
        targetRotation = targetRotationOnMouseDown + (mouseX - mouseXOnMouseDown) * 0.05;
 
    }
 
}
 
//
 
function animate() {
 
    requestAnimationFrame(animate);
 
    render();
 
}
 
function render() {
 
    camera.position.x += (mouseX - camera.position.x) * .05;
    camera.position.y += (-mouseY + 200 - camera.position.y) * .05;
    camera.lookAt(scene.position);
 
 
    //self rotate
    magicBall.rotation.y += ( targetRotation - magicBall.rotation.y ) * 0.05;
    //magicBall.rotation.y += 0.05;
    renderer.render(scene, camera);
 
}

好了，到目前为止已经完成了，最后给大家提一下用到的JavaScript文件，注意这个 helvetiker_regular.typeface.js 因为我要把命令名字渲染成文本，使用了 helvetiker_regular字体，所以需要这个文件。这个文件可以在ThreeJS的下载包中找到。

<script src="../../Scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
<script type="text/javascript" src="../../Scripts/Three/three.js"></script>
<script type="text/javascript" src="../../Scripts/Three/Detector.js"></script>
<script type="text/javascript" src="../../Scripts/Three/fonts/helvetiker_regular.typeface.js"></script>
<script type="text/javascript" src="../../Scripts/ACV_MagicBall.js"></script>

好了，打完收工。不过到目前为止，这个程序还是运行在本机的一个aspnet站点，下一步就是把他搬到windows Azure云端去了。下回再说。