前几章接触的案例都是接近静态的，由这张开始开始接触大量动态的内容，包括
球体灯光，变动的形体，以及一个虚拟的丛林场景
下章我会试着结合1-9案例的内容做出一个demo出来
【playground】-lights（灯光）
源码
var createScene = function () { var scene = new BABYLON.Scene(engine); // Setup camera var camera = new BABYLON.ArcRotateCamera("Camera", 0, 0, 10, BABYLON.Vector3.Zero(), scene); camera.setPosition(new BABYLON.Vector3(-10, 10, 0)); camera.attachControl(canvas, true); // Lights var light0 = new BABYLON.PointLight("Omni0", new BABYLON.Vector3(0, 10, 0), scene); var light1 = new BABYLON.PointLight("Omni1", new BABYLON.Vector3(0, -10, 0), scene); var light2 = new BABYLON.PointLight("Omni2", new BABYLON.Vector3(10, 0, 0), scene); var light3 = new BABYLON.DirectionalLight("Dir0", new BABYLON.Vector3(1, -1, 0), scene); var material = new BABYLON.StandardMaterial("kosh", scene); var sphere = BABYLON.Mesh.CreateSphere("Sphere", 16, 3, scene); // Creating light sphere var lightSphere0 = BABYLON.Mesh.CreateSphere("Sphere0", 16, 0.5, scene); var lightSphere1 = BABYLON.Mesh.CreateSphere("Sphere1", 16, 0.5, scene); var lightSphere2 = BABYLON.Mesh.CreateSphere("Sphere2", 16, 0.5, scene); lightSphere0.material = new BABYLON.StandardMaterial("red", scene); lightSphere0.material.diffuseColor = new BABYLON.Color3(0, 0, 0); lightSphere0.material.specularColor = new BABYLON.Color3(0, 0, 0); lightSphere0.material.emissiveColor = new BABYLON.Color3(1, 0, 0); lightSphere1.material = new BABYLON.StandardMaterial("green", scene); lightSphere1.material.diffuseColor = new BABYLON.Color3(0, 0, 0); lightSphere1.material.specularColor = new BABYLON.Color3(0, 0, 0); lightSphere1.material.emissiveColor = new BABYLON.Color3(0, 1, 0); lightSphere2.material = new BABYLON.StandardMaterial("blue", scene); lightSphere2.material.diffuseColor = new BABYLON.Color3(0, 0, 0); lightSphere2.material.specularColor = new BABYLON.Color3(0, 0, 0); lightSphere2.material.emissiveColor = new BABYLON.Color3(0, 0, 1); // Sphere material material.diffuseColor = new BABYLON.Color3(1, 1, 1); sphere.material = material; // Lights colors light0.diffuse = new BABYLON.Color3(1, 0, 0); light0.specular = new BABYLON.Color3(1, 0, 0); light1.diffuse = new BABYLON.Color3(0, 1, 0); light1.specular = new BABYLON.Color3(0, 1, 0); light2.diffuse = new BABYLON.Color3(0, 0, 1); light2.specular = new BABYLON.Color3(0, 0, 1); light3.diffuse = new BABYLON.Color3(1, 1, 1); light3.specular = new BABYLON.Color3(1, 1, 1); // Animations var alpha = 0; scene.beforeRender = function () { light0.position = new BABYLON.Vector3(10 * Math.sin(alpha), 0, 10 * Math.cos(alpha)); light1.position = new BABYLON.Vector3(10 * Math.sin(alpha), 0, -10 * Math.cos(alpha)); light2.position = new BABYLON.Vector3(10 * Math.cos(alpha), 0, 10 * Math.sin(alpha)); lightSphere0.position = light0.position; lightSphere1.position = light1.position; lightSphere2.position = light2.position; alpha += 0.01; }; return scene; }
效果
笔记：
定义光源-点光源：
new BABYLON.PointLight("Omni0", new BABYLON.Vector3(0, 10, 0), scene);//（3个光点）
定义光源-定向光源：
new BABYLON.DirectionalLight("Dir0", new BABYLON.Vector3(1, -1, 0), scene);//（类似于太阳）
光源参数树立：
light0.diffuse = new BABYLON.Color3(1, 0, 0);//（扩散光源） light0.specular = new BABYLON.Color3(1, 0, 0);//（镜面光源）
球体光源处理：
lightSphere0.material.diffuseColor = new BABYLON.Color3(0, 0, 0);//（球体扩散光源） lightSphere0.material.specularColor = new BABYLON.Color3(0, 0, 0);//（球体镜面光源） lightSphere0.material.emissiveColor = new BABYLON.Color3(1, 0, 0);//（球体反射光源）
事件处理：
beforeRender
var alpha = 0; scene.beforeRender = function () { light0.position = new BABYLON.Vector3(10 * Math.sin(alpha), 0, 10 * Math.cos(alpha)); light1.position = new BABYLON.Vector3(10 * Math.sin(alpha), 0, -10 * Math.cos(alpha)); light2.position = new BABYLON.Vector3(10 * Math.cos(alpha), 0, 10 * Math.sin(alpha)); lightSphere0.position = light0.position; lightSphere1.position = light1.position; lightSphere2.position = light2.position; alpha += 0.01; };
以上代码基于alpha的自增，控制参数的变化
以上各参数还需要各位自行调节后run看看效果影响
【playground】-animations（动画）
源码
var createScene = function () { var scene = new BABYLON.Scene(engine); var light = new BABYLON.PointLight("Omni", new BABYLON.Vector3(0, 100, 100), scene); var camera = new BABYLON.ArcRotateCamera("Camera", 0, 0.8, 100, new BABYLON.Vector3.Zero(), scene); camera.attachControl(canvas, true); //Boxes var box1 = BABYLON.Mesh.CreateBox("Box1", 10.0, scene); box1.position.x = -20; var box2 = BABYLON.Mesh.CreateBox("Box2", 10.0, scene); var materialBox = new BABYLON.StandardMaterial("texture1", scene); materialBox.diffuseColor = new BABYLON.Color3(0, 1, 0);//Green var materialBox2 = new BABYLON.StandardMaterial("texture2", scene); //Applying materials box1.material = materialBox; box2.material = materialBox2; //Positioning box box2.position.x = 20; // Creation of a basic animation with box 1 //---------------------------------------- //Create a scaling animation at 30 FPS var animationBox = new BABYLON.Animation("tutoAnimation", "scaling.x", 30, BABYLON.Animation.ANIMATIONTYPE_FLOAT, BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE); //Here we have chosen a loop mode, but you can change to : // Use previous values and increment it (BABYLON.Animation.ANIMATIONLOOPMODE_RELATIVE) // Restart from initial value (BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE) // Keep the final value (BABYLON.Animation.ANIMATIONLOOPMODE_CONSTANT) // Animation keys var keys = []; //At the animation key 0, the value of scaling is "1" keys.push({ frame: 0, value: 1 }); //At the animation key 20, the value of scaling is "0.2" keys.push({ frame: 20, value: 0.2 }); //At the animation key 100, the value of scaling is "1" keys.push({ frame: 100, value: 1 }); //Adding keys to the animation object animationBox.setKeys(keys); //Then add the animation object to box1 box1.animations.push(animationBox); //Finally, launch animations on box1, from key 0 to key 100 with loop activated scene.beginAnimation(box1, 0, 100, true); // Creation of a manual animation with box 2 //------------------------------------------ scene.registerBeforeRender(function () { //The color is defined at run time with random() box2.material.diffuseColor = new BABYLON.Color3(Math.random(), Math.random(), Math.random()); }); return scene; }
效果
笔记
盒子动画
var animationBox = new BABYLON.Animation("tutoAnimation", "scaling.x", 30, BABYLON.Animation.ANIMATIONTYPE_FLOAT, BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE);
参数分别是：name，变化的值，频率（改成130可以看到绿色的跟抽风一样抖动），【该参数不确定】，频率结束后的处理类型
这里类型提供了以下几种（机器翻译）
/ /这里我们选择一个循环模式,但你可以改变:
/ /使用前值和增量(BABYLON.Animation.ANIMATIONLOOPMODE_RELATIVE)
/ /重新启动的初始值(BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE)
/ /保持最后的值(BABYLON.Animation.ANIMATIONLOOPMODE_CONSTANT)
接着定义动画过程中的参数
var keys = []; //At the animation key 0, the value of scaling is "1" keys.push({ frame: 0, value: 1 }); //At the animation key 20, the value of scaling is "0.2" keys.push({ frame: 20, value: 0.2 }); //At the animation key 100, the value of scaling is "1" keys.push({ frame: 100, value: 1 });
frame：为时间量
value：为属性值（此处为拉伸x的值）
//绑定值在动画中 animationBox.setKeys(keys); //盒子加载动画 box1.animations.push(animationBox); //场景内激活动画 scene.beginAnimation(box1, 0, 100, true);
以上为左边绿盒子的动画
面颜色闪动的动画代码如下
scene.registerBeforeRender(function () { //The color is defined at run time with random() box2.material.diffuseColor = new BABYLON.Color3(Math.random(), Math.random(), Math.random()); });
通过Math的随机数改变box的三原色
【playground】-sprites（丛林场景）
废话不都说，先贴源码
var createScene = function () { var scene = new BABYLON.Scene(engine); // Create camera and light var light = new BABYLON.PointLight("Point", new BABYLON.Vector3(5, 10, 5), scene); var camera = new BABYLON.ArcRotateCamera("Camera", 1, 0.8, 8, new BABYLON.Vector3(0, 0, 0), scene); camera.attachControl(canvas, true); // Create a sprite manager to optimize GPU ressources // Parameters : name, imgUrl, capacity, cellSize, scene var spriteManagerTrees = new BABYLON.SpriteManager("treesManager", "textures/palm.png", 2000, 800, scene); //We create 2000 trees at random positions for (var i = 0; i < 2000; i++) { var tree = new BABYLON.Sprite("tree", spriteManagerTrees); tree.position.x = Math.random() * 100 - 50; tree.position.z = Math.random() * 100 - 50; tree.isPickable = true; //Some "dead" trees if (Math.round(Math.random() * 5) === 0) { tree.angle = Math.PI * 90 / 180; tree.position.y = -0.3; } } //Create a manager for the player's sprite animation var spriteManagerPlayer = new BABYLON.SpriteManager("playerManager", "textures/player.png", 2, 64, scene); // First animated player var player = new BABYLON.Sprite("player", spriteManagerPlayer); player.playAnimation(0, 40, true, 100); player.position.y = -0.3; player.size = 0.3; player.isPickable = true; // Second standing player var player2 = new BABYLON.Sprite("player2", spriteManagerPlayer); player2.stopAnimation(); // Not animated player2.cellIndex = 2; // Going to frame number 2 player2.position.y = -0.3; player2.position.x = 1; player2.size = 0.3; player2.invertU = -1; //Change orientation player2.isPickable = true; // Picking spriteManagerTrees.isPickable = true; spriteManagerPlayer.isPickable = true; scene.onPointerDown = function (evt) { var pickResult = scene.pickSprite(this.pointerX, this.pointerY); if (pickResult.hit) { pickResult.pickedSprite.angle += 0.5; } }; return scene; }
效果
效果描述：
1.随机产生树。2.运动的小人。3.树的点击事件。4.镜头的处理
笔记
树的处理
//建立一个精灵？个人理解为一个对象的引入。英文描述提示利用GPU运算，并且提供参数，机翻效果如下：名称，图片地址，能力,调用大小,场景。
//此处作为管理处
var spriteManagerTrees = new BABYLON.SpriteManager("treesManager", "textures/palm.png", 2000, 800, scene); //随机产生树2000个 for (var i = 0; i < 2000; i++) { //创建树 var tree = new BABYLON.Sprite("tree", spriteManagerTrees); //树坐标随机 tree.position.x = Math.random() * 100 - 50; tree.position.z = Math.random() * 100 - 50; //提供选择事件 tree.isPickable = true; //随机选择，处理旋转树的角度，并且固定树在一个平面 if (Math.round(Math.random() * 5) === 0) { tree.angle = Math.PI * 90 / 180; tree.position.y = -0.3; } }
人物的处理(动的角色)
var player = new BABYLON.Sprite("player", spriteManagerPlayer); player.playAnimation(0, 40, true, 100);//动画处理 player.position.y = -0.3;//定位 player.size = 1.3;//模型大小（） player.isPickable = true;//选择事件
人物的处理(静态的角色)
// Second standing player var player2 = new BABYLON.Sprite("player2", spriteManagerPlayer); player2.stopAnimation(); // 静止的动画 player2.cellIndex = 2; // 帧数 player2.position.y = -0.3; player2.position.x = 1; player2.size = 0.3; player2.invertU = -1; //改变方向？ player2.isPickable = true;
管理处添加点击事件与点击反应（此处点击事件为旋转方向）
spriteManagerTrees.isPickable = true;
spriteManagerPlayer.isPickable = true;
scene.onPointerDown = function (evt) {
var pickResult = scene.pickSprite(this.pointerX, this.pointerY);
if (pickResult.hit) {
pickResult.pickedSprite.angle += 0.5;
}
};
本章就到这里，下一张我会集中前1-9章学习到的内容。建立一个小场景