lab_texture=materialSphere1 = new BABYLON.StandardMaterial("texture1"+this.id, scene); 4 materialSphere1.diffuseTexture = lab_texture; 5 var plane = BABYLON.Mesh.CreatePlane("plane"+this.id, 2.0, scene, false, BABYLON.Mesh.FRONTSIDE); materialSphere1.diffuseTexture.hasAlpha = true;//应用纹理的透明度 plane.rotation.y = Math.PI; 11 plane.scaling.x=20; 12 plane.scaling.y=4; 13 plane.parent=this.mesh; 14 15 plane.material=materialSphere1; 16 this.lab=plane;

　　在这里使用了canvas现场产生纹理（术语叫“程序贴图”），其中texttoimg2（）方法的定义在utils.js文件中：

texttoimg(str) 3 { 4 var c=document.createElement("canvas"); 5 c.height=20; 6 c.width=100; 7 var context = c.getContext('2d'); 8 context.font="normal 15px sans-serif"; 9 context.clearRect(0, 0, canvas.width, canvas.height); 10 context.fillStyle="rgb(255,255,255)"; 11 context.fillRect(0,0,canvas.width,canvas.height); 12 context.fillStyle = "rgb(0,0,0)"; 13 context.textBaseline = 'top'; 14 context.fillText(str,(c.width-str.length*15)/2,0, c.width*0.9); 15 var str_src=c.toDataURL("image/jpeg"); 16 return str_src; } texttoimg2(str) 21 { 22 var c=document.createElement("canvas"); 23 c.height=20; 24 c.width=100; 25 var context = c.getContext('2d'); 26 context.font="normal 20px sans-serif"; 27 context.clearRect(0, 0, canvas.width, canvas.height); context.fillStyle = "rgb(255,255,255)"; 31 context.textBaseline = 'middle';// 32 context.fillText(str,(c.width-str.length*20)/2,10, c.width*0.9); 33 var str_src=c.toDataURL("image/png"); 34 return str_src; }

　　该代码综合网上多个教程修改而来，其中生成jpeg的难点在于canvas默认生成四通道图像，而jpeg在去除透明度通道时会自动将透明度通道变成黑色，于是jpeg一片漆黑，解决方法是先画一个不透明的白色矩形背景，挡住所有透明通道，再在白色背景上画图。

　　在模型导入完毕后把Tom设为玩家列表对象arr_myplayers的一个属性，如果当前玩家处于在线状态，则还要把其加载状态同步给其他玩家，具体同步方式稍后介绍。

　　最后把玩家的相机定位到玩家模型的身后，做第三方跟随视角状。

三、加速度运动控制

在scene_link.js文件的中部可以看到scene.registerBeforeRender()方法，这个方法的作用是在每次渲染前调用作为它的参数的方法，我们通过这个方法在每次渲染前对物体的下一步运动情况进行计算：

1 scene.registerBeforeRender(function() (scene.isReady() && arr_myplayers) (sceneCharger == false) { sceneCharger = true; 8 } 9 if(ms0==0) ms0=schange=0; } { schange = (mst - ms0) / 1000; ( { 22 var obj = arr_myplayers[key]; 23 switch(obj.methodofmove) 24 { 25 case "controlwitha": 26 { 27 movewitha(obj); (state == "online") 30 { 31 if(obj.vmove.x==0&&obj.vmove.y==0&&obj.vmove.z==0&&obj.rychange==0) (obj.countstop>0) } { 39 obj.countstop+=1; arr = []; 42 arr.push("updatemesh"); 43 arr.push(obj.mesh.position.x); 44 arr.push(obj.mesh.position.y); 45 arr.push(obj.mesh.position.z); 46 arr.push(obj.mesh.rotation.x); 47 arr.push(obj.mesh.rotation.y); 48 arr.push(obj.mesh.rotation.z); 49 arr.push(obj.vmove.x); 50 arr.push(obj.vmove.y); 51 arr.push(obj.vmove.z); 52 arr.push(obj.rychange); 53 doSend(arr.join("@")); 54 } 55 } { 58 obj.countstop=0; arr = []; 61 arr.push("updatemesh"); 62 arr.push(obj.mesh.position.x); 63 arr.push(obj.mesh.position.y); 64 arr.push(obj.mesh.position.z); 65 arr.push(obj.mesh.rotation.x); 66 arr.push(obj.mesh.rotation.y); 67 arr.push(obj.mesh.rotation.z); 68 arr.push(obj.vmove.x); 69 arr.push(obj.vmove.y); 70 arr.push(obj.vmove.z); 71 arr.push(obj.rychange); 72 doSend(arr.join("@")); 73 } 74 } ((obj.vmove.x!=0||obj.vmove.y!=0||obj.vmove.z!=0||obj.rychange!=0)&&obj.PlayAnnimation==false) obj.PlayAnnimation=true; 79 obj.beginSP(0); 80 } (obj.vmove.x==0&&obj.vmove.y==0&&obj.vmove.z==0&&obj.rychange==0&&obj.PlayAnnimation==true) obj.PlayAnnimation=false; 84 scene.stopAnimation(obj.skeletonsPlayer[0]); 85 } 86 break; 87 } 88 default : 89 { 90 break; 91 } 92 } 93 } 94 。。。

　　这里的意思是说如果玩家列表里的玩家的运动方式(methodofmove)是"controlwitha"，则使用movewitha(obj)方法计算其在这一时间段中的运动，当然，如果编写出了其他的运动方法也可以类似的扩展进来。

　　movewitha(obj)方法定义在MoveWeb.js文件中：

1、初速度投影