前几章接触的案例都是接近静态的,由这张开始开始接触大量动态的内容,包括

球体灯光,变动的形体,以及一个虚拟的丛林场景

下章我会试着结合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章学习到的内容。建立一个小场景

初学WebGL引擎-BabylonJS:第4篇-灯光动画与丛林场景的更多相关文章

  1. 初学WebGL引擎-BabylonJS:第0篇-起因

    学习WebGL的BabylonJS是在一次偶然的情况下进行的,主要为了满足个人对全栈开发的欲望. 言归正传,下面开始简单说说相关过程 WebGL是什么?WebGL是基于html的客户端页面技术,基于h ...

  2. 初学WebGL引擎-BabylonJS:第1篇-基础构造

    继续上篇随笔 步骤如下: 一:http://www.babylonjs.com/中下载源码.获取其中babylon.2.2.js.建立gulp项目

  3. 初学WebGL引擎-BabylonJS:第8篇-阴影网格与活动

    [playground]-shadows(阴影) 源码 var createScene = function () { var scene = new BABYLON.Scene(engine); / ...

  4. 初学WebGL引擎-BabylonJS:第6篇-碰撞交错与挑选

    [playground]-collisions(碰撞) 先贴官方源码(机器翻译版本) var createScene = function () { var scene = new BABYLON.S ...

  5. 初学WebGL引擎-BabylonJS:第2篇-基础模型体验

    此次学习进度会比之前快很多,有了合适的学习方法后也就会有更多的乐趣产生了. 接上一章代码 上章代码 <!DOCTYPE html> <html> <head> &l ...

  6. 初学WebGL引擎-BabylonJS:第3篇-方向纹理与相机

    [playground]-rotatuib abd scaling(方向) 源码 var createScene = function () { var scene = new BABYLON.Sce ...

  7. [WebKit内核] JavaScript引擎深度解析--基础篇(一)字节码生成及语法树的构建详情分析

    [WebKit内核] JavaScript引擎深度解析--基础篇(一)字节码生成及语法树的构建详情分析 标签: webkit内核JavaScriptCore 2015-03-26 23:26 2285 ...

  8. 用基于WebGL的BabylonJS来共享你的3D扫描模型

    转自:http://www.geekfan.net/6578/ 用基于WebGL的BabylonJS来共享你的3D扫描模型 杰克祥子 2014 年 2 月 26 日 0 条评论 标签:3D扫描 , B ...

  9. VTemplate模板引擎的使用--高级篇

    VTemplate模板引擎的使用--高级篇 在网站中,经常会有某个栏目的数据在多个页面同时使用到.比如新闻网站或电子商务网站的栏目列表,几乎在很多页面都会显示栏目导航.对于这种多个页面同时使用到的“数 ...

随机推荐

  1. 无所不能的Embedding 1 - Word2vec模型详解&代码实现

    word2vec是google 2013年提出的,从大规模语料中训练词向量的模型,在许多场景中都有应用,信息提取相似度计算等等.也是从word2vec开始,embedding在各个领域的应用开始流行, ...

  2. .net core下获取自身服务器地址

    网上的例子千篇一律都是Request.HttpContext.Connect.Connection.XX这种 或者依赖于IHttpContextAccessor的 而我的场景是在非控制器流程获取自身服 ...

  3. qt事件过滤器的使用(可以用于控制屏幕背光等)

    在嵌入式qt项目中,有时并不需求屏幕一直亮着,需要一段时间不操作时,将屏幕背光关掉,以达到节能的目的: 在qt项目中,可以通过重写事件过滤器来实现屏幕操作的检测,加上定时器的时间控制,可以实现指定时间 ...

  4. Java日志框架(二)

    最流行的日志框架解决方案 按笔者理解,现在最流的日志框架解决方案莫过于SLF4J + LogBack.其有以下几个优点: LogBack 自身实现了 SLF4J 的日志接口,不需要 SLF4J 去做进 ...

  5. 搞大数据,Java 工程师需要掌握哪些知识?

    先看再点赞,给自己一点思考的时间,微信搜索[沉默王二]关注这个有颜值却假装靠才华苟且的程序员.本文 GitHub github.com/itwanger 已收录,里面还有一线大厂整理的面试题,以及我的 ...

  6. JS 移动端笔记

    移动端的网页特效     移动端触屏事件概述 触屏touch事件     touchstart 手指触摸到一个DOM元素时触发     touchmove 手指在一个DOM上滑动时触发     tou ...

  7. Java环境变量,jdk和jre的区别,面向对象语言编程

    什么是java? java是一门面向对象的编程语言,包括java SE, java ME, Java EE . 广泛使用的是作为后端语言的Java EE开发, 面向对象和面向过程? java,C++ ...

  8. Redis服务之Redis5集群相关命令说明

    上一篇博客主要聊了下redis.trib.rb这个工具来管理redis3/4 cluster 中的节点,回顾请参考https://www.cnblogs.com/qiuhom-1874/p/13456 ...

  9. 2020-07-14:es用过冷热分离吗?假如现在有些数据热变冷,有些数据冷变热,怎么解决?

    福哥答案2020-07-14: 热变冷: 有x台机器tag设置为hot. 有y台机器tag设置为cool. hot集群中只存最近两天的. 有一个定时任务每天将前一天的索引标记为cool. es看到有新 ...

  10. C#算法设计排序篇之04-选择排序(附带动画演示程序)

    选择排序(Selection Sort) 该文章的最新版本已迁移至个人博客[比特飞],单击链接 https://www.byteflying.com/archives/681 访问. 选择排序是一种简 ...