ljzc002

基于Babylon.js编写宇宙飞船模拟程序1——程序基础结构、物理引擎使用、三维罗盘

计划做一个宇宙飞船模拟程序，首先做一些技术准备。

可以访问https://ljzc002.github.io/test/Spacetest/HTML/PAGE/spacetestwp2.html查看测试场景，按住qe键可以左右倾斜相机。可以在https://github.com/ljzc002/ljzc002.github.io/tree/master/test/Spacetest查看程序代码，因时间有限，github上的代码可能和本文中的代码有少许出入。

主要内容：

一、程序基础结构

二、场景初始化

三、地形初始化

四、事件初始化

五、UI初始化

六、单位初始化

七、主循环初始化

八、总结

一、程序基础结构：

入口文件spacetestwp2.html代码如下：

 1 DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>三种物理引擎的加速度效果对比测试title>
 6     <link href="../../CSS/newland.css" rel="stylesheet">
 7     <script src="../../JS/LIB/babylon.max.js">script>
 8     <script src="../../JS/LIB/babylon.gui.min.js">script>
 9     <script src="../../JS/LIB/babylonjs.loaders.min.js">script>
10     <script src="../../JS/LIB/babylonjs.materials.min.js">script>
11     <script src="../../JS/LIB/earcut.min.js">script>
12     <script src="../../JS/LIB/babylonjs.proceduralTextures.min.js">script>
13     <script src="../../JS/LIB/oimo.min.js">script>
14     <script src="../../JS/LIB/ammo.js">script>
15     <script src="../../JS/LIB/cannon.js">script>
16     
17     <script src="../../JS/MYLIB/newland.js">script>
18     <script src="../../JS/MYLIB/CREATE_XHR.js">script>
19 
20 head>
21 <body>
22 <div id="div_allbase">
23     <canvas id="renderCanvas">canvas>
24     <div id="fps" style="z-index: 302;">div>
25 div>
26 body>
27 <script>
28     var VERSION=1.0,AUTHOR="[email protected]";
29     var machine/*设备信息*/,canvas/*html5画布标签*/,engine/*Babylon.js引擎*/,scene/*Babylon场景*/,gl/*底层WebGL对象*/,MyGame/*用来存储各种变量*/;
30     canvas = document.getElementById("renderCanvas");
31     engine = new BABYLON.Engine(canvas, true);
32     engine.displayLoadingUI();
33     gl=engine._gl;
34     scene = new BABYLON.Scene(engine);
35     var divFps = document.getElementById("fps");/*用来显示每秒帧数的标签*/
36 
37     window.onload=beforewebGL;
38     function beforewebGL()
39     {
40         MyGame=new Game(0,"first_pick","","","","");
41         initWs(webGLStart,"no");//离线测试，不使用WebSocket
42         //webGLStart();
43     }
44     function webGLStart()
45     {//是否有必要严格控制初始化流程的同步性？
46         initScene();//初始化基础场景，包括光照、相机对象
47         initArena();//初始化地形，要包括出生点、可放置区域（6*9）
48         initEvent();//初始化事件
49         initUI();//初始化场景UI
50         initObj();//初始化一开始存在的可交互的物体
51         initLoop();//初始化渲染循环
52         initAI();//初始化AI计算任务
53         MyGame.init_state=1;
54         engine.hideLoadingUI();
55     }
56 script>
57 <script src="../../JS/PAGE/SpaceTest/WsHandler.js">script>
58 <script src="../../JS/PAGE/SpaceTest/SpaceTest2.js">script>
59 <script src="../../JS/MYLIB/Game.js">script>
60 <script src="../../JS/PAGE/SpaceTest/Control.js">script>
61 <script src="../../JS/PAGE/SpaceTest/FullUI.js">script>
62 <script src="../../JS/PAGE/SpaceTest/Campass.js">script>
63 <script src="../../JS/PAGE/CHARACTER/Rocket2.js">script>
64 html>

1、Babylon.js库下载

在4.0正式版之前，Babylon.js官方提供了一款带有图形界面的打包工具，可以根据用户需求方便的将各种库打包为一个js文件，但官方网站改版后这个打包工具已经不再可用。可以在这里找到使用这一打包工具生成的最后一个版本：

https://github.com/ljzc002/ljzc002.github.io/tree/master/EmptyTalk/JS/LIB，这个纪念版本基于4.0测试版打包，包含了除物理引擎以外的绝大部分功能。

回到现在，Babylon.js官方推荐使用cdn或npm使用程序包，方法见：https://github.com/BabylonJS/Babylon.js。但我个人更喜欢明确的调用本地文件，所以我在这里整理了一套较新的Babylon.js程序包：https://github.com/ljzc002/ljzc002.github.io/tree/master/test/Spacetest/JS/LIB，你也可以自己在https://github.com/BabylonJS/Babylon.js/tree/master/dist里挑选最新版本的程序包下载。

2、程序初始化流程：

a、28-35行定义了一些程序中可能用到的全局变量；

b、40行建立一个Game类实例，用来管理场景中的各种变量，Game类的代码如下：

  1 Game=function(init_state,flag_view,wsUri,h2Uri,userid,wsToken)
  2 {
  3     var _this = this;
  4     this.scene=scene;
  5     this.loader =  new BABYLON.AssetsManager(scene);;//资源管理器
  6     //控制者数组
  7     this.arr_allplayers=null;
  8     this.arr_myplayers={};
  9     this.arr_webplayers={};
 10     this.arr_npcs={};
 11     //this.player={};//对于world用户这两者相等?
 12     //this.player.arr_units=[];//这些不在这里设置，在initscene中设置
 13     this.world={};
 14     this.world.arr_units=[];
 15     //this.arr_
 16     this.count={};
 17     this.count.count_name_npcs=0;
 18     this.Cameras={};
 19     this.ws=null;
 20     this.lights={};
 21     this.fsUI=BABYLON.GUI.AdvancedDynamicTexture.CreateFullscreenUI("ui1");/*全屏UI*/
 22     this.hl=new BABYLON.HighlightLayer("hl1", scene);
 23     this.hl.blurVerticalSize = 1.0;//这个影响的并不是高光的粗细程度，而是将它分成 多条以产生模糊效果，数值表示多条间的间隙尺寸
 24     this.hl.blurHorizontalSize =1.0;
 25     this.hl.innerGlow = false;
 26     this.hl.alphaBlendingMode=3;
 27     //this.hl.isStroke=true;
 28     //this.hl.blurTextureSizeRatio=2;
 29     //this.hl.mainTextureFixedSize=100;
 30     //this.hl.renderingGroupId=3;
 31     //this.hl._options.mainTextureRatio=1000;
 32 
 33     this.wsUri=wsUri;
 34     this.wsConnected=false;
 35     this.init_state=init_state;//当前运行状态
 36     /*0-startWebGL
 37     1-WebGLStarted
 38     2-PlanetDrawed
 39      * */
 40     this.h2Uri=h2Uri;
 41     //我是谁
 42     this.WhoAmI=userid;//newland.randomString(8);
 43     this.userid=userid;
 44     this.wsToken=wsToken;
 45     //this.arr_webplayers
 46 
 47     this.materials={};/*预设材质*/
 48     var mat_frame = new BABYLON.StandardMaterial("mat_frame", scene);
 49     mat_frame.wireframe = true;
 50     //mat_frame.useLogarithmicDepth = true;
 51     mat_frame.freeze();
 52     this.materials.mat_frame=mat_frame;
 53     var mat_red=new BABYLON.StandardMaterial("mat_red", scene);
 54     mat_red.diffuseColor = new BABYLON.Color3(1, 0, 0);
 55     //mat_red.useLogarithmicDepth = true;
 56     mat_red.freeze();
 57     var mat_green=new BABYLON.StandardMaterial("mat_green", scene);
 58     mat_green.diffuseColor = new BABYLON.Color3(0, 1, 0);
 59     //mat_green.useLogarithmicDepth = true;
 60     mat_green.freeze();
 61     var mat_blue=new BABYLON.StandardMaterial("mat_blue", scene);
 62     mat_blue.diffuseColor = new BABYLON.Color3(0, 0, 1);
 63     mat_blue.freeze();
 64     var mat_black=new BABYLON.StandardMaterial("mat_black", scene);
 65     mat_black.diffuseColor = new BABYLON.Color3(0, 0, 0);
 66     //mat_black.useLogarithmicDepth = true;
 67     mat_black.freeze();
 68     var mat_orange=new BABYLON.StandardMaterial("mat_orange", scene);
 69     mat_orange.diffuseColor = new BABYLON.Color3(1, 0.5, 0);
 70     //mat_orange.useLogarithmicDepth = true;
 71     mat_orange.freeze();
 72     var mat_yellow=new BABYLON.StandardMaterial("mat_yellow", scene);
 73     mat_yellow.diffuseColor = new BABYLON.Color3(1, 1, 0);
 74     //mat_yellow.useLogarithmicDepth = true;
 75     mat_yellow.freeze();
 76     var mat_gray=new BABYLON.StandardMaterial("mat_gray", scene);
 77     mat_gray.diffuseColor = new BABYLON.Color3(0.5, 0.5, 0.5);
 78     //mat_gray.useLogarithmicDepth = true;
 79     mat_gray.freeze();
 80     this.materials.mat_red=mat_red;
 81     this.materials.mat_green=mat_green;
 82     this.materials.mat_blue=mat_blue;
 83     this.materials.mat_black=mat_black;
 84     this.materials.mat_orange=mat_orange;
 85     this.materials.mat_yellow=mat_yellow;
 86     this.materials.mat_gray=mat_gray;
 87 
 88     this.models={};/*预设模型*/
 89     this.textures={};/*预设纹理*/
 90     this.textures["grained_uv"]=new BABYLON.Texture("../../ASSETS/IMAGE/grained_uv.png", scene);//磨砂表面
 91     this.texts={};
 92 
 93     this.flag_startr=0;//开始渲染并且地形初始化完毕
 94     this.flag_starta=0;
 95     this.list_nohurry=[];
 96     this.nohurry=0;//一个计时器，让一些计算不要太频繁
 97     this.flag_online=false;
 98     this.flag_view=flag_view;//first/third/input/free
 99     this.flag_controlEnabled = false;
100     this.arr_keystate=[];
101     this.obj_keystate={};
102     this.SpriteManager=new BABYLON.SpriteManager("treesManagr", "../../ASSETS/IMAGE/CURSOR/palm.png", 2000, 100, scene);/*预设粒子生成器*/
103     this.SpriteManager.renderingGroupId=2;
104     this.obj_ground={};//存放地面对象（地形）
105     this.arr_startpoint=[];//场景的所有出生点
106     this.currentarea=null;
107 }

这里预定义了一些变量，以方便之后通过MyGame对象调用，其中一些变量对于这次的宇宙飞船模拟并没有作用，可以根据实际需求对它们进行增减。

需要考量的是47到86行建立预设材质的代码，其中mat_frame.useLogarithmicDepth = true;表示将该材质的深度计算改为对数形式，这种设置可以有效避免平面相互贴近时的闪烁现象和过于遥远物体的深度计算溢出问题，但Babylon.js中的一些功能（如程序纹理和粒子系统）并不支持这一设置，这时同一渲染组中的非对数深度材质将总是显示在对数深度材质的后面，所以要根据场景的具体需求决定是否使用对数深度材质。

c、46-52行依次对模拟程序各个方面进行初始化。（初始化流程参考自《Windows游戏编程大师技巧》和《WebGL入门指南》）

二、场景初始化：

initScene方法代码如下：（在SpaceTest2.js文件中）

 1 function initScene()
 2 {
 3     console.log("初始化宇宙场景");
 4     var light1 = new BABYLON.HemisphericLight("hemi", new BABYLON.Vector3(0, 50, 100), scene);//光照
 5     light1.diffuseColor = new BABYLON.Color3(0, 10, 10);
 6 
 7     var camera0= new BABYLON.UniversalCamera("FreeCamera", new BABYLON.Vector3(0, 0, -10), scene);//由FreeCamera改为新版本的“通用相机”，据说可以默认支持各种操作设备。
 8     camera0.minZ=0.001;//视锥体近平面距离，如果物体距相机的距离小于这个数值，物体将因为脱离视锥体而不可见
 9     camera0.attachControl(canvas,true);
10     //camera0.speed=50;
11     scene.activeCameras.push(camera0);
12 
13     MyGame.player={//将一些可能用到的变量保存到MyGame对象的player属性中
14         name:MyGame.userid,//显示的名字
15         id:MyGame.userid,//WebSocket Sessionid
16         camera:camera0,
17         methodofmove:"free",
18         mesh:new BABYLON.Mesh("mesh_"+MyGame.userid,scene),
19         cardinhand:[],
20         arr_units:[],
21         handpoint:new BABYLON.Mesh("mesh_handpoint_"+MyGame.userid,scene),
22         scal:5,
23     };
24     MyGame.player.handpoint.position=new BABYLON.Vector3(0,-14,31);
25     MyGame.player.handpoint.parent=MyGame.player.mesh;
26     MyGame.Cameras.camera0=camera0;
27     //启用物理引擎
28     //var physicsPlugin =new BABYLON.CannonJSPlugin(false);
29     //var physicsPlugin = new BABYLON.OimoJSPlugin(false);
30     var physicsPlugin = new BABYLON.AmmoJSPlugin();
31     physicsPlugin.setTimeStep(1/120);
32     var physicsEngine = scene.enablePhysics(new BABYLON.Vector3(0, 0.1, 0.2), physicsPlugin);//重力new BABYLON.Vector3(0, 0.1, 0.2)
33 }

Babylon.js默认支持三种物理引擎Cannon.js、Oimo.js、Ammo.js，也支持绑定自定义物理引擎。这里简单对比一下三种默认支持的物理引擎：

建议根据实际需求选择使用何种物理引擎。

三、地形初始化：

initArena方法代码如下：

 1 function initArena()
 2 {
 3     console.log("初始化地形");
 4     var skybox = BABYLON.Mesh.CreateBox("skyBox", 1500.0, scene);//尺寸存在极限，设为15000后显示异常
 5     var skyboxMaterial = new BABYLON.StandardMaterial("skyBox", scene);
 6     skyboxMaterial.backFaceCulling = false;
 7     skyboxMaterial.reflectionTexture = new BABYLON.CubeTexture("../../ASSETS/IMAGE/SKYBOX/nebula", scene);
 8     skyboxMaterial.reflectionTexture.coordinatesMode = BABYLON.Texture.SKYBOX_MODE;
 9     skyboxMaterial.diffuseColor = new BABYLON.Color3(0, 0, 0);
10     skyboxMaterial.specularColor = new BABYLON.Color3(0, 0, 0);
11     skyboxMaterial.disableLighting = true;
12     skybox.material = skyboxMaterial;
13     skybox.renderingGroupId = 1;
14     skybox.isPickable=false;
15     skybox.infiniteDistance = true;
16 
17     //三个参照物
18     var mesh_base=new BABYLON.MeshBuilder.CreateSphere("mesh_base",{diameter:10},scene);
19     mesh_base.material=MyGame.materials.mat_frame;
20     mesh_base.position.x=0;
21     mesh_base.renderingGroupId=2;
22     //mesh_base.layerMask=2;
23     var mesh_base1=new BABYLON.MeshBuilder.CreateSphere("mesh_base1",{diameter:10},scene);
24     mesh_base1.position.y=100;
25     mesh_base1.position.x=0;
26     mesh_base1.material=MyGame.materials.mat_frame;
27     mesh_base1.renderingGroupId=2;
28     //mesh_base1.layerMask=2;
29     var mesh_base2=new BABYLON.MeshBuilder.CreateSphere("mesh_base2",{diameter:10},scene);
30     mesh_base2.position.y=-100;
31     mesh_base2.position.x=0;
32     mesh_base2.material=MyGame.materials.mat_frame;
33     mesh_base2.renderingGroupId=2;
34 }

这是一个空旷的宇宙空间，除了天空盒与参照物没有别的东西

四、事件初始化

事件初始化代码如下：

 1 function initEvent()
 2 {
 3     console.log("初始化控制事件");
 4     InitMouse();
 5     window.addEventListener("resize", function () {
 6         if (engine) {
 7             engine.resize();
 8         }
 9     },false);
10     window.addEventListener("keydown", onKeyDown, false);//按键按下
11     window.addEventListener("keyup", onKeyUp, false);//按键抬起
12 }

//Control.js
 1 function InitMouse()
 2 {
 3     canvas.addEventListener("blur",function(evt){//监听失去焦点
 4         releaseKeyState();
 5     })
 6     canvas.addEventListener("focus",function(evt){//监听获得焦点
 7         releaseKeyState();
 8     })
 9 
10 }
11 //注意考虑到手机平台，在正式使用时以没有键盘为考虑
12 function onKeyDown(event)
13 {
14     var key=event.key
15     MyGame.obj_keystate[key]=1;
16 }
17 function onKeyUp(event)
18 {
19     var key=event.key
20     MyGame.obj_keystate[key]=0;
21 }
22 function releaseKeyState()
23 {
24     for(key in MyGame.obj_keystate)
25     {
26         MyGame.obj_keystate[key]=0;
27     }
28 }

考虑到用户可能使用触屏设备，这里没有添加对“光标锁定”（canvas.requestPointerLock）的支持，并且计划未来将键盘监听改为窗口上的gui按钮。

五、UI初始化

1、UI初始化代码如下：

1 function initUI()
2 {
3     console.log("初始化全局UI");
4     MakeFullUI(MyGame.Cameras.camera0);
5 }

 1 //FullUI.js
 2 function MakeFullUI(camera0)
 3 {
 4     var node_z=new BABYLON.TransformNode("node_z",scene);
 5     node_z.position.z=32;
 6     node_z.parent=camera0;
 7     var node_y=new BABYLON.TransformNode("node_y",scene);
 8     node_y.position.z=32;
 9     node_y.position.y=13;
10     node_y.parent=camera0;
11     var node_x=new BABYLON.TransformNode("node_x",scene);
12     node_x.position.z=32;
13     node_x.position.x=28;
14     node_x.parent=camera0;
15 
16     //绘制罗盘
17     var compassz = Campass.MakeRingZ(12,36,0,0.5,node_z);
18     var compassy = Campass.MakeRingY(28,36,0,1,node_y);
19     var compassx = Campass.MakeRingX(12,36,0,1,node_x);
20 
21     camera0.node_z=node_z;
22     camera0.node_y=node_y;
23     camera0.node_x=node_x;
24     camera0.compassz=compassz;
25     camera0.compassy=compassy;
26     camera0.compassx=compassx;
27 
28     camera0.arr_myship=[];
29     camera0.arr_friendship=[];
30     camera0.arr_enemyship=[];
31 
32 
33 }

2、UI阶段需要解决的一个问题是如何显示相机在三维空间中的姿态，经过思考决定在相机前部建立一个与相机同步运动的三维罗盘：

  1 //Campass.js 建立非通用性的罗盘，因为这不是一个可以大量实例化的类，所以不放在CHARACTER路径里
  2 var Campass={};
  3 Campass.MakeRingX=function(radius,sumpoint,posx,sizec,parent){
  4     var lines_x=[];
  5     var arr_point=[];
  6     var radp=Math.PI*2/sumpoint;
  7     for(var i=0.0;i)
  8     {
  9         var x=posx||0;
 10         var rad=radp*i;
 11         var y=radius*Math.sin(rad);
 12         var z=radius*Math.cos(rad);
 13         var pos=new BABYLON.Vector3(x,y,z)
 14         arr_point.push(pos);
 15         var pos2=pos.clone();
 16         pos2.x-=sizec;
 17         lines_x.push([pos,pos2]);
 18         var node=new BABYLON.Mesh("node_X"+rad,scene);
 19         node.parent=parent;
 20         node.position=pos2;
 21         var label = new BABYLON.GUI.Rectangle("label_X"+rad);
 22         label.background = "black";
 23         label.height = "14px";
 24         label.alpha = 0.5;
 25         label.width = "36px";
 26         //label.cornerRadius = 20;
 27         label.thickness = 0;
 28         //label.linkOffsetX = 30;//位置偏移量？？
 29         MyGame.fsUI.addControl(label);
 30         label.linkWithMesh(node);
 31         var text1 = new BABYLON.GUI.TextBlock();
 32         text1.text = Math.round((rad/Math.PI)*180)+"";
 33         text1.color = "white";
 34         label.addControl(text1);
 35         label.isVisible=true;
 36         label.text=text1;
 37 
 38     }
 39     arr_point.push(arr_point[0].clone());//首尾相连，
 40     lines_x.push(arr_point);
 41     var compassx = new BABYLON.MeshBuilder.CreateLineSystem("compassx",{lines:lines_x,updatable:false},scene);
 42     compassx.renderingGroupId=2;
 43     compassx.color=new BABYLON.Color3(0, 1, 0);
 44     compassx.useLogarithmicDepth = true;//这句应该没用
 45     //compassx.position=node_x.position.clone();
 46     compassx.parent=parent;
 47     compassx.mainpath=arr_point;
 48     compassx.sumpoint=sumpoint;
 49     compassx.radius=radius;
 50     return compassx;
 51 }
 52 
 53 Campass.MakeRingY=function(radius,sumpoint,posy,sizec,parent){
 54     var lines_y=[];
 55     var arr_point=[];
 56     var radp=Math.PI*2/sumpoint;
 57     for(var i=0.0;i)
 58     {
 59         var y=posy||0;
 60         var rad=radp*i;
 61         var z=radius*Math.sin(rad);
 62         var x=radius*Math.cos(rad);
 63         var pos=new BABYLON.Vector3(x,y,z)
 64         arr_point.push(pos);
 65         var pos2=pos.clone();
 66         pos2.y-=sizec;
 67         lines_y.push([pos,pos2]);
 68         var node=new BABYLON.Mesh("node_Y"+rad,scene);
 69         node.parent=parent;
 70         node.position=pos2;
 71         var label = new BABYLON.GUI.Rectangle("label_Y"+rad);
 72         label.background = "black";
 73         label.height = "14px";
 74         label.alpha = 0.5;
 75         label.width = "36px";
 76         //label.cornerRadius = 20;
 77         label.thickness = 0;
 78         //label.linkOffsetX = 30;//位置偏移量？？
 79         MyGame.fsUI.addControl(label);
 80         label.linkWithMesh(node);//对TransformNode使用会造成定位异常
 81         var text1 = new BABYLON.GUI.TextBlock();
 82         var num=Math.round((rad/Math.PI)*180);
 83         if(num>=90)
 84         {
 85             num-=90;
 86         }
 87         else
 88         {
 89             num+=270;
 90         }
 91         text1.text = num+"";
 92         text1.color = "white";
 93         label.addControl(text1);
 94         label.isVisible=true;
 95         label.text=text1;
 96     }
 97     arr_point.push(arr_point[0].clone());//首尾相连，
 98     lines_y.push(arr_point);
 99     var compassy = new BABYLON.MeshBuilder.CreateLineSystem("compassy",{lines:lines_y,updatable:false},scene);
100     compassy.renderingGroupId=2;
101     compassy.color=new BABYLON.Color3(0, 1, 0);
102     compassy.useLogarithmicDepth = true;
103     //compassy.position=node_y.position.clone();
104     compassy.parent=parent;
105     compassy.mainpath=arr_point;
106     compassy.sumpoint=sumpoint;
107     compassy.radius=radius;
108     return compassy;
109 }
110 
111 Campass.MakeRingZ=function(radius,sumpoint,posz,sizec,parent){
112     var lines_z=[];
113     var arr_point=[];
114     var radp=Math.PI*2/sumpoint;
115     parent.arr_node=[];
116     for(var i=0.0;i)
117     {
118         var z=posz||0;
119         var rad=radp*i;
120         var x=radius*Math.sin(rad);
121         var y=radius*Math.cos(rad);
122         var pos=new BABYLON.Vector3(x,y,z);
123         arr_point.push(pos);
124         var pos2=pos.clone();
125         pos2.normalizeFromLength(radius/(radius-sizec));//里面的数字表示坐标值除以几
126         lines_z.push([pos,pos2]);
127         var node=new BABYLON.Mesh("node_Z"+rad,scene);
128         node.parent=parent;
129         node.position=pos2;
130         parent.arr_node.push(node);
131         var label = new BABYLON.GUI.Rectangle("label_Z"+rad);
132         label.background = "black";
133         label.height = "14px";
134         label.alpha = 0.5;
135         label.width = "36px";
136         //label.cornerRadius = 20;
137         label.thickness = 0;
138         label.rotation=rad;
139         label.startrot=rad;
140         //label.linkOffsetX = 30;//位置偏移量？？
141         MyGame.fsUI.addControl(label);
142         label.linkWithMesh(node);
143         var text1 = new BABYLON.GUI.TextBlock();
144         text1.text = Math.round((rad/Math.PI)*180)+"";//不显式转换会报错
145         text1.color = "white";
146         label.addControl(text1);
147         label.isVisible=true;
148         label.text=text1;
149         node.label=label;
150     }
151     arr_point.push(arr_point[0].clone());//首尾相连，
152     lines_z.push(arr_point);
153     var compassz = new BABYLON.MeshBuilder.CreateLineSystem("compassz",{lines:lines_z,updatable:false},scene);
154     compassz.renderingGroupId=2;
155     compassz.color=new BABYLON.Color3(0, 1, 0);
156     compassz.useLogarithmicDepth = true;
157     compassz.parent=parent;
158     compassz.mainpath=arr_point;
159     compassz.sumpoint=sumpoint;
160     compassz.radius=radius;
161     return compassz;
162 }

罗盘的主体是三个圆环，圆环上有表示角度的刻度和数字，其结构示意图如下：

　　图一

　　图二

图中白色四棱锥表示相机的视锥体，compassx和compassy距相机较近的半圆正好在视锥体以外，故不可见。关于相机姿态改变时罗盘如何运动，将在初始化循环中介绍。另外也许可以将compassx和compassy的一圈设为720度，这样就可以在视野中看到所有角度的情况，或者使用类似html走马灯的gui代替立体罗盘，时间有限并未测试这些思路。

应该在屏幕顶部和右侧的中间添加两个指针，这样将能够更精确的指出当前角度，计划下个版本添加。

3、这里再说一点和Babylon.js视锥体有关的内容，Babylon.js官方文档里很少提及视锥体的属性和设置方法（似乎是封装在相机的投影矩阵方法里），于是自己编写代码测试视锥体属性：

  1 DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>改为直接用顶点构造视锥体title>
  6     <link href="../../CSS/newland.css" rel="stylesheet">
  7     <script src="../../JS/LIB/babylon.min.js">script>
  8     <script src="../../JS/LIB/babylon.gui.min.js">script>
  9     <script src="../../JS/LIB/babylonjs.loaders.min.js">script>
 10     <script src="../../JS/LIB/babylonjs.materials.min.js">script>
 11     <script src="../../JS/LIB/earcut.min.js">script>
 12     <script src="../../JS/LIB/babylonjs.proceduralTextures.min.js">script>
 13     <script src="../../JS/LIB/oimo.min.js">script>
 14     <script src="../../JS/LIB/ammo.js">script>
 15     <script src="../../JS/LIB/cannon.js">script>
 16     <script src="../../JS/LIB/dat.gui.min.js">script>
 17     <script src="../../JS/MYLIB/newland.js">script>
 18     <script src="../../JS/MYLIB/CREATE_XHR.js">script>
 19 head>
 20 <body>
 21 <div id="div_allbase">
 22     <canvas id="renderCanvas">canvas>
 23     <div id="fps" style="z-index: 302;">div>
 24 div>
 25 body>
 26 <script>
 27     var VERSION=1.0,AUTHOR="[email protected]";
 28     var machine,canvas,engine,scene,gl,MyGame;
 29     canvas = document.getElementById("renderCanvas");
 30     engine = new BABYLON.Engine(canvas, true);
 31     engine.displayLoadingUI();
 32     gl=engine._gl;
 33     scene = new BABYLON.Scene(engine);
 34     var divFps = document.getElementById("fps");
 35 
 36     window.onload=beforewebGL;
 37     function beforewebGL()
 38     {
 39         webGLStart();
 40     }
 41     function webGLStart()
 42     {
 43         createScene();
 44         //scene.debugLayer.show();
 45         MyBeforeRender();
 46     }
 47     var createScene = function () {
 48         camera0= new BABYLON.UniversalCamera("FreeCamera", new BABYLON.Vector3(0, 0, 0), scene);//FreeCamera
 49         camera0.minZ=0.001;
 50         camera0.attachControl(canvas,true);
 51         scene.activeCameras.push(camera0);
 52 
 53         var light1 = new BABYLON.HemisphericLight("hemi", new BABYLON.Vector3(0, 1, 0), scene);
 54         light1.diffuse = new BABYLON.Color3(1,1,1);//这道“颜色”是从上向下的，底部收到100%，侧方收到50%，顶部没有
 55         light1.specular = new BABYLON.Color3(0,0,0);
 56         light1.groundColor = new BABYLON.Color3(1,1,1);//这个与第一道正相反
 57 
 58         var skybox = BABYLON.Mesh.CreateBox("skyBox", 1500.0, scene);
 59         var skyboxMaterial = new BABYLON.StandardMaterial("skyBox", scene);
 60         skyboxMaterial.backFaceCulling = false;
 61         skyboxMaterial.reflectionTexture = new BABYLON.CubeTexture("../../ASSETS/IMAGE/SKYBOX/nebula", scene);
 62         skyboxMaterial.reflectionTexture.coordinatesMode = BABYLON.Texture.SKYBOX_MODE;
 63         skyboxMaterial.diffuseColor = new BABYLON.Color3(0, 0, 0);
 64         skyboxMaterial.specularColor = new BABYLON.Color3(0, 0, 0);
 65         skyboxMaterial.disableLighting = true;
 66         skybox.material = skyboxMaterial;
 67         skybox.renderingGroupId = 1;
 68         skybox.isPickable=false;
 69         skybox.infiniteDistance = true;
 70 
 71         var mat_frame = new BABYLON.StandardMaterial("mat_frame", scene);
 72         mat_frame.wireframe = true;
 73 　　　　//测试视锥体
 74         var vertexData= new BABYLON.VertexData();
 75         var w=50;//锥体底部矩形宽度的一半
 76         var h=60;//锥体底部到视点的距离
 77         var r=0.5;//锥体底部矩形的高宽比
 78         var positions=[0,0,0,-w,w*r,h,-w,-w*r,h,w,-w*r,h,w,w*r,h];
 79         var uvs=[0.5,0.5,0,0,0,1,1,1,1,0];
 80         var normals=[];
 81         var indices=[0,1,2,0,2,3,0,3,4,0,4,1];
 82         BABYLON.VertexData.ComputeNormals(positions, indices, normals);//计算法线
 83         BABYLON.VertexData._ComputeSides(0, positions, indices, normals, uvs);
 84         vertexData.indices = indices.concat();//索引
 85         vertexData.positions = positions.concat();
 86         vertexData.normals = normals.concat();//position改变法线也要改变！！！！
 87         vertexData.uvs = uvs.concat();
 88 
 89         var mesh=new BABYLON.Mesh(name,scene);
 90         vertexData.applyToMesh(mesh, true);
 91         mesh.vertexData=vertexData;
 92         mesh.renderingGroupId=2;
 93         mesh.material=mat_frame;
 94 
 95         var node_z=new BABYLON.TransformNode("node_z",scene);
 96         node_z.position.z=32;
 97         //node_z.parent=camera0;
 98         var node_y=new BABYLON.TransformNode("node_y",scene);
 99         node_y.position.z=32;
100         node_y.position.y=13;
101         //node_y.parent=camera0;
102         var node_x=new BABYLON.TransformNode("node_x",scene);
103         node_x.position.z=32;
104         node_x.position.x=28;
105         //node_x.parent=camera0;
106         //绘制罗盘
107         var compassz = Campass.MakeRingZ(12,36,0,0.5,node_z);
108         var compassy = Campass.MakeRingY(28,36,0,1,node_y);
109         var compassx = Campass.MakeRingX(12,36,0,1,node_x);
110 
111     }
112     function MyBeforeRender()
113     {
114         scene.registerBeforeRender(
115             function(){
116                 //camera0.position.x=0;
117                 //camera0.position.y=0;
118             }
119         )
120         scene.registerAfterRender(
121             function() {
122             }
123         )
124         engine.runRenderLoop(function () {
125             engine.hideLoadingUI();
126             if (divFps) {
127                 // Fps
128                 divFps.innerHTML = engine.getFps().toFixed() + " fps";
129             }
130             //lastframe=new Date().getTime();
131             scene.render();
132         });
133     }
134     var Campass={};
135     Campass.MakeRingX=function(radius,sumpoint,posx,sizec,parent){
136         var lines_x=[];
137         var arr_point=[];
138         var radp=Math.PI*2/sumpoint;
139         for(var i=0.0;i<sumpoint;i++)
140         {
141             var x=posx||0;
142             var rad=radp*i;
143             var y=radius*Math.sin(rad);
144             var z=radius*Math.cos(rad);
145             var pos=new BABYLON.Vector3(x,y,z)
146             arr_point.push(pos);
147             var pos2=pos.clone();
148             pos2.x-=sizec;
149             lines_x.push([pos,pos2]);
150             var node=new BABYLON.Mesh("node_X"+rad,scene);
151             node.parent=parent;
152             node.position=pos2;
153         }
154         arr_point.push(arr_point[0].clone());//首尾相连，不能这样相连，否则变形时会多出一个顶点！！，看来这个多出的顶点无法去掉，只能在选取时额外处理它
155         lines_x.push(arr_point);
156         var compassx = new BABYLON.MeshBuilder.CreateLineSystem("compassx",{lines:lines_x,updatable:false},scene);
157         compassx.renderingGroupId=2;
158         compassx.color=new BABYLON.Color3(0, 1, 0);
159         compassx.useLogarithmicDepth = true;
160         //compassx.position=node_x.position.clone();
161         compassx.parent=parent;
162         compassx.mainpath=arr_point;
163         compassx.sumpoint=sumpoint;
164         compassx.radius=radius;
165         return compassx;
166     }
167 
168     Campass.MakeRingY=function(radius,sumpoint,posy,sizec,parent){
169         var lines_y=[];
170         var arr_point=[];
171         var radp=Math.PI*2/sumpoint;
172         for(var i=0.0;i<sumpoint;i++)
173         {
174             var y=posy||0;
175             var rad=radp*i;
176             var z=radius*Math.sin(rad);
177             var x=radius*Math.cos(rad);
178             var pos=new BABYLON.Vector3(x,y,z)
179             arr_point.push(pos);
180             var pos2=pos.clone();
181             pos2.y-=sizec;
182             lines_y.push([pos,pos2]);
183             var node=new BABYLON.Mesh("node_Y"+rad,scene);
184             node.parent=parent;
185             node.position=pos2;
186         }
187         arr_point.push(arr_point[0].clone());//首尾相连，不能这样相连，否则变形时会多出一个顶点！！，看来这个多出的顶点无法去掉，只能在选取时额外处理它
188         lines_y.push(arr_point);
189         var compassy = new BABYLON.MeshBuilder.CreateLineSystem("compassy",{lines:lines_y,updatable:false},scene);
190         compassy.renderingGroupId=2;
191         compassy.color=new BABYLON.Color3(0, 1, 0);
192         compassy.useLogarithmicDepth = true;
193         //compassy.position=node_y.position.clone();
194         compassy.parent=parent;
195         compassy.mainpath=arr_point;
196         compassy.sumpoint=sumpoint;
197         compassy.radius=radius;
198         return compassy;
199     }
200 
201     Campass.MakeRingZ=function(radius,sumpoint,posz,sizec,parent){
202         var lines_z=[];
203         var arr_point=[];
204         var radp=Math.PI*2/sumpoint;
205         parent.arr_node=[];
206         for(var i=0.0;i<sumpoint;i++)
207         {
208             var z=posz||0;
209             var rad=radp*i;
210             var x=radius*Math.sin(rad);
211             var y=radius*Math.cos(rad);
212             var pos=new BABYLON.Vector3(x,y,z);
213             arr_point.push(pos);
214             var pos2=pos.clone();
215             pos2.normalizeFromLength(radius/(radius-sizec));//里面的数字表示坐标值除以几
216             lines_z.push([pos,pos2]);
217             var node=new BABYLON.Mesh("node_Z"+rad,scene);
218             node.parent=parent;
219             node.position=pos2;
220             parent.arr_node.push(node);
221         }
222         arr_point.push(arr_point[0].clone());//首尾相连，不能这样相连，否则变形时会多出一个顶点！！，看来这个多出的顶点无法去掉，只能在选取时额外处理它
223         lines_z.push(arr_point);
224         var compassz = new BABYLON.MeshBuilder.CreateLineSystem("compassz",{lines:lines_z,updatable:false},scene);
225         compassz.renderingGroupId=2;
226         compassz.color=new BABYLON.Color3(0, 1, 0);
227         compassz.useLogarithmicDepth = true;
228         compassz.parent=parent;
229         compassz.mainpath=arr_point;
230         compassz.sumpoint=sumpoint;
231         compassz.radius=radius;
232         return compassz;
233     }
234 script>
235 html>

从73行开始，调整h参数，当图一中的白色边界恰好消失时，场景中的锥形网格即与视锥体形状相同。测得Babylon.js默认视锥体底面矩形的高宽比为0.5，锥宽和锥高比约为100比59，水平视野角度约为80.56度（(Math.atan(50/59)*2/Math.PI)*180），因为暂时不需要，没有研究如何修改这些属性。可以在https://ljzc002.github.io/test/Spacetest/HTML/TEST2/testCylinder2.html查看这一测试页面。

在3D编程的世界里，长度并没有实际的物理意义，距离视点100大小为50的物体和距离视点200大小为100的物体看起来是一样大的，但这并不意味着我们可以任意设置物体的尺寸，在设置尺寸时我们需要考虑物体是否在视锥体的近平面和远平面之间、物体之间的相互遮挡关系、过大或过小的值是否会导致计算溢出，以及各种库对尺寸的支持，比如Babylon.js的天空盒尺寸如果设置过大（比如15000）会导致天空纹理显示异常、再比如某个物理引擎默认只支持0.1到10的尺寸范围，这类库对尺寸的限制往往缺少文档说明，需要经过测试方可得知。

六、单位初始化：

initObj方法代码如下：

 1 function initObj()
 2 {//假设一单位长度对应100m
 3     console.log("初始化单位");
 4     var ship=new BABYLON.MeshBuilder.CreateBox("ship_target",{size:5},scene);//建立一个立方体作为飞船
 5     ship.position=new BABYLON.Vector3(-5,0,0);
 6     ship.material=MyGame.materials.mat_green;
 7     ship.renderingGroupId=2;
 8     //ship.v={x:0,y:0,z:0}
 9     ship.physicsImpostor = new BABYLON.PhysicsImpostor(ship, BABYLON.PhysicsImpostor.BoxImpostor//SphereImpostor//
10         , { mass: 1, restitution: 0.0005 ,friction:0,damping:0,linearDamping:"a"}, scene);//物理仿真器
11     ship.physicsImpostor.damping=0;
12     MyGame.player.ship=ship;
13     //在罗盘里为这个ship添加一个标志
14     var camera0=MyGame.Cameras.camera0;
15     Campass.AddShip(camera0,"my",ship);
16     /*scene.onReadyObservable.add(function(){//这个应该在更早的时候执行过了！！
17         ship.physicsImpostor.physicsBody.linearDamping=0;
18         ship.physicsImpostor.physicsBody.angularDamping=0;
19     })*/
20     newland.DisposeDamping(ship);
21     //在左下角显示ship的当前位置
22     var advancedTexture = MyGame.fsUI;
23     var UiPanel = new BABYLON.GUI.StackPanel();
24     UiPanel.width = "220px";
25     UiPanel.fontSize = "14px";
26     UiPanel.horizontalAlignment = BABYLON.GUI.Control.HORIZONTAL_ALIGNMENT_LEFT;
27     UiPanel.verticalAlignment = BABYLON.GUI.Control.VERTICAL_ALIGNMENT_BOTTOM;
28     UiPanel.color = "white";
29     advancedTexture.addControl(UiPanel);
30     MyGame.player.ship.label_pos=UiPanel;//所以把这个UI相关设定放在了initObj里
31     var text1 = new BABYLON.GUI.TextBlock();
32     text1.text = ""
33     text1.color = "white";
34     text1.paddingTop = "0px";
35     text1.width = "220px";
36     text1.height = "20px";
37     UiPanel.addControl(text1);
38     UiPanel.text1=text1;
39     var text2 = new BABYLON.GUI.TextBlock();
40     text2.text = ""
41     text2.color = "white";
42     text2.paddingTop = "0px";
43     text2.width = "220px";
44     text2.height = "20px";
45     UiPanel.addControl(text2);
46     UiPanel.text2=text2;
47     var text3 = new BABYLON.GUI.TextBlock();
48     text3.text = ""
49     text3.color = "white";
50     text3.paddingTop = "0px";
51     text3.width = "220px";
52     text3.height = "20px";
53     UiPanel.addControl(text3);
54     UiPanel.text3=text3;
55 
56     var mesh_rocket=new BABYLON.MeshBuilder.CreateCylinder("mesh_rocket"//为飞船添加一个圆锥形的火箭推进器
57         ,{height:2,diameterTop:0.1,diameterBottom :1},scene);
58     mesh_rocket.renderingGroupId = 2;
59     mesh_rocket.material=MyGame.materials.mat_gray;
60     mesh_rocket.rotation=new BABYLON.Vector3(Math.PI,0,0);
61     mesh_rocket.position=new BABYLON.Vector3(0,-1,0);
62     var rocket=new Rocket();
63     ship.rocket=rocket;
64     var obj_p={ship:ship,mesh:mesh_rocket,name:"testrocket1"
65     ,mass:1000,cost2power:function(cost){return cost*1;}
66     ,pos:new BABYLON.Vector3(0,0,-3.5),rot:new BABYLON.Vector3(-Math.PI/2,0,0)};
67     rocket.init(obj_p);//初始化火箭对象
68     rocket.fire({firebasewidth:0.5,cost:1,firescaling:1});//发动火箭
69 
70     var shipb=new BABYLON.MeshBuilder.CreateBox("ship_targetb",{size:5},scene);//再建立一个飞船作为对比
71     shipb.position=new BABYLON.Vector3(5,0,0);
72     shipb.material=MyGame.materials.mat_green;
73     shipb.renderingGroupId=2;
74     //ship.v={x:0,y:0,z:0}
75     shipb.physicsImpostor = new BABYLON.PhysicsImpostor(shipb, BABYLON.PhysicsImpostor.BoxImpostor//SphereImpostor//
76         , { mass: 1, restitution: 0.0005 ,friction:0}, scene);//物理仿真器
77     shipb.mass=1000000000;
78     MyGame.player.shipb=shipb;
79     //在罗盘里为这个ship添加一个标志
80     var camera0=MyGame.Cameras.camera0;
81     Campass.AddShip(camera0,"my",shipb);
82     newland.DisposeDamping(shipb);
83 
84     var mesh_rocketb=new BABYLON.MeshBuilder.CreateCylinder("mesh_rocketb"
85         ,{height:2,diameterTop:0.1,diameterBottom :1},scene);
86     mesh_rocketb.renderingGroupId = 2;
87     mesh_rocketb.material=MyGame.materials.mat_gray;
88     mesh_rocketb.rotation=new BABYLON.Vector3(Math.PI,0,0);
89     mesh_rocketb.position=new BABYLON.Vector3(0,-1,0);
90     var rocketb=new Rocket();
91     shipb.rocket=rocketb;
92     var obj_pb={ship:shipb,mesh:mesh_rocketb,name:"testrocket1b"
93         ,mass:1000,cost2power:function(cost){return cost*1;}
94         ,pos:new BABYLON.Vector3(0,0,-3.5),rot:new BABYLON.Vector3(-Math.PI/2,0,0)};
95     rocketb.init(obj_pb);
96     rocketb.fire({firebasewidth:0.5,cost:1,firescaling:1});
97 }

1、首先建立了一个立方体网格代表宇宙飞船，然后在第九行为飞船设置物理仿真器。这里需要注意damping参数，这个参数表示物理引擎对加速度的无条件阻碍，默认值为0.1，与表示摩擦系数的friction参数不同，即使仿真器不与任何其他物体接触也会一直受到这一削减作用，具体表现为加速度每秒钟减少0.1直到减少为0，这也就意味着加速度小于0.1的力不会对物体造成任何影响。按照Babylon.js的设计初衷，这一属性应该能通过PhysicsImpostor的构造函数设置，但遗憾的是随着物理引擎的升级迭代，在构造函数中使用这一参数并没有任何作用，使用者必须自己前往物理引擎的底层修改这一参数（事实上是两个参数：线速度衰减和角速度衰减）：

 1 //移除网格的物理外套的默认加速度衰减
 2 newland.DisposeDamping=function(mesh)
 3 {
 4     //cannon使用
 5     mesh.physicsImpostor.physicsBody.linearDamping=0;
 6     mesh.physicsImpostor.physicsBody.angularDamping=0;
 7     //ammo使用
 8     if(mesh.physicsImpostor.physicsBody.setDamping)
 9     {
10         mesh.physicsImpostor.physicsBody.setDamping(0,0);
11     }
12 }

以上是cannon和ammo的衰减移除方法，oimo似乎缺少这方面的限制。

这里再介绍一下physicsImpostor和physicsBody的关系，physicsImpostor是Babylon.js建立的对象，我们可以通过它用差不多的方式操作多种物理引擎，而physicsBody则是指向具体物理引擎底层数据的指针，每一种物理引擎的physicsBody结构都各不相同。关于二者关系的详细说明可以参考官方论坛https://forum.babylonjs.com/t/a-question-on-how-applyforce-work/5841。

2、接下来需要在罗盘里指示出飞船的方向，在Campass.js中

 1 Campass.AddShip=function(camera0,type,ship)
 2 {
 3     //渲染组3突出显示
 4     var vec_ship=ship.position.clone().subtract(camera0.position);//由视点指向飞船的向量
 5     vec_ship=newland.VecTo2Local(vec_ship,camera0);//转化为局部坐标系坐标
 6     var pointerz= new BABYLON.MeshBuilder.CreateSphere("pointerz_"+ship.name,{diameter:1},scene);//球体标记
 7     pointerz.parent=camera0.compassz.parent;
 8     pointerz.position=new BABYLON.Vector3(vec_ship.x,vec_ship.y,0).normalize().scale(camera0.compassz.radius);
 9     pointerz.renderingGroupId=3;
10     ship.pointerz=pointerz;
11     if(type=="my")//自己控制的飞船显示为绿色
12     {
13         camera0.arr_myship.push(ship);
14         pointerz.material=MyGame.materials.mat_green;
15     }
16     else if(type=="friend")//友方为蓝色
17     {
18         camera0.arr_friendship.push(ship);
19         pointerz.material=MyGame.materials.mat_blue;
20     }
21     else if(type=="enemy")//敌方为红色
22     {
23         camera0.arr_enemyship.push(ship);
24         pointerz.material=MyGame.materials.mat_red;
25     }
26     var label = new BABYLON.GUI.Rectangle("label_pointerz_"+ship.name);//文本框
27     label.background = "black";
28     label.height = "14px";
29     label.alpha = 0.5;
30     label.width = "120px";
31     label.thickness = 0;
32     //label.linkOffsetX = 30;//位置偏移量？？
33     MyGame.fsUI.addControl(label);
34     label.linkWithMesh(pointerz);
35     var text1 = new BABYLON.GUI.TextBlock();
36     text1.text = ship.name;
37     text1.color = "white";
38     label.addControl(text1);
39     label.isVisible=true;
40     label.text=text1;
41     pointerz.label=label;
42 }
43 Campass.ComputePointerPos=function(ship)//刷新飞船的方位
44 {
45     var camera0=MyGame.Cameras.camera0;
46     var pointerz=ship.pointerz;
47     var vec_ship=ship.position.clone().subtract(camera0.position);
48     /*var v=new BABYLON.Vector3(vec_ship.x,vec_ship.y,0)
49     var m = camera0.getWorldMatrix();
50     var v = BABYLON.Vector3.TransformCoordinates(vector, m);*/
51     vec_ship=newland.VecTo2Local(vec_ship,camera0);
52     pointerz.position=(new BABYLON.Vector3(vec_ship.x,vec_ship.y,0)).normalize().scale(camera0.compassz.radius);
53 
54 }

3、21到54行在屏幕左下角建立三个文本框显示飞船的位置。

4、56到68行为飞船添加了一个火箭推进器，Rocket类在Rocket2.js文件中：

 1 //工质发动机（粒子系统版，低粒子量、低亮度、低闪烁）
 2 Rocket=function()
 3 {
 4 
 5 }
 6 Rocket.prototype.init=function(param)
 7 {
 8     param = param || {};
 9     this.name=param.name;
10     this.ship=param.ship;
11     this.node=new BABYLON.TransformNode("node_rocket_"+this.name,scene);//用变换节点代替空网格
12     this.node.position=param.pos;
13     this.node.rotation=param.rot;
14     this.node.parent=this.ship;
15     this.mesh=param.mesh;//喷口网格，也可能只是instance
16     this.mesh.parent=this.node;
17     this.mass=param.mass;
18     this.ship.mass+=this.mass
19     this.cost2power=param.cost2power;//供能转换为推力的公式
20     this.cost2demage=param.cost2demage;//供能对引擎造成损坏的公式，其中包括对故障率的影响
21     this.hp=param.hp;
22     this.cost=null;//当前供能
23     this.power=null;//当前推力
24     this.failurerate=param.failurerate;//故障率参数
25 
26 
27     //this.scaling=param.scaling||1;
28 
29     this.rotxl=param.rotxl;//引擎在x轴上的摆动范围
30     this.rotyl=param.rotyl;
31     this.rotzl=param.rotzl;
32 
33 
34 }
35 Rocket.prototype.fire=function(param)
36 {
37     this.cost=param.cost;
38     this.power=this.cost2power(this.cost);
39     this.firebasewidth=param.firebasewidth||1;//火焰底部的宽度
40     this.firescaling=param.firescaling||1;//喷射火焰尺寸
41 
42     var particleSystem;
43     particleSystem = new BABYLON.GPUParticleSystem("particles", { capacity:50000 }, scene);//粒子系统，可用粒子为50000个
44     particleSystem.activeParticleCount = 50000;//活动粒子数50000
45     particleSystem.emitRate = 10000;//每秒发射10000个
46     particleSystem.particleTexture = new BABYLON.Texture("../../ASSETS/IMAGE/TEXTURES/fire/flare.png", scene);//粒子纹理
47     particleSystem.maxLifeTime = 10;//最大生存时间
48     particleSystem.minSize = 0.01//*this.firescaling;
49     particleSystem.maxSize = 0.1//*this.firescaling;
50     particleSystem.emitter = this.node;
51 
52     var radius = this.firebasewidth;
53     var angle = Math.PI;
54     var coneEmitter = new BABYLON.ConeParticleEmitter(radius, angle);//锥形发射器
55     coneEmitter.radiusRange = 1;
56     coneEmitter.heightRange = 0;
57     particleSystem.particleEmitterType = coneEmitter;
58 
59     particleSystem.renderingGroupId=2;
60     particleSystem.start();//启动粒子系统
61     //var force=new BABYLON.Vector3(0,-this.power*100000/this.ship.mass,0);
62     var force=new BABYLON.Vector3(0,-1,0);
63     force=newland.vecToGlobal(force,this.node);
64     force=force.subtract(this.node.getAbsolutePosition()).scale(this.power);
65     //this.ship.physicsImpostor.applyForce(force,this.node.position)//
66     //this.ship.physicsImpostor.applyImpulse(force,new BABYLON.Vector3(0,0,-3.5))//这个相当于只加速一秒
67     //this.ship.physicsImpostor.applyForce(force,new BABYLON.Vector3(0,0,-3.5))//Oimo doesn't support applying force. Using impule instead.
68 
69     var rocket=this;
70     //this.ship.physicsImpostor.applyImpulse(new BABYLON.Vector3(0,0,1),new BABYLON.Vector3(0,0,-2.5));
71     /*MyGame.AddNohurry("task_rocketfire_"+this.name,1000,0,//每秒执行一次
72         function(){
73             var force=new BABYLON.Vector3(0,-1,0);
74             force=newland.vecToGlobal(force,rocket.node);
75             force=force.subtract(rocket.node.getAbsolutePosition()).scale(rocket.power);
76             rocket.ship.physicsImpostor.applyForce(force,rocket.node.getAbsolutePosition());
77         },0)*/
78     scene.registerAfterRender(function(){//每帧渲染后执行
79         var force=new BABYLON.Vector3(0,-1,0);
80         force=newland.vecToGlobal(force,rocket.node);
81         force=force.subtract(rocket.node.getAbsolutePosition()).scale(rocket.power);
82         var pos=rocket.node.getAbsolutePosition();
83         rocket.ship.physicsImpostor.applyForce(force,pos);
84         console.log(rocket.ship.physicsImpostor.getLinearVelocity());
85     })
86 
87     //this.ship.physicsImpostor.applyForce(force,this.node.getAbsolutePosition());//只执行一次
88 }

火箭推进器由一个圆锥形的喷口和从喷口喷出的粒子组成，注意第50行的particleSystem.emitter = this.node;和第57行的particleSystem.particleEmitterType = coneEmitter;的区别，前者表示整个粒子系统随着火箭移动，后者则表示粒子发射区域的形状。使用变换节点代替空网格的原因可以参考https://www.cnblogs.com/ljzc002/p/10005921.html，粒子系统的使用方法可以查看：https://ljzc002.github.io/BABYLON101/15Particles%20-%20Babylon.js%20Documentation.htm。第43行为了提高渲染效率使用了GPU粒子系统，在实际使用时可以考虑进一步降低可用粒子数量和粒子发射率。

另一种思路是使用火焰材质或火焰纹理而非粒子来表现火箭的尾焰，在一些情况下这种尾焰表现的很不错（Rocket.js）：

跳动的火焰和静谧的太空形成了奇妙的对比

但是这种基于蒙版贴图的纹理在转变观察角度时会产生一系列的问题，并且也无法模拟飞船转弯时的拖尾效果，因此没有采用。

从第62行开始为火箭施加推力：

a、因为Babylon.js建立的圆锥体默认底面朝下，建立后经过旋转变换并继承父物体的姿态后才变成现在指向飞船后部的姿态，所以第62到64行首先建立一个垂直向下的力，然后对这个力施加火箭的世界矩阵，又因为火箭的世界矩阵中包含的位置变化会影响力向量，错误的改变力的大小和方向，所以再将力向量减去火箭的绝对位置，如此就得到了火箭喷力在全局坐标系下的方向，然后再乘以喷力大小即可得火箭喷力向量。

b、接下来为飞船的物理仿真器施加力作用，Babylon.js为用户提供了两种施加外力的方式（https://doc.babylonjs.com/how_to/forces#impulses）——applyImpulse与applyForce，二者的参数都是全局坐标系中的力向量和力作用点，每次执行前者相当于以这种参数配置加速仿真器1秒钟，后者每执行一次则表示以这种参数配置加速物体当前帧的时间，显然后者的加速更为精确平滑，所以选择使用applyForce方法。又因为Oimo引擎不支持applyForce（内部自动替换为applyImpulse），选用Ammo引擎。另外applyImpulse与applyForce的力向量参数单位都是“力”，飞船的质量不同将会产生不同的加速度。

出于省事，这里没有把火箭本身的质量加到飞船质量中，也没有考虑火箭推进对工质质量的消耗。

5、接着建立一个类似的飞船shipb作为对比

七、主循环初始化：

 1 var posz_temp1=0;//上一次的位置
 2 var posz_temp2=0;//上一次的速度
 3 var posz_temp1b=0;//上一次的位置
 4 var posz_temp2b=0;//上一次的速度
 5 function initLoop()
 6 {
 7     console.log("初始化主循环");
 8     var _this=MyGame;
 9     MyGame.AddNohurry("task_logpos",1000,0,function(){//每秒钟输出一些信息并且更新飞船的位置显示
10         var posz=MyGame.player.ship.position.z;
11         var poszb=MyGame.player.shipb.position.z;
12         //console.log("---"+(new Date().getTime())+"\n"+posz+"_"+(posz-posz_temp1)+"_"+(posz-posz_temp1-posz_temp2)+"@"+MyGame.player.ship.physicsImpostor.getLinearVelocity()
13         //    +"\n"+poszb+"_"+(poszb-posz_temp1b)+"_"+(poszb-posz_temp1b-posz_temp2b)+"@"+MyGame.player.shipb.physicsImpostor.getLinearVelocity());
14         //console.log(MyGame.player.ship.physicsImpostor.getLinearVelocity());
15         posz_temp2=posz-posz_temp1;
16         posz_temp1=posz;
17         posz_temp2b=poszb-posz_temp1b;
18         posz_temp1b=poszb;
19         var ship_main=MyGame.player.ship;
20         var UiPanel=ship_main.label_pos;
21         UiPanel.text1.text="x:"+ship_main.position.x;
22         UiPanel.text2.text="y:"+ship_main.position.y;
23         UiPanel.text3.text="z:"+ship_main.position.z;
24     },0)//name,delay,lastt,todo,count
25 
26     scene.registerBeforeRender(
27         function(){
28 
29             var camera0=MyGame.Cameras.camera0;
30             var node_z=camera0.node_z;
31             var node_y=camera0.node_y;
32             var node_x=camera0.node_x;
33 
34             node_z.rotation.z=-camera0.rotation.z;//反转罗盘
35             var len=node_z.arr_node.length;
36             for(var i=0;i)
37             {
38                 var label=node_z.arr_node[i].label;
39                 label.rotation=label.startrot+camera0.rotation.z;
40             }
41             node_y.rotation.y=-camera0.rotation.y;
42             node_x.rotation.x=-camera0.rotation.x;
43             //舰船标志更新放在每一帧里还是每秒执行一次？
44             var len1=camera0.arr_myship.length;
45             for(var i=0;i)
46             {
47                 var ship=camera0.arr_myship[i];
48                 Campass.ComputePointerPos(ship);
49             }
50             var len1=camera0.arr_friendship.length;
51             for(var i=0;i)
52             {
53                 var ship=camera0.arr_friendship[i];
54                 Campass.ComputePointerPos(ship);
55             }
56             var len1=camera0.arr_enemyship.length;
57             for(var i=0;i)
58             {
59                 var ship=camera0.arr_enemyship[i];
60                 Campass.ComputePointerPos(ship);
61             }
62 
63 
64         }
65     )
66     scene.registerAfterRender(
67         function() {
68             MyGame.HandleNoHurry();//为了和物理引擎相合把它放在这里？
69             var camera0=MyGame.Cameras.camera0;
70             if(MyGame.obj_keystate.q==1)
71             {
72                 camera0.rotation.z+=0.01;
73             }
74             if(MyGame.obj_keystate.e==1)
75             {
76                 camera0.rotation.z-=0.01;//同时按就相互抵消了
77             }
78         }
79     )
80     engine.runRenderLoop(function () {
81         engine.hideLoadingUI();
82         if (divFps) {
83             // Fps
84             divFps.innerHTML = engine.getFps().toFixed() + " fps";
85         }
86         //MyGame.HandleNoHurry();
87         //lastframe=new Date().getTime();
88         scene.render();
89     });
90 
91 }

1、三种循环

在交互式3D场景中需要周期性做的事大概有三类：

一是必不可少的渲染循环，在这方面Babylon.js已经为我们做好了准备。在Babylon.js中每次渲染都可以分为BeforeRender（26-65）、render（80-89）、AfterRender（66-79）三个阶段，你可以在每个阶段的行内函数里添加需要在每一帧的对应阶段执行的代码，主线程按照一定的频率（一般为60HZ）执行渲染循环。因为引擎只会在一帧里的所有代码执行完毕后执行下一帧，所以如果某一帧内的代码执行时间+显卡渲染时间超过了1/60s，则下一帧的执行将会被延迟，进而导致场景帧率降低。另外，值得注意的是registerBeforeRender和registerAfterRender并没有必要一定和engine.runRenderLoop写在一起，这里这样做只是为了程序规整，如果需要完全可以在你喜欢的地方注册多个register，正如Rocket2.js里所作的一样。

二是每隔一段时间做一次的低耗时任务，比如显示飞船当前的位置或者输出飞船当前的线速度，我们完全没有必要每一帧都做这些事，每一秒钟做一次就是很好的选择。为此我编写了Nohurry方法：

 1 //Game.js
 2 Game.prototype={
 3     AddNohurry:function(name,delay,lastt,todo,count)//添加周期性任务
 4     {
 5         var _this=this;
 6        
 7         var len=_this.list_nohurry.length;
 8         if(len==0)
 9         {
10             _this.list_nohurry.push({delay:delay,lastt:lastt,todo:todo,name:name
11                 ,count:count})
12         }
13         else {
14             for(var i=0;i)
15             {
16                 var obj_nohurry=_this.list_nohurry[i];
17                 if(obj_nohurry.name==name)//如果已经有同名任务
18                 {
19                     return;
20                 }
21                 if(delay>obj_nohurry.delay)//如果新任务耗时更长
22                 {
23                     continue;
24                 }
25                 else {
26                     _this.list_nohurry.splice(i,0,{delay:delay,lastt:lastt,todo:todo,name:name
27                         ,count:count});
28                     break;
29                 }
30             }
31         }
32 
33     },
34     RemoveNohurry:function(name)
35     {
36         //delete this.list_nohurry[name];
37     },
38     HandleNoHurry:function()//执行周期性任务
39     {
40         var _this=this;
41         if( _this.flag_startr==0)//开始渲染并且地形初始化完毕！！
42         {
43             engine.hideLoadingUI();
44             _this.flag_startr=1;
45             _this.lastframet=new Date().getTime();
46             _this.firstframet=_this.lastframet;
47             _this.DeltaTime=0;
48         }
49         else
50         {
51             _this.currentframet=new Date().getTime();
52             _this.DeltaTime=_this.currentframet-_this.lastframet;//取得两帧之间的时间
53             _this.lastframet=_this.currentframet;
54             /*_this.nohurry+=_this.DeltaTime;
55 
56             if(MyGame&&_this.nohurry>1000)//每一秒进行一次导航修正
57             {
58                 _this.nohurry=0;
59 
60             }*/
61             //var time_start=_this.currentframet-_this.firstframet;//当前时间到最初过了多久
62             for(var i=0;i<_this.list_nohurry.length;i++)
63             {
64                 var obj_nohurry=_this.list_nohurry[i];
65                 if(obj_nohurry.lastt==0)
66                 {
67                     obj_nohurry.lastt=new Date().getTime();
68                 }
69                 else
70                 {
71                     var time_start=_this.currentframet-obj_nohurry.lastt;
72                     if(time_start>obj_nohurry.delay)//如果经过的时间超过了每次执行周期乘以执行次数加一，则执行一次
73                     {
74                         obj_nohurry.todo();
75                         obj_nohurry.count++;
76                         obj_nohurry.lastt=_this.currentframet;
77                         //改变策略，把耗时操作放到work线程里执行，再主线程执行所有任务，包括调用work线程
78                         //break;//每一帧最多只做一个费时任务，周期更短的任务放在队列前面，获得更多执行机会
79                     }
80                 }
81 
82             }
83             if(_this.flag_starta==1)//如果开始进行ai计算，否则只处理和基本ui有关的内容
84             {
85 
86             }
87         }
88     }
89 }

这段代码的思路是在MyGame中维护一个任务数组list_nohurry和当前时间，同时在数组里的每个任务中维护一个上次执行时间，在渲染循环的每一帧进行检查，如果当前时间-上次执行时间>=任务执行周期则执行对应的任务。

三是有时需要做的耗时较长可能拖慢主线程的任务（比如复杂的AI运算）可以使用html5 workers线程处理这种任务：

 1 function initAI()//接下来添加懒惰雷达和工质喷射控制-》雷达耗时较少，且对主线程有变量要求，所以放在nohurry里面
 2 {
 3     MyGame.worker=new Worker("AIThread.js");
 4     MyGame.worker.postMessage("start");
 5 
 6     MyGame.worker.onmessage=function(event)
 7     {
 8         console.log(event.data);
 9     }
10 
11 }

AIThread.js：（放在html的同目录）

 1 var flag_thinking=false;
 2 var time_now=0;
 3 var time_last=0;
 4 
 5 onmessage=function(event)
 6 {
 7     var data=event.data;
 8     if(data=="start"&&!flag_thinking)
 9     {
10         flag_thinking=true;
11         //console.log("开始思考");
12         Think()
13     }
14     else if(data=="stop"){
15         flag_thinking=false;
16         close();
17     }
18 }
19 function Think()
20 {
21     if(flag_thinking)
22     {//如果正在思考
23         time_now=new Date().getTime();
24         if(time_last!=0)
25         {
26             if(time_now-time_last>1000)//每一秒执行一次
27             {
28                 time_last=time_now;
29                 //console.log(time_now);
30                 postMessage(time_now);
31             }
32         }
33         else{
34             time_last=time_now;
35         }
36 
37         requestAnimationFrame(Think);//不可用window但可用requestAnimationFrame！
38     }
39 
40 }

耗时较长的任务可以放在这个线程里和主线程分开执行，如此可以充分利用多线程计算机的计算力降低主线程渲染延迟。

但需要注意的是，从概念定义上讲线程之间应该可以相互访问对方的内存，但出于保护线程安全的目的Chrome限制了主线程和workers线程之间的内存调用，workers线程操作

window、document等主线程固有对象会报错，访问主线程命名空间中的自建对象则为undefiend，用户只能通过postMessage方法在线程之间相互发送信息或者使用navigator对象共享数据，当然也可以通过网络或者session、localStorage共享数据，但速度可能更慢。

本demo程序中并没有长耗时任务，所以workers线程什么也没做。

2、在scene.registerBeforeRender里设置每一帧根据相机的姿态反转罗盘，使得罗盘能够正确指示相机当前方向（33-42），同时刷新飞船在罗盘上的指示物。

在scene.registerAfterRender里设置了对按键q和e的相应，如果这一帧内按键状态为按下则左右倾斜相机，这里的倾斜有两种思路：一是如demo中每一帧变化固定的角度，缺点是帧数变化会导致操纵效果变化，二是用角度变化速度乘以本帧时间，缺点是不利于断点调试程序。

八、总结：以上完成了宇宙飞船模拟的一些技术验证，下一步将使用网格拼装出“更像”一些的飞船，并编写一些飞船内部的处理逻辑（如能量分配、模块耐久度），编写一套专用的火箭控制UI，再添加WebSocket联网功能。计划最终编写出一个类似战舰世界的宇宙飞船模拟程序。

你可能感兴趣的:(基于Babylon.js编写宇宙飞船模拟程序1——程序基础结构、物理引擎使用、三维罗盘)

斤斤计较的婚姻到底有多难？白心之岂必有为
很多人私聊我会问到在哪个人群当中斤斤计较的人最多？我都会回答他，一般婚姻出现问题的斤斤计较的人士会非常多，以我多年经验，在婚姻落的一塌糊涂的人当中，斤斤计较的人数占比在20～30%以上，也就是说10个婚姻出现问题的斤斤计较的人有2-3个有多不减。在婚姻出问题当中，有大量的心理不平衡的、尖酸刻薄的怨妇。在婚姻中仅斤斤计较有两种类型：第一种是物质上的，另一种是精神上的。在物质与精神上抠门已经严重的影响
机器学习与深度学习间关系与区别 ℒℴѵℯ心·动ꦿ໊ོ꫞ 人工智能学习深度学习 python
一、机器学习概述定义机器学习（MachineLearning,ML）是一种通过数据驱动的方法，利用统计学和计算算法来训练模型，使计算机能够从数据中学习并自动进行预测或决策。机器学习通过分析大量数据样本，识别其中的模式和规律，从而对新的数据进行判断。其核心在于通过训练过程，让模型不断优化和提升其预测准确性。主要类型1.监督学习（SupervisedLearning）监督学习是指在训练数据集中包含输入
android系统selinux中添加新属性property 辉色投像
1.定位/android/system/sepolicy/private/property_contexts声明属性开头：persist.charge声明属性类型：u:object_r:system_prop:s0图12.定位到android/system/sepolicy/public/domain.te删除neverallow{domain-init}default_prop:property
底层逆袭到底有多难，不甘平凡的你准备好了吗？让吴起给你说说造命者说
底层逆袭到底有多难，不甘平凡的你准备好了吗？让吴起给你说说我叫吴起，生于公元前440年的战国初期，正是群雄并起、天下纷争不断的时候。后人说我是军事家、政治家、改革家，是兵家代表人物。评价我一生历仕鲁、魏、楚三国，通晓兵家、法家、儒家三家思想，在内政军事上都有极高的成就。周安王二十一年（公元前381年），因变法得罪守旧贵族，被人乱箭射死。我出生在卫国一个“家累万金”的富有家庭，从年轻时候起就不甘平凡
2020-01-25 晴岚85
郑海燕坚持分享590天2020.1.24在生活中只存在两个问题。一个问题是：你知道想要达成的目标是什么，但却不知道如何才能达成；另一个问题是：你不知道你的目标是什么。前一个是行动的问题，后一个是结果的问题。通过制定具体的下一步行动，可以解决不知道如何开始行动的问题。而通过去想象结果，对结果做预估，可以解决找不着目标的问题。对于所有吸引我们注意力，想要完成的任务，你可以先想象一下，预期的结果究竟是什
【iOS】MVC设计模式 Magnetic_h ios mvc 设计模式 objective-c 学习 ui
MVC前言如何设计一个程序的结构，这是一门专门的学问，叫做"架构模式"（architecturalpattern），属于编程的方法论。MVC模式就是架构模式的一种。它是Apple官方推荐的App开发架构，也是一般开发者最先遇到、最经典的架构。MVC各层controller层Controller/ViewController/VC（控制器）负责协调Model和View，处理大部分逻辑它将数据从Mod
element实现动态路由+面包屑软件技术NINI vue案例 vue.js 前端
el-breadcrumb是ElementUI组件库中的一个面包屑导航组件，它用于显示当前页面的路径，帮助用户快速理解和导航到应用的各个部分。在Vue.js项目中，如果你已经安装了ElementUI，就可以很方便地使用el-breadcrumb组件。以下是一个基本的使用示例：安装ElementUI（如果你还没有安装的话）:你可以通过npm或yarn来安装ElementUI。bash复制代码npmi
10月|愿你的青春不负梦想-读书笔记-01 Tracy的小书斋
本书的作者是俞敏洪，大家都很熟悉他了吧。俞敏洪老师是我行业的领头羊吧，也是我事业上的偶像。本日摘录他书中第一章中的金句：『一个人如果什么目标都没有，就会浑浑噩噩，感觉生命中缺少能量。能给我们能量的，是对未来的期待。第一件事，我始终为了进步而努力。与其追寻全世界的骏马，不如种植丰美的草原，到时骏马自然会来。第二件事，我始终有阶段性的目标。什么东西能给我能量？答案是对未来的期待。』读到这里的时候，我便
C语言宏函数南林yan C语言 c语言
一、什么是宏函数？通过宏定义的函数是宏函数。如下，编译器在预处理阶段会将Add(x,y)替换为((x)*(y))#defineAdd(x,y)((x)*(y))#defineAdd(x,y)((x)*(y))intmain(){inta=10;intb=20;intd=10;intc=Add(a+d,b)*2;cout<
谢谢你们，爱你们！鹿游儿
昨天家人去泡温泉，二个孩子也带着去，出发前一晚，匆匆下班，赶回家和孩子一起收拾。饭后，我拿出笔和本子（上次去澳门时做手帐的本子）写下了1\2\3\4\5\6\7\8\9,让后让小壹去思考，带什么出发去旅游呢？她在对应的数字旁边画上了，泳衣、泳圈、肖恩、内衣内裤、tapuy、拖鞋……画完后，就让她自己对着这个本子，将要带的，一一带上，没想到这次带的书还是这本《便便工厂》(晚上姑婆发照片过来，妹妹累得
C语言如何定义宏函数？小九格物 c语言
在C语言中，宏函数是通过预处理器定义的，它在编译之前替换代码中的宏调用。宏函数可以模拟函数的行为，但它们不是真正的函数，因为它们在编译时不会进行类型检查，也不会分配存储空间。宏函数的定义通常使用#define指令，后面跟着宏的名称和参数列表，以及宏展开后的代码。宏函数的定义方式：1.基本宏函数：这是最简单的宏函数形式，它直接定义一个表达式。#defineSQUARE(x)((x)*(x))2.带参
微服务下功能权限与数据权限的设计与实现 nbsaas-boot 微服务 java 架构
在微服务架构下，系统的功能权限和数据权限控制显得尤为重要。随着系统规模的扩大和微服务数量的增加，如何保证不同用户和服务之间的访问权限准确、细粒度地控制，成为设计安全策略的关键。本文将讨论如何在微服务体系中设计和实现功能权限与数据权限控制。1.功能权限与数据权限的定义功能权限：指用户或系统角色对特定功能的访问权限。通常是某个用户角色能否执行某个操作，比如查看订单、创建订单、修改用户资料等。数据权限：
理解Gunicorn：Python WSGI服务器的基石范范0825 ipython linux 运维
理解Gunicorn：PythonWSGI服务器的基石介绍Gunicorn，全称GreenUnicorn，是一个为PythonWSGI（WebServerGatewayInterface）应用设计的高效、轻量级HTTP服务器。作为PythonWeb应用部署的常用工具，Gunicorn以其高性能和易用性著称。本文将介绍Gunicorn的基本概念、安装和配置，帮助初学者快速上手。1.什么是Gunico
2021年12月19日，春蕾教育集团团建活动感受——黄晓丹黄错错加油
感受:1.从陌生到熟悉的过程。游戏环节让我们在轻松的氛围中得到了锻炼，也增长了不少知识。2.游戏过程中，我们贡献的是个人力量，展现的是团队的力量。它磨合的往往不止是工作的熟悉，更是观念上契合度的贴近。3.这和工作是一样的道理。在各自的岗位上，每个人摆正自己的位置、各司其职充分发挥才能，并团结一致劲往一处使，才能实现最大的成功。新知:1.团队精神需要不断地创新。过去，人们把创新看作是冒风险，现在人们
Cell Insight | 单细胞测序技术又一新发现，可用于HIV-1和Mtb共感染个体诊断尐尐呅
结核病是艾滋病合并其他疾病中导致患者死亡的主要原因。其中结核病由结核分枝杆菌（Mycobacteriumtuberculosis,Mtb）感染引起，获得性免疫缺陷综合症（艾滋病）由人免疫缺陷病毒（Humanimmunodeficiencyvirustype1,HIV-1）感染引起。国家感染性疾病临床医学研究中心/深圳市第三人民医院张国良团队携手深圳华大生命科学研究院吴靓团队，共同研究得出单细胞测序
c++ 的iostream 和 c++的stdio的区别和联系黄卷青灯77 c++算法开发语言 iostream stdio
在C++中，iostream和C语言的stdio.h都是用于处理输入输出的库，但它们在设计、用法和功能上有许多不同。以下是两者的区别和联系：区别1.编程风格iostream（C++风格）：C++标准库中的输入输出流类库，支持面向对象的输入输出操作。典型用法是cin（输入）和cout（输出），使用>操作符来处理数据。更加类型安全，支持用户自定义类型的输入输出。#includeintmain(){in
《投行人生》读书笔记小蘑菇的树洞
《投行人生》----作者詹姆斯-A-朗德摩根斯坦利副主席40年的职业洞见-很短小精悍的篇幅，比较适合初入职场的新人。第一部分成功的职业生涯需要规划1.情商归为适应能力分享与协作同理心适应能力，更多的是自我意识，你有能力识别自己的情并分辨这些情绪如何影响你的思想和行为。2.对于初入职场的人的建议，细节，截止日期和数据很重要截止日期，一种有效的方法是请老板为你所有的任务进行优先级排序。和老板喝咖啡的好
《策划经理回忆录之二》路基雅虎
话说三年变六年，飘了，飘了……眨眼，2013年5月，老吴回到了他的家乡——油城从新开启他的工作幻想症生涯。很庆幸，这是一家很有追求，同时敢于尝试的，且实力不容低调的新星房企——金源置业(前身泰源置业)更值得庆幸的是第一个盘就是油城十路的标杆之一:金源盛世。2013年5月，到2015年11月，两年的陪伴，迎来了一场大爆发。2000个筹，5万/筹，直接回笼1个亿！！！这……让我开始认真审视这座看似五线
Long类型前后端数据不一致 igotyback 前端
响应给前端的数据浏览器控制台中response中看到的Long类型的数据是正常的到前端数据不一致前后端数据类型不匹配是一个常见问题，尤其是当后端使用Java的Long类型（64位）与前端JavaScript的Number类型（最大安全整数为2^53-1，即16位）进行数据交互时，很容易出现精度丢失的问题。这是因为JavaScript中的Number类型无法安全地表示超过16位的整数。为了解决这个问
如何在 Fork 的 GitHub 项目中保留自己的修改并同步上游更新？github_fork_update iBaoxing github
如何在Fork的GitHub项目中保留自己的修改并同步上游更新？在GitHub上Fork了一个项目后，你可能会对项目进行一些修改，同时原作者也在不断更新。如果想要在保留自己修改的基础上，同步原作者的最新更新，很多人会不知所措。本文将详细讲解如何在不丢失自己改动的情况下，将上游仓库的更新合并到自己的仓库中。问题描述假设你在GitHub上Fork了一个项目，并基于该项目做了一些修改，随后你发现原作者对
扫地机类清洁产品之直流无刷电机控制悟空胆好小清洁服务机器人单片机人工智能
扫地机类清洁产品之直流无刷电机控制1.1前言扫地机产品有很多的电机控制，滚刷电机1个，边刷电机1-2个，清水泵电机，风机一个，部分中高端产品支持抹布功能，也就是存在抹布盘电机，还有追觅科沃斯石头等边刷抬升电机，滚刷抬升电机等的，这些电机有直流有刷电机，直接无刷电机，步进电机，电磁阀，挪动泵等不同类型。电机的原理，驱动控制方式也不行。接下来一段时间的几个文章会作个专题分析分享。直流有刷电机会自动持续
Linux下QT开发的动态库界面弹出操作（SDL2） 13jjyao QT类 qt 开发语言 sdl2 linux
需求：操作系统为linux，开发框架为qt，做成需带界面的qt动态库，调用方为java等非qt程序难点：调用方为java等非qt程序，也就是说调用方肯定不带QApplication::exec()，缺少了这个，QTimer等事件和QT创建的窗口将不能弹出(包括opencv也是不能弹出)；这与qt调用本身qt库是有本质的区别的思路：1.调用方缺QApplication::exec()，那么我们在接口
绘本讲师训练营【24期】8/21阅读原创《独生小孩》 1784e22615e0
24016-孟娟《独生小孩》图片发自App今天我想分享一个蛮特别的绘本，讲的是一个特殊的群体，我也是属于这个群体，80后的独生小孩。这是一本中国绘本，作者郭婧，也是一个80厚。全书一百多页，均为铅笔绘制，虽然为黑白色调，但并不显得沉闷。全书没有文字，犹如“默片”，但并不影响读者对该作品的理解，反而显得神秘，梦幻，給读者留下想象的空间。作者在前蝴蝶页这样写到：“我更希望父母和孩子一起分享这本书，使他
店群合一模式下的社区团购新发展——结合链动 2+1 模式、AI 智能名片与 S2B2C 商城小程序源码说私域人工智能小程序
摘要：本文探讨了店群合一的社区团购平台在当今商业环境中的重要性和优势。通过分析店群合一模式如何将互联网社群与线下终端紧密结合，阐述了链动2+1模式、AI智能名片和S2B2C商城小程序源码在这一模式中的应用价值。这些创新元素的结合为社区团购带来了新的机遇，提升了用户信任感、拓展了营销渠道，并实现了线上线下的完美融合。一、引言随着互联网技术的不断发展，社区团购作为一种新兴的商业模式，在满足消费者日常需
我校举行新老教师师徒结对仪式暨名师专业工作室工作交流活动李蕾1229
为促进我校教师专业发展，发挥骨干教师的引领带头作用，11月6日下午，我校举行新老教师师徒结对仪式暨名师专业工作室工作交流活动。图片发自App会议由教师发展处李蕾主任主持，首先，由范校长宣读新老教师结对名单及双方承担职责。随后，两位新调入教师陈玉萍、莫正杰分别和他们的师傅鲍元美、刘召彬老师签订了师徒结对协议书。图片发自App图片发自App师徒拥抱、握手。有了师傅就有了目标有了方向，相信两位新教师在师
向内而求陈陈_19b4
10月27日，阴。阅读书目:《次第花开》。作者:希阿荣博堪布，是当今藏传佛家宁玛派最伟大的上师法王，如意宝晋美彭措仁波切颇具影响力的弟子之一。多年以来，赴海内外各地弘扬佛法，以正式授课、现场开示、发表文章等多种方法指导佛学弟子修行佛法。代表作《寂静之道》、《生命这出戏》、《透过佛法看世界》自出版以来一直是佛教类书籍中的畅销书。图片发自App金句:1.佛陀说，一切痛苦的根源在于我们长期以来对自身及外
2021-08-26 影幽
在生活中，女人与男人的感悟往往有所不同。人生最大的舞台就是生活，大幕随时都可能拉开，关键是你愿不愿意表演都无法躲避。在生活中，遇事不要急躁，不要急于下结论，尤其生气时不要做决断，要学会换位思考，大事化小小事化了，把复杂的事情尽量简单处理，千万不要把简单的事情复杂化。永远不要扭曲，别人善意，无药可救。昨天是张过期的支票，明天是张信用卡，只有今天才是现金，要善加利用！执着的攀登者不必去与别人比较自己的
消息中间件有哪些常见类型 xmh-sxh-1314 java
消息中间件根据其设计理念和用途，可以大致分为以下几种常见类型：点对点消息队列（Point-to-PointMessagingQueues）：在这种模型中，消息被发送到特定的队列中，消费者从队列中取出并处理消息。队列中的消息只能被一个消费者消费，消费后即被删除。常见的实现包括IBM的MQSeries、RabbitMQ的部分使用场景等。适用于任务分发、负载均衡等场景。发布/订阅消息模型（Pub/Sub
html 中如何使用 uniapp 的部分方法某公司摸鱼前端 html uni-app 前端
示例代码：Documentconsole.log(window);效果展示：好了，现在就可以uni.使用相关的方法了
ArcGIS栅格计算器常见公式（赋值、0和空值的转换、补充栅格空值）研学随笔 arcgis 经验分享
我们在使用ArcGIS时通常经常用到栅格计算器，今天主要给大家介绍我日常中经常用到的几个公式，供大家参考学习。将特定值（-9999）赋值为0，例如-9999.Con("raster"==-9999,0,"raster")2.给空值赋予特定的值（如0）Con(IsNull("raster"),0,"raster")3.将特定的栅格值(如1)赋值为空值，其他保留原值SetNull("raster"==
log4j对象改变日志级别 3213213333332132 java log4j level log4j对象名称日志级别
log4j对象改变日志级别可批量的改变所有级别，或是根据条件改变日志级别。 log4j配置文件： log4j.rootLogger=ERROR,FILE,CONSOLE,EXECPTION #log4j.appender.FILE=org.apache.log4j.RollingFileAppender log4j.appender.FILE=org.apache.l
elk+redis 搭建nginx日志分析平台 ronin47 elasticsearch kibana logstash
elk+redis 搭建nginx日志分析平台 logstash,elasticsearch,kibana 怎么进行nginx的日志分析呢？首先，架构方面，nginx是有日志文件的，它的每个请求的状态等都有日志文件进行记录。其次，需要有个队列，redis的l
Yii2设置时区 dcj3sjt126com PHP timezone yii2
时区这东西，在开发的时候，你说重要吧，也还好，毕竟没它也能正常运行，你说不重要吧，那就纠结了。特别是linux系统，都TMD差上几小时，你能不痛苦吗？win还好一点。有一些常规方法，是大家目前都在采用的1、php.ini中的设置，这个就不谈了，2、程序中公用文件里设置，date_default_timezone_set一下时区3、或者。。。自己写时间处理函数，在遇到时间的时候，用这个函数处理（比较
js实现前台动态添加文本框，后台获取文本框内容 171815164 文本框
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://w
持续集成工具 g21121 持续集成
持续集成是什么？我们为什么需要持续集成？持续集成带来的好处是什么？什么样的项目需要持续集成？... 持续集成(Continuous integration ,简称CI)，所谓集成可以理解为将互相依赖的工程或模块合并成一个能单独运行
数据结构哈希表(hash)总结永夜-极光数据结构
1.什么是hash 来源于百度百科: Hash，一般翻译做“散列”，也有直接音译为“哈希”的，就是把任意长度的输入，通过散列算法，变换成固定长度的输出，该输出就是散列值。这种转换是一种压缩映射，也就是，散列值的空间通常远小于输入的空间，不同的输入可能会散列成相同的输出，所以不可能从散列值来唯一的确定输入值。简单的说就是一种将任意长度的消息压缩到某一固定长度的消息摘要的函数。
乱七八糟程序员是怎么炼成的
eclipse中的jvm字节码查看插件地址： http://andrei.gmxhome.de/eclipse/ 安装该地址的outline 插件后重启，打开window下的view下的bytecode视图 http://andrei.gmxhome.de/eclipse/ jvm博客： http://yunshen0909.iteye.com/blog/2
职场人伤害了“上司” 怎样弥补 aijuans 职场
由于工作中的失误，或者平时不注意自己的言行“伤害”、“得罪”了自己的上司，怎么办呢？　　在职业生涯中这种问题尽量不要发生。下面提供了一些解决问题的建议：　　一、利用一些轻松的场合表示对他的尊重　　即使是开明的上司也很注重自己的权威，都希望得到下属的尊重，所以当你与上司冲突后，最好让不愉快成为过去，你不妨在一些轻松的场合，比如会餐、联谊活动等，向上司问个好，敬下酒，表示你对对方的尊重，
深入浅出url编码 antonyup_2006 应用服务器浏览器 servlet weblogic IE
出处：http://blog.csdn.net/yzhz 杨争 http://blog.csdn.net/yzhz/archive/2007/07/03/1676796.aspx 一、问题：编码问题是JAVA初学者在web开发过程中经常会遇到问题，网上也有大量相关的
建表后创建表的约束关系和增加表的字段百合不是茶标的约束关系增加表的字段
下面所有的操作都是在表建立后操作的,主要目的就是熟悉sql的约束,约束语句的万能公式 1,增加字段(student表中增加姓名字段) alter table 增加字段的表名 add 增加的字段名增加字段的数据类型 alter table student add name varchar2(10); &nb
Uploadify 3.2 参数属性、事件、方法函数详解 bijian1013 JavaScript uploadify
一.属性属性名称默认值说明 auto true 设置为true当选择文件后就直接上传了，为false需要点击上传按钮才上传。 buttonClass ” 按钮样式 buttonCursor ‘hand’ 鼠标指针悬停在按钮上的样子 buttonImage null 浏览按钮的图片的路
精通Oracle10编程SQL(16)使用LOB对象 bijian1013 oracle 数据库 plsql
/* *使用LOB对象 */ --LOB(Large Object)是专门用于处理大对象的一种数据类型，其所存放的数据长度可以达到4G字节 --CLOB/NCLOB用于存储大批量字符数据，BLOB用于存储大批量二进制数据，而BFILE则存储着指向OS文件的指针 /* *综合实例 */ --建立表空间 --#指定区尺寸为128k,如不指定，区尺寸默认为64k CR
【Resin一】Resin服务器部署web应用 bit1129 resin
工作中，在Resin服务器上部署web应用，通常有如下三种方式：配置多个web-app 配置多个http id 为每个应用配置一个propeties、xml以及sh脚本文件配置多个web-app 在resin.xml中,可以为一个host配置多个web-app <cluster id="app&q
red5简介及基础知识白糖_ 基础
简介 Red5的主要功能和Macromedia公司的FMS类似，提供基于Flash的流媒体服务的一款基于Java的开源流媒体服务器。它由Java语言编写，使用RTMP作为流媒体传输协议，这与FMS完全兼容。它具有流化FLV、MP3文件，实时录制客户端流为FLV文件，共享对象，实时视频播放、Remoting等功能。用Red5替换FMS后,客户端不用更改可正
angular.fromJson boyitech AngularJS AngularJS 官方API AngularJS API
angular.fromJson 描述: 把Json字符串转为对象使用方法: angular.fromJson(json); 参数详解: Param Type Details json string JSON 字符串返回值: 对象, 数组, 字符串或者是一个数字示例: <!DOCTYPE HTML> <h
java-颠倒一个句子中的词的顺序。比如： I am a student颠倒后变成：student a am I bylijinnan java
public class ReverseWords { /** * 题目：颠倒一个句子中的词的顺序。比如： I am a student颠倒后变成：student a am I.词以空格分隔。 * 要求： * 1.实现速度最快,移动最少 * 2.不能使用String的方法如split,indexOf等等。 * 解答：两次翻转。 */ publ
web实时通讯 Chen.H Web 浏览器 socket 脚本
关于web实时通讯，做一些监控软件。由web服务器组件从消息服务器订阅实时数据，并建立消息服务器到所述web服务器之间的连接，web浏览器利用从所述web服务器下载到web页面的客户端代理与web服务器组件之间的socket连接，建立web浏览器与web服务器之间的持久连接；利用所述客户端代理与web浏览器页面之间的信息交互实现页面本地更新，建立一条从消息服务器到web浏览器页面之间的消息通路
[基因与生物]远古生物的基因可以嫁接到现代生物基因组中吗? comsci 生物
大家仅仅把我说的事情当作一个IT行业的笑话来听吧..没有其它更多的意思如果我们把大自然看成是一位伟大的程序员,专门为地球上的生态系统编制基因代码,并创造出各种不同的生物来,那么6500万年前的程序员开发的代码,是否兼容现代派的程序员的代码和架构呢?
oracle 外部表 daizj oracle 外部表 external tables
oracle外部表是只允许只读访问，不能进行DML操作，不能创建索引，可以对外部表进行的查询，连接，排序，创建视图和创建同义词操作。 you can select, join, or sort external table data. You can also create views and synonyms for external tables. Ho
aop相关的概念及配置 daysinsun AOP
切面(Aspect): 通常在目标方法执行前后需要执行的方法（如事务、日志、权限），这些方法我们封装到一个类里面，这个类就叫切面。连接点（joinpoint） spring里面的连接点指需要切入的方法，通常这个joinpoint可以作为一个参数传入到切面的方法里面（非常有用的一个东西）。通知（Advice）通知就是切面里面方法的具体实现，分为前置、后置、最终、异常环
初一上学期难记忆单词背诵第二课 dcj3sjt126com english word
middle 中间的，中级的 well 喔，那么；好吧 phone 电话，电话机 policeman 警察 ask 问 take 拿到；带到 address 地址 glad 高兴的，乐意的 why 为什么 China 中国 family 家庭 grandmother (外)祖母 grandfather (外)祖父 wife 妻子 husband 丈夫 da
Linux日志分析常用命令 dcj3sjt126com linux log
1.查看文件内容 cat -n 显示行号 2.分页显示 more Enter 显示下一行空格显示下一页 F 显示下一屏 B 显示上一屏 less /get 查询"get"字符串并高亮显示 3.显示文件尾 tail -f 不退出持续显示 -n 显示文件最后n行 4.显示头文件 head -n 显示文件开始n行 5.内容排序 sort -n 按照
JSONP 原理分析 fantasy2005 JavaScript jsonp jsonp 跨域
转自 http://www.nowamagic.net/librarys/veda/detail/224 JavaScript是一种在Web开发中经常使用的前端动态脚本技术。在JavaScript中，有一个很重要的安全性限制，被称为“Same-Origin Policy”（同源策略）。这一策略对于JavaScript代码能够访问的页面内容做了很重要的限制，即JavaScript只能访问与包含它的
使用connect by进行级联查询 234390216 oracle 查询父子 Connect by 级联
使用connect by进行级联查询 connect by可以用于级联查询，常用于对具有树状结构的记录查询某一节点的所有子孙节点或所有祖辈节点。来看一个示例，现假设我们拥有一个菜单表t_menu，其中只有三个字段：
一个不错的能将HTML表格导出为excel,pdf等的jquery插件 jackyrong jquery插件
发现一个老外写的不错的jquery插件，可以实现将HTML 表格导出为excel,pdf等格式，地址在： https://github.com/kayalshri/ 下面看个例子，实现导出表格到excel,pdf <html> <head> <title>Export html table to excel an
UI设计中我们为什么需要设计动效 lampcy UI UI设计
关于Unity3D中的Shader的知识首先先解释下Unity3D的Shader，Unity里面的Shaders是使用一种叫ShaderLab的语言编写的，它同微软的FX文件或者NVIDIA的CgFX有些类似。传统意义上的vertex shader和pixel shader还是使用标准的Cg/HLSL 编程语言编写的。因此Unity文档里面的Shader，都是指用ShaderLab编写的代码，
如何禁止页面缓存 nannan408 html jsp cache
禁止页面使用缓存~ ------------------------------------------------ jsp:页面no cache： response.setHeader("Pragma","No-cache"); response.setHeader("Cache-Control","no-cach
以代码的方式管理quartz定时任务的暂停、重启、删除、添加等 Everyday都不同定时任务管理 spring-quartz
【前言】在项目的管理功能中，对定时任务的管理有时会很常见。因为我们不能指望只在配置文件中配置好定时任务就行了，因为如果要控制定时任务的 “暂停” 呢？暂停之后又要在某个时间点 “重启” 该定时任务呢？或者说直接 “删除” 该定时任务呢？要改变某定时任务的触发时间呢？ “添加” 一个定时任务对于系统的使用者而言，是不太现实的，因为一个定时任务的处理逻辑他是不
EXT实例 tntxia ext
（1）增加一个按钮 JSP: <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <% String path = request.getContextPath(); Stri
数学学习在计算机研究领域的作用和重要性 xjnine Math
最近一直有师弟师妹和朋友问我数学和研究的关系，研一要去学什么数学课。毕竟在清华，衡量一个研究生最重要的指标之一就是paper,而没有数学，是肯定上不了世界顶级的期刊和会议的，这在计算机学界尤其重要！你会发现，不论哪个领域有价值的东西，都一定离不开数学！在这样一个信息时代，当google已经让世界没有秘密的时候，一种卓越的数学思维，绝对可以成为你的核心竞争力. 无奈本人实在见地