初学WebGL引擎-BabylonJS：第5篇-学习挑战：草地上桃心蜡烛
草地上的蜡烛
前1-9个案例我们分别学习了
场景，相机，纹理，方向，灯关与动画等内容
本次结合这些内容准备完成一个摆在草地上的蜡烛
我先画一个大致的效果图。
效果图
其他要求
1.时间为晚上
2.有5-10只萤火虫按各种轨道飞行
3.桃心处实现蜡烛光源
4.远处实现月亮
5.右下角形成字日期2016-01-22，立体
开始分析
草地：使用贴图
蜡烛：用油桶上方球形，并且附带光源处理
晚上：控制光源亮度
萤火虫：实行球型，并附带光源。事件后按轨道运行
月亮：实现一定距离的球形，并附带光源
日期：实现box衔接
练习开始
- 步骤1：完成相机，光源和地面
那么我这里copy第一个章节进行改动
完整代码如下
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html" charset="utf-8"/> <title>Babylon - Getting Started</title> <!-- link to the last version of babylon --> <script src="js/babylon.2.2.max.js"></script> </head> <style> html, body { overflow: hidden; width : 100%; height : 100%; margin : 0; padding : 0; } #renderCanvas { width : 100%; height : 100%; touch-action: none; } </style> <body> <canvas id="renderCanvas"></canvas> <script> window.addEventListener('DOMContentLoaded', function() { //获取画布对象 var canvas = document.getElementById('renderCanvas'); //加载巴比伦3D引擎 var engine = new BABYLON.Engine(canvas, true); //创建场景 var createScene = function() { // 通过引擎创建基本场景 var scene = new BABYLON.Scene(engine); // 创建一个开放免费的相机，地点位于x:0(横向距离), y:5(高度), z:-10(纵向距离) var camera = new BABYLON.FreeCamera('camera1', new BABYLON.Vector3(9, 5,-10), scene); // 相机到场景的起源 camera.setTarget(BABYLON.Vector3.Zero()); // 相机放置画布 camera.attachControl(canvas, false); // 创建基本光源, 目标位于 x:0,y:1,z:0 -(由天空出现) var light = new BABYLON.HemisphericLight('light1', new BABYLON.Vector3(0,1,0), scene); // 创建一个内置的“球”的形状,它的构造函数包括5个参数:名称、宽度、深度、细分,场景(例子中仅4个参数) var sphere = BABYLON.Mesh.CreateSphere('sphere1', 16, 2, scene); // 球向上移动高的二分之一距离 sphere.position.y = 1; //引入平面 var plane = BABYLON.Mesh.CreatePlane("plane", 120, scene); plane.position.y = 0; plane.rotation.x = Math.PI / 2; var materialPlane = new BABYLON.StandardMaterial("texturePlane", scene); materialPlane.diffuseTexture = new BABYLON.Texture("map/30_19271_39b80eb49d9f0c3.jpg", scene); materialPlane.diffuseTexture.uScale = 5.0;//Repeat 5 times on the Vertical Axes materialPlane.diffuseTexture.vScale = 5.0;//Repeat 5 times on the Horizontal Axes materialPlane.backFaceCulling = false;//Always show the front and the back of an element plane.material = materialPlane; // 返回该场景 return scene; } //赋予该场景于变量 var scene = createScene(); //在引擎中循环运行这个场景 engine.runRenderLoop(function(){ scene.render(); }); //追加事件：帆布与大小调整程序 window.addEventListener('resize', function(){ engine.resize(); }); }); </script> </body> </html>
实现效果如下
- 步骤2：建立一个单一的蜡烛
那么我们将球替换为蜡烛
// 创建一个内置的“球”的形状,它的构造函数包括5个参数:名称、宽度、深度、细分,场景(例子中仅4个参数) //var sphere = BABYLON.Mesh.CreateSphere('sphere1', 16, 2, scene); // 球向上移动高的二分之一距离 //sphere.position.y = 1; var cylinder = BABYLON.Mesh.CreateCylinder("cylinder", 3, 3, 3, 6, 1, scene, false);
效果
蜡烛太大，我们拉伸相机距离。并且缩小它
var camera = new BABYLON.FreeCamera('camera1', new BABYLON.Vector3(9, 25,-50), scene);
//参数为：name，高，高直径，下直径，棱角数，锐度，画布，未知 var cylinder = BABYLON.Mesh.CreateCylinder("cylinder", 1, 0.5, 0.5, 9, 0.2, scene, false);
效果
现在我为他配上一个球形光源。让他显得更像蜡烛
var light0 = new BABYLON.PointLight("Omni0", new BABYLON.Vector3(0, 1, 0), scene); light0.diffuse = new BABYLON.Color3(1, 0, 0); light0.specular = new BABYLON.Color3(1, 0, 0); light0.position = new BABYLON.Vector3(0, 2, 0);
效果
看来还需要一个球
var sphere = BABYLON.Mesh.CreateSphere('sphere1', 16, 0.5, scene); sphere.parent=light0; sphere.position.y = -1.2;
基于圆柱的位置形成的球效果如下：
调整调整球的颜色，代码如下
//参数为：name，高，高直径，下直径，棱角数，锐度，画布，未知 var cylinder = BABYLON.Mesh.CreateCylinder("cylinder", 1, 0.5, 0.5, 9, 0.2, scene, false); var light0 = new BABYLON.PointLight("Omni0", new BABYLON.Vector3(1, 1, 1), scene); light0.diffuse = new BABYLON.Color3(1, 0, 0); light0.specular = new BABYLON.Color3(1, 0, 0); light0.position = new BABYLON.Vector3(0, 2, 0); var materialSphere2 = new BABYLON.StandardMaterial("texture2", scene); materialSphere2.alpha = 0.5 var sphere = BABYLON.Mesh.CreateSphere('sphere1', 16, 0.5, scene); sphere.parent=light0; sphere.position.y = -1.2; sphere.material = materialSphere2; sphere.material.diffuseColor = new BABYLON.Color3(0, 0, 0); sphere.material.specularColor = new BABYLON.Color3(0, 0, 0); sphere.material.emissiveColor = new BABYLON.Color3(1, 0, 0);
效果如下
一个蜡烛形成了，接着就要通过算法实现多个蜡烛的摆放了。这里涉及到简单的桃心算法
本人不太熟，所以网上找了一篇JS的桃心算法。
原文章：http://www.oschina.net/code/snippet_114440_10115
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>JS心型线</title> <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Tangerine"> <style> div{ position:absolute; } .xx-box{ left:50%; top:50%; margin-left:-250px; margin-top:-250px; width:500px; height:500px; background-color:#000; } .xx-box .text{ top:30%; height:48px; line-height:48px; color:#f00; text-shadow: 3px 3px 4px #f00; font-size:36px; font-weight:bold; width:100%; text-align:center; font-family:Tangerine,Tahoma,Arial,"\65f6\5c1a\4e2d\9ed1\7b80\4f53","\5b8b\4f53"; } .xx-box .item{ width:2px; height:20px; overflow:hidden; } </style> </head> <body> <div class="xx-box" id="xx-box"> <div class="text">I Love You</div> </div> <script> function createPoint(x,y,c){ var div = document.createElement("div"); div.className = "item"; div.style.left = x + "px"; div.style.top = y + "px"; div.style.backgroundColor = c; document.getElementById("xx-box").appendChild(div); } function heartShape(r,dx,dy,c){//r:大小;dx:水平偏移;dy:垂直偏移;c:颜色 var m,n,x,y,i; for(i = 0; i <= 200; i += 0.04){ m = i; n = -r * (((Math.sin(i) * Math.sqrt(Math.abs(Math.cos(i)))) / (Math.sin(i) + 1.4)) - 2 * Math.sin(i) + 2); x = n * Math.cos(m) + dx; y = n * Math.sin(m) + dy; createPoint(x,y,c); } } heartShape(80,250,100,"#f00"); </script> </body> </html>
原文章效果
之后再往上查到了心形的算法
参数方程为：x=a*(2*cos(t)-cos(2*t)),y=a*(2*sin(t)-sin(2*t))
经过些学习，改造如下：
function PeachHeart(r,dx,dy,callback){ var m,n,x,y,i; //i的最大值*自增长值等于10为合适 for(i = 0; i <= 25; i += 0.4){ m = i; n = -r * (((Math.sin(i) * Math.sqrt(Math.abs(Math.cos(i)))) / (Math.sin(i) + 1.4)) - 2 * Math.sin(i) + 2); x = n * Math.cos(m) + dx; y = n * Math.sin(m) + dy; //console.log(i+'|x:' + x+"|y:"+y); callback(i,x,y); } }
步骤3：批量摆放蜡烛
PeachHeart(5,0,0,function(i,x,z){ var Mycylinder = BABYLON.Mesh.CreateCylinder("MYcylinder"+i, 1, 0.5, 0.5, 9, 0.2, scene, false); Mycylinder.position.y = 1; Mycylinder.position.x=x; Mycylinder.position.z=z; var MymaterialSphere2 = new BABYLON.StandardMaterial("MYtexture"+i, scene); MymaterialSphere2.alpha = 0.5 //创建球 var Mysphere = BABYLON.Mesh.CreateSphere('Mysphere'+i, 16, 0.5, scene); //球基于圆桶定位 Mysphere.parent=Mycylinder; //高于圆桶距离 Mysphere.position.y = 0.7; Mysphere.material = MymaterialSphere2; Mysphere.material.diffuseColor = new BABYLON.Color3(0, 0, 0); Mysphere.material.specularColor = new BABYLON.Color3(0, 0, 0); Mysphere.material.emissiveColor = new BABYLON.Color3(1, 0, 0); //创建光源 // var Mylight0 = new BABYLON.PointLight("MYOmni"+i, new BABYLON.Vector3(1, 1, 1), scene); // Mylight0.diffuse = new BABYLON.Color3(1, 0, 0); // Mylight0.specular = new BABYLON.Color3(1, 0, 0); // Mylight0.position = new BABYLON.Vector3(0, 2, 0); // //光源基于球定位 // Mylight0.parent=Mysphere; // Mylight0.position.y = 0.0; // console.log('Mylight0|x:' + Mycylinder.position.x+"|y:"+Mycylinder.position.y+"|z:"+Mycylinder.position.z); });
- 步骤4：形成萤火虫
1.环形轨迹萤火虫
2.心形轨迹萤火虫
3.随机轨迹萤火虫
下面是源码
//建立一个光源（环形） var lightRound = new BABYLON.DirectionalLight("Dir0", new BABYLON.Vector3(1, -1, 0), scene); //建立一个球（环形） var lightSphereRound = BABYLON.Mesh.CreateSphere("Sphere0", 16, 0.5, scene); lightSphereRound.material = new BABYLON.StandardMaterial("yellow", scene); lightSphereRound.material.diffuseColor = new BABYLON.Color3(255, 255, 0); lightSphereRound.material.specularColor = new BABYLON.Color3(0, 0, 0); lightSphereRound.material.emissiveColor = new BABYLON.Color3(1, 0, 0); lightRound.diffuse = new BABYLON.Color3(1, 0, 0); lightRound.specular = new BABYLON.Color3(1, 0, 0); //建立一个光源（心形状） var lightHeart = new BABYLON.DirectionalLight("Dir1", new BABYLON.Vector3(1, -1, 0), scene); //建立一个球（心形状） var lightSphereHeart = BABYLON.Mesh.CreateSphere("Sphere1", 16, 0.5, scene); lightSphereHeart.material = new BABYLON.StandardMaterial("yellow", scene); lightSphereHeart.material.diffuseColor = new BABYLON.Color3(255, 255, 0); lightSphereHeart.material.specularColor = new BABYLON.Color3(0, 0, 0); lightSphereHeart.material.emissiveColor = new BABYLON.Color3(1, 0, 0); lightHeart.diffuse = new BABYLON.Color3(1, 0, 0); lightHeart.specular = new BABYLON.Color3(1, 0, 0); //建立一个光源（随机） var lightRandom = new BABYLON.DirectionalLight("Dir2", new BABYLON.Vector3(1, -1, 0), scene); //建立一个球（心形状） var lightSphereRandom = BABYLON.Mesh.CreateSphere("Sphere2", 16, 0.5, scene); lightSphereRandom.material = new BABYLON.StandardMaterial("yellow", scene); lightSphereRandom.material.diffuseColor = new BABYLON.Color3(255, 255, 0); lightSphereRandom.material.specularColor = new BABYLON.Color3(0, 0, 0); lightSphereRandom.material.emissiveColor = new BABYLON.Color3(1, 0, 0); lightRandom.diffuse = new BABYLON.Color3(1, 0, 0); lightRandom.specular = new BABYLON.Color3(1, 0, 0); //引入平面 var plane = BABYLON.Mesh.CreatePlane("plane", 120, scene); plane.position.y = 0; plane.rotation.x = Math.PI / 2; var materialPlane = new BABYLON.StandardMaterial("texturePlane", scene); materialPlane.diffuseTexture = new BABYLON.Texture("map/30_19271_39b80eb49d9f0c3.jpg", scene); materialPlane.diffuseTexture.uScale = 5.0;//Repeat 5 times on the Vertical Axes materialPlane.diffuseTexture.vScale = 5.0;//Repeat 5 times on the Horizontal Axes materialPlane.backFaceCulling = false;//Always show the front and the back of an element
此时心型的算法如下
function PeachHeartFlight(m,callback){ m=m%1000; //console.log('|m:' + m); var n,x,y,i; //i的最大值*自增长值等于10为合适 i = m; n = -6 * (((Math.sin(i) * Math.sqrt(Math.abs(Math.cos(i)))) / (Math.sin(i) + 1.4)) - 2 * Math.sin(i) + 2); x = n * Math.cos(m) + 0; y = n * Math.sin(m) + 0; //console.log('|x:' + x+"|y:"+y); callback(x,y); }
- 步骤5：形成月亮
此时想到的是建立一个球
放在比较远的地方，最后效果如下
整理源码如下：
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html" charset="utf-8"/> <title>Babylon - Getting Started</title> <!-- link to the last version of babylon --> <script src="js/babylon.2.2.max.js"></script> </head> <style> html, body { overflow: hidden; width : 100%; height : 100%; margin : 0; padding : 0; } #renderCanvas { width : 100%; height : 100%; touch-action: none; } </style> <body> <canvas id="renderCanvas"></canvas> <script> window.addEventListener('DOMContentLoaded', function() { //获取画布对象 var canvas = document.getElementById('renderCanvas'); //加载巴比伦3D引擎 var engine = new BABYLON.Engine(canvas, true); //创建场景 var createScene = function() { // 通过引擎创建基本场景 var scene = new BABYLON.Scene(engine); // 创建一个开放免费的相机，地点位于x:0(横向距离), y:5(高度), z:-10(纵向距离) var camera = new BABYLON.FreeCamera('camera1', new BABYLON.Vector3(9, 95,-50), scene); // 相机到场景的起源 camera.setTarget(BABYLON.Vector3.Zero()); // 相机放置画布 camera.attachControl(canvas, false); // 创建基本光源, 目标位于 x:0,y:1,z:0 -(由天空出现) var light = new BABYLON.HemisphericLight('light1', new BABYLON.Vector3(85,8,0), scene); var lightSphereMoon = BABYLON.Mesh.CreateSphere("Sphered", 16, 20, scene); lightSphereMoon.material = new BABYLON.StandardMaterial("yellow", scene); lightSphereMoon.material.diffuseColor = new BABYLON.Color3(255, 255, 0); lightSphereMoon.material.specularColor = new BABYLON.Color3(255, 255, 0); lightSphereMoon.material.emissiveColor = new BABYLON.Color3(255, 255, 0); lightSphereMoon.position.y=8; lightSphereMoon.position.x=85; // lightSphereMoon.parent=light; PeachHeart(5,0,0,function(i,x,z){ var Mycylinder = BABYLON.Mesh.CreateCylinder("MYcylinder"+i, 1, 0.5, 0.5, 9, 0.2, scene, false); Mycylinder.position.y = 1; Mycylinder.position.x=x; Mycylinder.position.z=z; var MymaterialSphere2 = new BABYLON.StandardMaterial("MYtexture"+i, scene); MymaterialSphere2.alpha = 0.5 //创建球 var Mysphere = BABYLON.Mesh.CreateSphere('Mysphere'+i, 16, 0.5, scene); //球基于圆桶定位 Mysphere.parent=Mycylinder; //高于圆桶距离 Mysphere.position.y = 0.7; Mysphere.material = MymaterialSphere2; Mysphere.material.diffuseColor = new BABYLON.Color3(0, 0, 0); Mysphere.material.specularColor = new BABYLON.Color3(0, 0, 0); Mysphere.material.emissiveColor = new BABYLON.Color3(1, 0, 0); //创建光源 // var Mylight0 = new BABYLON.PointLight("MYOmni"+i, new BABYLON.Vector3(1, 1, 1), scene); // Mylight0.diffuse = new BABYLON.Color3(1, 0, 0); // Mylight0.specular = new BABYLON.Color3(1, 0, 0); // Mylight0.position = new BABYLON.Vector3(0, 2, 0); // //光源基于球定位 // Mylight0.parent=Mysphere; // Mylight0.position.y = 0.0; // console.log('Mylight0|x:' + Mycylinder.position.x+"|y:"+Mycylinder.position.y+"|z:"+Mycylinder.position.z); }); //建立一个光源（环形） var lightRound = new BABYLON.DirectionalLight("Dir0", new BABYLON.Vector3(1, -1, 0), scene); //建立一个球（环形） var lightSphereRound = BABYLON.Mesh.CreateSphere("Sphere0", 16, 0.5, scene); lightSphereRound.material = new BABYLON.StandardMaterial("yellow", scene); lightSphereRound.material.diffuseColor = new BABYLON.Color3(255, 255, 0); lightSphereRound.material.specularColor = new BABYLON.Color3(0, 0, 0); lightSphereRound.material.emissiveColor = new BABYLON.Color3(1, 0, 0); lightRound.diffuse = new BABYLON.Color3(1, 0, 0); lightRound.specular = new BABYLON.Color3(1, 0, 0); //建立一个光源（心形状） var lightHeart = new BABYLON.DirectionalLight("Dir1", new BABYLON.Vector3(1, -1, 0), scene); //建立一个球（心形状） var lightSphereHeart = BABYLON.Mesh.CreateSphere("Sphere1", 16, 0.5, scene); lightSphereHeart.material = new BABYLON.StandardMaterial("yellow", scene); lightSphereHeart.material.diffuseColor = new BABYLON.Color3(255, 255, 0); lightSphereHeart.material.specularColor = new BABYLON.Color3(0, 0, 0); lightSphereHeart.material.emissiveColor = new BABYLON.Color3(1, 0, 0); lightHeart.diffuse = new BABYLON.Color3(1, 0, 0); lightHeart.specular = new BABYLON.Color3(1, 0, 0); //建立一个光源（随机） var lightRandom = new BABYLON.DirectionalLight("Dir2", new BABYLON.Vector3(1, -1, 0), scene); //建立一个球（心形状） var lightSphereRandom = BABYLON.Mesh.CreateSphere("Sphere2", 16, 0.5, scene); lightSphereRandom.material = new BABYLON.StandardMaterial("yellow", scene); lightSphereRandom.material.diffuseColor = new BABYLON.Color3(255, 255, 0); lightSphereRandom.material.specularColor = new BABYLON.Color3(0, 0, 0); lightSphereRandom.material.emissiveColor = new BABYLON.Color3(1, 0, 0); lightRandom.diffuse = new BABYLON.Color3(1, 0, 0); lightRandom.specular = new BABYLON.Color3(1, 0, 0); //引入平面 var plane = BABYLON.Mesh.CreatePlane("plane", 120, scene); plane.position.y = 0; plane.rotation.x = Math.PI / 2; var materialPlane = new BABYLON.StandardMaterial("texturePlane", scene); materialPlane.diffuseTexture = new BABYLON.Texture("map/30_19271_39b80eb49d9f0c3.jpg", scene); materialPlane.diffuseTexture.uScale = 5.0;//Repeat 5 times on the Vertical Axes materialPlane.diffuseTexture.vScale = 5.0;//Repeat 5 times on the Horizontal Axes materialPlane.backFaceCulling = false;//Always show the front and the back of an element plane.material = materialPlane; var alpha = 0; scene.beforeRender = function () { //环形球旋转 lightRound.position = new BABYLON.Vector3(10 * Math.sin(alpha), 1.7, 10 * Math.cos(alpha)); lightSphereRound.position = lightRound.position; //心型环绕旋转 PeachHeartFlight(alpha,function(sx,sy){ //console.log('|x:' + sx+"|y:"+sy); lightHeart.position = new BABYLON.Vector3(sx, 0, sy); lightSphereHeart.position = lightHeart.position; }); lightRandom.position = new BABYLON.Vector3(lightRandom.position.x+Math.random()-0.5, 2, lightRandom.position.z+Math.random()-0.5); lightSphereRandom.position = lightRandom.position; alpha += 0.01; }; // 返回该场景 return scene; } //赋予该场景于变量 var scene = createScene(); //在引擎中循环运行这个场景 engine.runRenderLoop(function(){ scene.render(); }); //追加事件：帆布与大小调整程序 window.addEventListener('resize', function(){ engine.resize(); }); }); function PeachHeart(r,dx,dy,callback){ var m,n,x,y,i; //i的最大值*自增长值等于10为合适 for(i = 0; i <= 25; i += 0.4){ m = i; n = -r * (((Math.sin(i) * Math.sqrt(Math.abs(Math.cos(i)))) / (Math.sin(i) + 1.4)) - 2 * Math.sin(i) + 2); x = n * Math.cos(m) + dx; y = n * Math.sin(m) + dy; //console.log(i+'|x:' + x+"|y:"+y); callback(i,x,y); } } function PeachHeartFlight(m,callback){ m=m%1000; //console.log('|m:' + m); var n,x,y,i; //i的最大值*自增长值等于10为合适 i = m; n = -6 * (((Math.sin(i) * Math.sqrt(Math.abs(Math.cos(i)))) / (Math.sin(i) + 1.4)) - 2 * Math.sin(i) + 2); x = n * Math.cos(m) + 0; y = n * Math.sin(m) + 0; //console.log('|x:' + x+"|y:"+y); callback(x,y); } </script> </body> </html>
- 步骤6：box拼凑日期
这时候要完成一多个高度一致的box摆放。最后字体为20160122
这里按照计算器式的写法。我们要实现一个比划，然后旋转摆放
现在让我们下放一个box
var box = BABYLON.Mesh.CreateBox("box", 6.0, scene);
然后将box拉伸成长扁的形状，并放置在合适的位置
//日期形成的笔画 var box = BABYLON.Mesh.CreateBox("box", 5.0, scene); box.position.x = -20; box.position.z = 20; box.position.y = 2.5; box.scaling.x=0.2;
实现结果如下
接下来就改为批量计算打印即可
关于2的计算（中心点）
x，y的格式。以此形成比划组合。接着横线和纵线给予不同标识
//日期形成的笔画 var str2="1,4,0$2,3,1$1,2,0$0,1,1$1,0,0"; var str0="0,3,1$0,1,1$1,4,0$2,3,1$2,1,1$1,0,0"; var str1="2,3,1$2,1,1"; var str6="1,4,0$0,3,1$0,1,1$1,2,0$2,1,1$1,0,0"; coordinateCalculation(str2,1,scene); coordinateCalculation(str0,2,scene); coordinateCalculation(str1,3,scene); coordinateCalculation(str6,4,scene); coordinateCalculation(str0,5,scene); coordinateCalculation(str1,6,scene); coordinateCalculation(str2,7,scene); coordinateCalculation(str2,8,scene);
function coordinateCalculation(str,seq,scene){ var lists=str.split("$"); //console.log(str+"|"+lists.length); for(var i=0;i<lists.length;i++){ var s=lists[i]; var xy=s.split(","); var box = BABYLON.Mesh.CreateBox("box", 2.0, scene); box.position.x = parseFloat(-20)+parseFloat(xy[0])+parseFloat(seq*3); box.position.z = parseFloat(20)+parseFloat(xy[1]); box.position.y = 1; if(xy[2]=='0'){ box.rotation.y=1.6; } box.scaling.x=0.2; //console.log('|x:' + box.position.x+"|z"+box.position.z+"|"+xy[1]+"|"+s); } }
至此，大功告成。这一阶段练习结束。
源码如下：
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html" charset="utf-8"/> <title>Babylon - Getting Started</title> <!-- link to the last version of babylon --> <script src="js/babylon.2.2.max.js"></script> </head> <style> html, body { overflow: hidden; width : 100%; height : 100%; margin : 0; padding : 0; } #renderCanvas { width : 100%; height : 100%; touch-action: none; } </style> <body> <canvas id="renderCanvas"></canvas> <script> window.addEventListener('DOMContentLoaded', function() { //获取画布对象 var canvas = document.getElementById('renderCanvas'); //加载巴比伦3D引擎 var engine = new BABYLON.Engine(canvas, true); //创建场景 var createScene = function() { // 通过引擎创建基本场景 var scene = new BABYLON.Scene(engine); // 创建一个开放免费的相机，地点位于x:0(横向距离), y:5(高度), z:-10(纵向距离) var camera = new BABYLON.FreeCamera('camera1', new BABYLON.Vector3(9, 95,50), scene); // 相机到场景的起源 camera.setTarget(BABYLON.Vector3.Zero()); // 相机放置画布 camera.attachControl(canvas, false); // 创建基本光源, 目标位于 x:0,y:1,z:0 -(由天空出现) var light = new BABYLON.HemisphericLight('light1', new BABYLON.Vector3(85,8,0), scene); var lightSphereMoon = BABYLON.Mesh.CreateSphere("Sphered", 16, 20, scene); lightSphereMoon.material = new BABYLON.StandardMaterial("yellow", scene); lightSphereMoon.material.diffuseColor = new BABYLON.Color3(255, 255, 0); lightSphereMoon.material.specularColor = new BABYLON.Color3(255, 255, 0); lightSphereMoon.material.emissiveColor = new BABYLON.Color3(255, 255, 0); lightSphereMoon.position.y=8; lightSphereMoon.position.x=85; // lightSphereMoon.parent=light; PeachHeart(5,0,0,function(i,x,z){ var Mycylinder = BABYLON.Mesh.CreateCylinder("MYcylinder"+i, 1, 0.5, 0.5, 9, 0.2, scene, false); Mycylinder.position.y = 1; Mycylinder.position.x=x; Mycylinder.position.z=z; var MymaterialSphere2 = new BABYLON.StandardMaterial("MYtexture"+i, scene); MymaterialSphere2.alpha = 0.5 //创建球 var Mysphere = BABYLON.Mesh.CreateSphere('Mysphere'+i, 16, 0.5, scene); //球基于圆桶定位 Mysphere.parent=Mycylinder; //高于圆桶距离 Mysphere.position.y = 0.7; Mysphere.material = MymaterialSphere2; Mysphere.material.diffuseColor = new BABYLON.Color3(0, 0, 0); Mysphere.material.specularColor = new BABYLON.Color3(0, 0, 0); Mysphere.material.emissiveColor = new BABYLON.Color3(1, 0, 0); //创建光源 // var Mylight0 = new BABYLON.PointLight("MYOmni"+i, new BABYLON.Vector3(1, 1, 1), scene); // Mylight0.diffuse = new BABYLON.Color3(1, 0, 0); // Mylight0.specular = new BABYLON.Color3(1, 0, 0); // Mylight0.position = new BABYLON.Vector3(0, 2, 0); // //光源基于球定位 // Mylight0.parent=Mysphere; // Mylight0.position.y = 0.0; // console.log('Mylight0|x:' + Mycylinder.position.x+"|y:"+Mycylinder.position.y+"|z:"+Mycylinder.position.z); }); //建立一个光源（环形） var lightRound = new BABYLON.DirectionalLight("Dir0", new BABYLON.Vector3(1, -1, 0), scene); //建立一个球（环形） var lightSphereRound = BABYLON.Mesh.CreateSphere("Sphere0", 16, 0.5, scene); lightSphereRound.material = new BABYLON.StandardMaterial("yellow", scene); lightSphereRound.material.diffuseColor = new BABYLON.Color3(255, 255, 0); lightSphereRound.material.specularColor = new BABYLON.Color3(0, 0, 0); lightSphereRound.material.emissiveColor = new BABYLON.Color3(1, 0, 0); lightRound.diffuse = new BABYLON.Color3(1, 0, 0); lightRound.specular = new BABYLON.Color3(1, 0, 0); //建立一个光源（心形状） var lightHeart = new BABYLON.DirectionalLight("Dir1", new BABYLON.Vector3(1, -1, 0), scene); //建立一个球（心形状） var lightSphereHeart = BABYLON.Mesh.CreateSphere("Sphere1", 16, 0.5, scene); lightSphereHeart.material = new BABYLON.StandardMaterial("yellow", scene); lightSphereHeart.material.diffuseColor = new BABYLON.Color3(255, 255, 0); lightSphereHeart.material.specularColor = new BABYLON.Color3(0, 0, 0); lightSphereHeart.material.emissiveColor = new BABYLON.Color3(1, 0, 0); lightHeart.diffuse = new BABYLON.Color3(1, 0, 0); lightHeart.specular = new BABYLON.Color3(1, 0, 0); //建立一个光源（随机） var lightRandom = new BABYLON.DirectionalLight("Dir2", new BABYLON.Vector3(1, -1, 0), scene); //建立一个球（心形状） var lightSphereRandom = BABYLON.Mesh.CreateSphere("Sphere2", 16, 0.5, scene); lightSphereRandom.material = new BABYLON.StandardMaterial("yellow", scene); lightSphereRandom.material.diffuseColor = new BABYLON.Color3(255, 255, 0); lightSphereRandom.material.specularColor = new BABYLON.Color3(0, 0, 0); lightSphereRandom.material.emissiveColor = new BABYLON.Color3(1, 0, 0); lightRandom.diffuse = new BABYLON.Color3(1, 0, 0); lightRandom.specular = new BABYLON.Color3(1, 0, 0); //引入平面 var plane = BABYLON.Mesh.CreatePlane("plane", 120, scene); plane.position.y = 0; plane.rotation.x = Math.PI / 2; var materialPlane = new BABYLON.StandardMaterial("texturePlane", scene); materialPlane.diffuseTexture = new BABYLON.Texture("map/30_19271_39b80eb49d9f0c3.jpg", scene); materialPlane.diffuseTexture.uScale = 5.0;//Repeat 5 times on the Vertical Axes materialPlane.diffuseTexture.vScale = 5.0;//Repeat 5 times on the Horizontal Axes materialPlane.backFaceCulling = false;//Always show the front and the back of an element plane.material = materialPlane; //日期形成的笔画 var str2="1,4,0$2,3,1$1,2,0$0,1,1$1,0,0"; var str0="0,3,1$0,1,1$1,4,0$2,3,1$2,1,1$1,0,0"; var str1="2,3,1$2,1,1"; var str6="1,4,0$0,3,1$0,1,1$1,2,0$2,1,1$1,0,0"; coordinateCalculation(str2,1,scene); coordinateCalculation(str0,2,scene); coordinateCalculation(str1,3,scene); coordinateCalculation(str6,4,scene); coordinateCalculation(str0,5,scene); coordinateCalculation(str1,6,scene); coordinateCalculation(str2,7,scene); coordinateCalculation(str2,8,scene); var alpha = 0; scene.beforeRender = function () { //环形球旋转 lightRound.position = new BABYLON.Vector3(10 * Math.sin(alpha), 1.7, 10 * Math.cos(alpha)); lightSphereRound.position = lightRound.position; //心型环绕旋转 PeachHeartFlight(alpha,function(sx,sy){ //console.log('|x:' + sx+"|y:"+sy); lightHeart.position = new BABYLON.Vector3(sx, 0, sy); lightSphereHeart.position = lightHeart.position; }); lightRandom.position = new BABYLON.Vector3(lightRandom.position.x+Math.random()-0.5, 2, lightRandom.position.z+Math.random()-0.5); lightSphereRandom.position = lightRandom.position; alpha += 0.01; }; // 返回该场景 return scene; } //赋予该场景于变量 var scene = createScene(); //在引擎中循环运行这个场景 engine.runRenderLoop(function(){ scene.render(); }); //追加事件：帆布与大小调整程序 window.addEventListener('resize', function(){ engine.resize(); }); }); function PeachHeart(r,dx,dy,callback){ var m,n,x,y,i; //i的最大值*自增长值等于10为合适 for(i = 0; i <= 25; i += 0.4){ m = i; n = -r * (((Math.sin(i) * Math.sqrt(Math.abs(Math.cos(i)))) / (Math.sin(i) + 1.4)) - 2 * Math.sin(i) + 2); x = n * Math.cos(m) + dx; y = n * Math.sin(m) + dy; //console.log(i+'|x:' + x+"|y:"+y); callback(i,x,y); } } function PeachHeartFlight(m,callback){ m=m%1000; //console.log('|m:' + m); var n,x,y,i; //i的最大值*自增长值等于10为合适 i = m; n = -6 * (((Math.sin(i) * Math.sqrt(Math.abs(Math.cos(i)))) / (Math.sin(i) + 1.4)) - 2 * Math.sin(i) + 2); x = n * Math.cos(m) + 0; y = n * Math.sin(m) + 0; //console.log('|x:' + x+"|y:"+y); callback(x,y); } function coordinateCalculation(str,seq,scene){ var lists=str.split("$"); //console.log(str+"|"+lists.length); for(var i=0;i<lists.length;i++){ var s=lists[i]; var xy=s.split(","); var box = BABYLON.Mesh.CreateBox("box", 2.0, scene); box.position.x = parseFloat(-20)+parseFloat(xy[0])+parseFloat(seq*3); box.position.z = parseFloat(20)+parseFloat(xy[1]); box.position.y = 1; if(xy[2]=='0'){ box.rotation.y=1.6; } box.scaling.x=0.2; //console.log('|x:' + box.position.x+"|z"+box.position.z+"|"+xy[1]+"|"+s); } } </script> </body> </html>
2016-01-22
