初学WebGL引擎-BabylonJS:第7篇-粒子效果,环境与高处的地图
【playground】-particles(粒子效果)
源码
var createScene = function () { var scene = new BABYLON.Scene(engine); // Setup environment var light0 = new BABYLON.PointLight("Omni", new BABYLON.Vector3(0, 2, 8), scene); var camera = new BABYLON.ArcRotateCamera("ArcRotateCamera", 1, 0.8, 20, new BABYLON.Vector3(0, 0, 0), scene); camera.attachControl(canvas, true); // Fountain object var fountain = BABYLON.Mesh.CreateBox("foutain", 1.0, scene); // Ground var ground = BABYLON.Mesh.CreatePlane("ground", 50.0, scene); ground.position = new BABYLON.Vector3(0, -10, 0); ground.rotation = new BABYLON.Vector3(Math.PI / 2, 0, 0); ground.material = new BABYLON.StandardMaterial("groundMat", scene); ground.material.backFaceCulling = false; ground.material.diffuseColor = new BABYLON.Color3(0.3, 0.3, 1); // Create a particle system var particleSystem = new BABYLON.ParticleSystem("particles", 2000, scene); //Texture of each particle particleSystem.particleTexture = new BABYLON.Texture("textures/flare.png", scene); // Where the particles come from particleSystem.emitter = fountain; // the starting object, the emitter particleSystem.minEmitBox = new BABYLON.Vector3(-1, 0, 0); // Starting all from particleSystem.maxEmitBox = new BABYLON.Vector3(1, 0, 0); // To... // Colors of all particles particleSystem.color1 = new BABYLON.Color4(0.7, 0.8, 1.0, 1.0); particleSystem.color2 = new BABYLON.Color4(0.2, 0.5, 1.0, 1.0); particleSystem.colorDead = new BABYLON.Color4(0, 0, 0.2, 0.0); // Size of each particle (random between... particleSystem.minSize = 0.1; particleSystem.maxSize = 0.5; // Life time of each particle (random between... particleSystem.minLifeTime = 0.3; particleSystem.maxLifeTime = 1.5; // Emission rate particleSystem.emitRate = 1500; // Blend mode : BLENDMODE_ONEONE, or BLENDMODE_STANDARD particleSystem.blendMode = BABYLON.ParticleSystem.BLENDMODE_ONEONE; // Set the gravity of all particles particleSystem.gravity = new BABYLON.Vector3(0, -9.81, 0); // Direction of each particle after it has been emitted particleSystem.direction1 = new BABYLON.Vector3(-7, 8, 3); particleSystem.direction2 = new BABYLON.Vector3(7, 8, -3); // Angular speed, in radians particleSystem.minAngularSpeed = 0; particleSystem.maxAngularSpeed = Math.PI; // Speed particleSystem.minEmitPower = 1; particleSystem.maxEmitPower = 3; particleSystem.updateSpeed = 0.005; // Start the particle system particleSystem.start(); // Fountain's animation var keys = []; var animation = new BABYLON.Animation("animation", "rotation.x", 30, BABYLON.Animation.ANIMATIONTYPE_FLOAT, BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE); // At the animation key 0, the value of scaling is "1" keys.push({ frame: 0, value: 0 }); // At the animation key 50, the value of scaling is "0.2" keys.push({ frame: 50, value: Math.PI }); // At the animation key 100, the value of scaling is "1" keys.push({ frame: 100, value: 0 }); // Launch animation animation.setKeys(keys); fountain.animations.push(animation); scene.beginAnimation(fountain, 0, 100, true); return scene; }
效果
喷的到处都是
话说忘了引图,成了这么一个东西
到处喷射粉红色马赛克
好了言归正传,简单翻译后如下
var createScene = function () { var scene = new BABYLON.Scene(engine); // 点光源 var light0 = new BABYLON.PointLight("Omni", new BABYLON.Vector3(0, 2, 8), scene); //电弧相机 var camera = new BABYLON.ArcRotateCamera("ArcRotateCamera", 1, 0.8, 20, new BABYLON.Vector3(0, 0, 0), scene); camera.attachControl(canvas, true); // 箱子 var fountain = BABYLON.Mesh.CreateBox("foutain", 1.0, scene); // 平面 var ground = BABYLON.Mesh.CreatePlane("ground", 50.0, scene); ground.position = new BABYLON.Vector3(0, -10, 0); ground.rotation = new BABYLON.Vector3(Math.PI / 2, 0, 0); // 平面材质 ground.material = new BABYLON.StandardMaterial("groundMat", scene); ground.material.backFaceCulling = false; ground.material.diffuseColor = new BABYLON.Color3(0.3, 0.3, 1); // 创建一个粒子系统(2000是指粒子数) var particleSystem = new BABYLON.ParticleSystem("particles", 2000, scene); //粒子的纹理 particleSystem.particleTexture = new BABYLON.Texture("map/flare.png", scene); // 粒子的来源 particleSystem.emitter = fountain; // 从箱子那发射 particleSystem.minEmitBox = new BABYLON.Vector3(-1, 0, 0); //最小发射 particleSystem.maxEmitBox = new BABYLON.Vector3(1, 0, 0); //最大发射(基于轴的延伸,建议改这里的数值体验) // 粒子颜色 particleSystem.color1 = new BABYLON.Color4(0.7, 0.8, 1.0, 1.0); particleSystem.color2 = new BABYLON.Color4(0.2, 0.5, 1.0, 1.0); particleSystem.colorDead = new BABYLON.Color4(0, 0, 0.2, 0.0); // 粒子大小区间 particleSystem.minSize = 0.1; particleSystem.maxSize = 0.5; // 粒子寿命 particleSystem.minLifeTime = 0.3; particleSystem.maxLifeTime = 1.5; // 发射率 particleSystem.emitRate = 1500; // 混合模式 : BLENDMODE_ONEONE(基于某地的混合模式), or BLENDMODE_STANDARD(标准的混合模式) particleSystem.blendMode = BABYLON.ParticleSystem.BLENDMODE_ONEONE; // 粒子重力 particleSystem.gravity = new BABYLON.Vector3(0, -9.81, 0); // 粒子喷射方向 particleSystem.direction1 = new BABYLON.Vector3(-7, 8, 3); particleSystem.direction2 = new BABYLON.Vector3(7, 8, -3); // 角速度,弧度 particleSystem.minAngularSpeed = 0; particleSystem.maxAngularSpeed = Math.PI; // 速度 particleSystem.minEmitPower = 1; particleSystem.maxEmitPower = 3; particleSystem.updateSpeed = 0.005; // 开始粒子系统 particleSystem.start(); // 喷射的动画 var keys = []; var animation = new BABYLON.Animation("animation", "rotation.x", 30, BABYLON.Animation.ANIMATIONTYPE_FLOAT, BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE); // At the animation key 0, the value of scaling is "1" keys.push({ frame: 0, value: 0 }); // At the animation key 50, the value of scaling is "0.2" keys.push({ frame: 50, value: Math.PI }); // At the animation key 100, the value of scaling is "1" keys.push({ frame: 100, value: 0 }); // 附加动画参数 animation.setKeys(keys); // 动画作用于箱子 fountain.animations.push(animation); scene.beginAnimation(fountain, 0, 100, true); return scene; }
这里准备做一个旋转的喷射炮出来(春节放的鞭炮类似)
先来一个圆桶
//炮 var cylinder = BABYLON.Mesh.CreateCylinder("cylinder", 1, 0.5, 0.5, 9, 0.2, scene, false); cylinder.position = new BABYLON.Vector3(7, 0, 0); cylinder.rotation.x=4.75;
然后我们注释掉箱子和他的动画
接着我们做一个粒子系统出来
代码
//喷射炮的粒子系统开始 var particleSystem = new BABYLON.ParticleSystem("particles", 3000, scene); //粒子的纹理 particleSystem.particleTexture = new BABYLON.Texture("map/flare.png", scene); //粒子的来源 particleSystem.emitter = cylinder; // 从箱子那发射 particleSystem.minEmitBox = new BABYLON.Vector3(-1, 0, 0); //最小发射 particleSystem.maxEmitBox = new BABYLON.Vector3(1, 0, 0); //最大发射(基于轴的延伸,建议改这里的数值体验) //粒子颜色 particleSystem.color1 = new BABYLON.Color4(0.7, 0.8, 1.0, 1.0); particleSystem.color2 = new BABYLON.Color4(0.2, 0.5, 1.0, 1.0); particleSystem.colorDead = new BABYLON.Color4(0, 0, 0.2, 0.0); //粒子大小区间 particleSystem.minSize = 0.1; particleSystem.maxSize = 1; //粒子寿命 particleSystem.minLifeTime = 0.3; particleSystem.maxLifeTime = 1.0; //发射率 particleSystem.emitRate = 1500; //混合模式 : BLENDMODE_ONEONE(基于某地的混合模式), or BLENDMODE_STANDARD(标准的混合模式) particleSystem.blendMode = BABYLON.ParticleSystem.BLENDMODE_ONEONE; //粒子重力(注意:此处降低重力体现漂浮感) particleSystem.gravity = new BABYLON.Vector3(0, -3.81, 0); // 粒子喷射方向 particleSystem.direction1 = new BABYLON.Vector3(-7, 8, 3); particleSystem.direction2 = new BABYLON.Vector3(7, 8, -3); // 角速度,弧度 particleSystem.minAngularSpeed = 0; particleSystem.maxAngularSpeed = Math.PI; // 速度 particleSystem.minEmitPower = 1; particleSystem.maxEmitPower = 3; particleSystem.updateSpeed = 0.005; // 开始粒子系统 particleSystem.start(); //喷射炮的粒子系统结束
效果
接着需要达到几点。
1.喷射点前移
2.炮身旋转
3.喷射点旋转
先完成喷射点前移
效果如下
代码如下
particleSystem.emitter = cylinder; // 从箱子那发射 particleSystem.minEmitBox = new BABYLON.Vector3(-0.1, 0.7, 0); //最小发射 particleSystem.maxEmitBox = new BABYLON.Vector3(0.1, 0.7, 0); //最大发射(基于轴的延伸,建议改这里的数值体验)
接着我们让炮身产生旋转的动画
效果如下
代码如下
//炮身旋转动画 // 喷射的动画 var keys = []; var animation = new BABYLON.Animation("animation", "rotation.z", 30, BABYLON.Animation.ANIMATIONTYPE_FLOAT, BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE); keys.push({ frame: 0, value: 0 }); keys.push({ frame: 50, value: 3 }); keys.push({ frame: 100, value: 6 }); // 附加动画参数 animation.setKeys(keys); // 动画作用于箱子 cylinder.animations.push(animation); scene.beginAnimation(cylinder, 0, 100, true);
看来引擎比我想象的智能的多。当炮在移动的时候,相对喷射点也跟着进行了移动
完整代码如下:
<!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); // 点光源 var light0 = new BABYLON.PointLight("Omni", new BABYLON.Vector3(0, 2, 8), scene); //电弧相机 var camera = new BABYLON.ArcRotateCamera("ArcRotateCamera", 1, 0.8, 20, new BABYLON.Vector3(0, 0, 0), scene); camera.attachControl(canvas, true); // 箱子 // var fountain = BABYLON.Mesh.CreateBox("foutain", 1.0, scene); // fountain.position = new BABYLON.Vector3(-2, 0, 0); //炮 var cylinder = BABYLON.Mesh.CreateCylinder("cylinder", 1, 0.5, 0.5, 9, 0.2, scene, false); cylinder.position = new BABYLON.Vector3(0, 0, 0); cylinder.rotation.x=4.75; // 平面 var ground = BABYLON.Mesh.CreatePlane("ground", 50.0, scene); ground.position = new BABYLON.Vector3(0, -10, 0); ground.rotation = new BABYLON.Vector3(Math.PI / 2, 0, 0); // 平面材质 ground.material = new BABYLON.StandardMaterial("groundMat", scene); ground.material.backFaceCulling = false; ground.material.diffuseColor = new BABYLON.Color3(0.3, 0.3, 1); //喷射炮的粒子系统开始 var particleSystem = new BABYLON.ParticleSystem("particles", 3000, scene); //粒子的纹理 particleSystem.particleTexture = new BABYLON.Texture("map/flare.png", scene); //粒子的来源 particleSystem.emitter = cylinder; // 从箱子那发射 particleSystem.minEmitBox = new BABYLON.Vector3(-0.1, 0.7, 0); //最小发射 particleSystem.maxEmitBox = new BABYLON.Vector3(0.1, 0.7, 0); //最大发射(基于轴的延伸,建议改这里的数值体验) //粒子颜色 particleSystem.color1 = new BABYLON.Color4(0.7, 0.8, 1.0, 1.0); particleSystem.color2 = new BABYLON.Color4(0.2, 0.5, 1.0, 1.0); particleSystem.colorDead = new BABYLON.Color4(0, 0, 0.2, 0.0); //粒子大小区间 particleSystem.minSize = 0.1; particleSystem.maxSize = 1; //粒子寿命 particleSystem.minLifeTime = 0.3; particleSystem.maxLifeTime = 1.0; //发射率 particleSystem.emitRate = 1500; //混合模式 : BLENDMODE_ONEONE(基于某地的混合模式), or BLENDMODE_STANDARD(标准的混合模式) particleSystem.blendMode = BABYLON.ParticleSystem.BLENDMODE_ONEONE; //粒子重力(注意:此处降低重力体现漂浮感) particleSystem.gravity = new BABYLON.Vector3(0, -3.81, 0); // 粒子喷射方向 particleSystem.direction1 = new BABYLON.Vector3(-7, 8, 3); particleSystem.direction2 = new BABYLON.Vector3(7, 8, -3); // 角速度,弧度 particleSystem.minAngularSpeed = 0; particleSystem.maxAngularSpeed = Math.PI; // 速度 particleSystem.minEmitPower = 1; particleSystem.maxEmitPower = 3; particleSystem.updateSpeed = 0.005; // 开始粒子系统 particleSystem.start(); //喷射炮的粒子系统结束 //炮身旋转动画 // 喷射的动画 var keys = []; var animation = new BABYLON.Animation("animation", "rotation.z", 30, BABYLON.Animation.ANIMATIONTYPE_FLOAT, BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE); keys.push({ frame: 0, value: 0 }); keys.push({ frame: 50, value: 3 }); keys.push({ frame: 100, value: 6 }); // 附加动画参数 animation.setKeys(keys); // 动画作用于箱子 cylinder.animations.push(animation); scene.beginAnimation(cylinder, 0, 100, true); // // 创建一个粒子系统(2000是指粒子数) // var particleSystem = new BABYLON.ParticleSystem("particles", 2000, scene); // //粒子的纹理 // particleSystem.particleTexture = new BABYLON.Texture("map/flare.png", scene); // // 粒子的来源 // particleSystem.emitter = fountain; // 从箱子那发射 // particleSystem.minEmitBox = new BABYLON.Vector3(-1, 0, 0); //最小发射 // particleSystem.maxEmitBox = new BABYLON.Vector3(1, 0, 0); //最大发射(基于轴的延伸,建议改这里的数值体验) // // 粒子颜色 // particleSystem.color1 = new BABYLON.Color4(0.7, 0.8, 1.0, 1.0); // particleSystem.color2 = new BABYLON.Color4(0.2, 0.5, 1.0, 1.0); // particleSystem.colorDead = new BABYLON.Color4(0, 0, 0.2, 0.0); // // 粒子大小区间 // particleSystem.minSize = 0.1; // particleSystem.maxSize = 0.5; // // 粒子寿命 // particleSystem.minLifeTime = 0.3; // particleSystem.maxLifeTime = 1.5; // // 发射率 // particleSystem.emitRate = 1500; // // 混合模式 : BLENDMODE_ONEONE(基于某地的混合模式), or BLENDMODE_STANDARD(标准的混合模式) // particleSystem.blendMode = BABYLON.ParticleSystem.BLENDMODE_ONEONE; // // 粒子重力 // particleSystem.gravity = new BABYLON.Vector3(0, -9.81, 0); // // 粒子喷射方向 // particleSystem.direction1 = new BABYLON.Vector3(-7, 8, 3); // particleSystem.direction2 = new BABYLON.Vector3(7, 8, -3); // // 角速度,弧度 // particleSystem.minAngularSpeed = 0; // particleSystem.maxAngularSpeed = Math.PI; // // 速度 // particleSystem.minEmitPower = 1; // particleSystem.maxEmitPower = 3; // particleSystem.updateSpeed = 0.005; // // 开始粒子系统 // particleSystem.start(); // // 喷射的动画 // var keys = []; // var animation = new BABYLON.Animation("animation", "rotation.x", 30, BABYLON.Animation.ANIMATIONTYPE_FLOAT, // BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE); // // At the animation key 0, the value of scaling is "1" // keys.push({ // frame: 0, // value: 0 // }); // // At the animation key 50, the value of scaling is "0.2" // keys.push({ // frame: 50, // value: Math.PI // }); // // At the animation key 100, the value of scaling is "1" // keys.push({ // frame: 100, // value: 0 // }); // // 附加动画参数 // animation.setKeys(keys); // // 动画作用于箱子 // fountain.animations.push(animation); // scene.beginAnimation(fountain, 0, 100, true); return scene; } //赋予该场景于变量 var scene = createScene(); //在引擎中循环运行这个场景 engine.runRenderLoop(function(){ scene.render(); }); //追加事件:帆布与大小调整程序 window.addEventListener('resize', function(){ engine.resize(); }); }); </script> </body> </html>
【playground】-environment(环境)
源码
function createScene() { var scene = new BABYLON.Scene(engine); var light = new BABYLON.PointLight("Omni", new BABYLON.Vector3(10, 50, 50), scene); var camera = new BABYLON.ArcRotateCamera("Camera", 0.4, 1.2, 20, new BABYLON.Vector3(-10, 0, 0), scene); camera.attachControl(canvas, true); var material1 = new BABYLON.StandardMaterial("mat1", scene); material1.diffuseColor = new BABYLON.Color3(1, 1, 0); for (var i = 0; i < 10; i++) { var box = BABYLON.Mesh.CreateBox("Box", 1.0, scene); box.material = material1; box.position = new BABYLON.Vector3(-i * 5, 0, 0); } // Fog scene.fogMode = BABYLON.Scene.FOGMODE_EXP; //BABYLON.Scene.FOGMODE_NONE; //BABYLON.Scene.FOGMODE_EXP; //BABYLON.Scene.FOGMODE_EXP2; //BABYLON.Scene.FOGMODE_LINEAR; scene.fogColor = new BABYLON.Color3(0.9, 0.9, 0.85); scene.fogDensity = 0.01; //Only if LINEAR //scene.fogStart = 20.0; //scene.fogEnd = 60.0; // Skybox var skybox = BABYLON.Mesh.CreateBox("skyBox", 100.0, scene); var skyboxMaterial = new BABYLON.StandardMaterial("skyBox", scene); skyboxMaterial.backFaceCulling = false; skyboxMaterial.reflectionTexture = new BABYLON.CubeTexture("textures/skybox", scene); skyboxMaterial.reflectionTexture.coordinatesMode = BABYLON.Texture.SKYBOX_MODE; skyboxMaterial.diffuseColor = new BABYLON.Color3(0, 0, 0); skyboxMaterial.specularColor = new BABYLON.Color3(0, 0, 0); skyboxMaterial.disableLighting = true; skybox.material = skyboxMaterial; var alpha = 0; scene.registerBeforeRender(function () { scene.fogDensity = Math.cos(alpha) / 10; alpha += 0.02; }); return scene; };
效果
会伴随着天气变化
简单的翻译后
//创建场景 function createScene() { var scene = new BABYLON.Scene(engine); var light = new BABYLON.PointLight("Omni", new BABYLON.Vector3(10, 50, 50), scene); var camera = new BABYLON.ArcRotateCamera("Camera", 0.4, 1.2, 20, new BABYLON.Vector3(-10, 0, 0), scene); camera.attachControl(canvas, true); //建立一个标准材料 var material1 = new BABYLON.StandardMaterial("mat1", scene); material1.diffuseColor = new BABYLON.Color3(1, 1, 0); for (var i = 0; i < 10; i++) { //动态生成10个箱子 var box = BABYLON.Mesh.CreateBox("Box", 1.0, scene); box.material = material1; box.position = new BABYLON.Vector3(-i * 5, 0, 0); } // 雾的模式 scene.fogMode = BABYLON.Scene.FOGMODE_EXP; //BABYLON.Scene.FOGMODE_NONE;//无 //BABYLON.Scene.FOGMODE_EXP;//雾模式经验1? //BABYLON.Scene.FOGMODE_EXP2;//雾模式经验2? //BABYLON.Scene.FOGMODE_LINEAR;//线性 //雾颜色 scene.fogColor = new BABYLON.Color3(0.9, 0.9, 0.85); //雾的密度 scene.fogDensity = 0.01; //Only if LINEAR //scene.fogStart = 20.0; //scene.fogEnd = 60.0; // 天空的箱子(把相机处于一个大的箱子里面) var skybox = BABYLON.Mesh.CreateBox("skyBox", 100.0, scene); //创建一个天空的材料 var skyboxMaterial = new BABYLON.StandardMaterial("skyBox", scene); //背面效果 skyboxMaterial.backFaceCulling = false; //反射的材质 skyboxMaterial.reflectionTexture = new BABYLON.CubeTexture("textures/skybox", scene); //坐标模式-天空盒子 skyboxMaterial.reflectionTexture.coordinatesMode = BABYLON.Texture.SKYBOX_MODE; skyboxMaterial.diffuseColor = new BABYLON.Color3(0, 0, 0); skyboxMaterial.specularColor = new BABYLON.Color3(0, 0, 0); //禁止照明 skyboxMaterial.disableLighting = true; skybox.material = skyboxMaterial; var alpha = 0; scene.registerBeforeRender(function () { //动态处理雾密度 scene.fogDensity = Math.cos(alpha) / 10; alpha += 0.02; }); return scene; };
笔记:
1.雾的处理
2.天空盒子的处理
【playground】-height map(高处的地理)
源码:
var createScene = function () { var scene = new BABYLON.Scene(engine); // Light var spot = new BABYLON.PointLight("spot", new BABYLON.Vector3(0, 30, 10), scene); spot.diffuse = new BABYLON.Color3(1, 1, 1); spot.specular = new BABYLON.Color3(0, 0, 0); // Camera var camera = new BABYLON.ArcRotateCamera("Camera", 0, 0.8, 100, BABYLON.Vector3.Zero(), scene); camera.lowerBetaLimit = 0.1; camera.upperBetaLimit = (Math.PI / 2) * 0.9; camera.lowerRadiusLimit = 30; camera.upperRadiusLimit = 150; camera.attachControl(canvas, true); // Ground var groundMaterial = new BABYLON.StandardMaterial("ground", scene); groundMaterial.diffuseTexture = new BABYLON.Texture("textures/earth.jpg", scene); var ground = BABYLON.Mesh.CreateGroundFromHeightMap("ground", "textures/worldHeightMap.jpg", 200, 200, 250, 0, 10, scene, false); ground.material = groundMaterial; //Sphere to see the light's position var sun = BABYLON.Mesh.CreateSphere("sun", 10, 4, scene); sun.material = new BABYLON.StandardMaterial("sun", scene); sun.material.emissiveColor = new BABYLON.Color3(1, 1, 0); // Skybox var skybox = BABYLON.Mesh.CreateBox("skyBox", 800.0, scene); var skyboxMaterial = new BABYLON.StandardMaterial("skyBox", scene); skyboxMaterial.backFaceCulling = false; skyboxMaterial.reflectionTexture = new BABYLON.CubeTexture("textures/skybox", scene); skyboxMaterial.reflectionTexture.coordinatesMode = BABYLON.Texture.SKYBOX_MODE; skyboxMaterial.diffuseColor = new BABYLON.Color3(0, 0, 0); skyboxMaterial.specularColor = new BABYLON.Color3(0, 0, 0); skyboxMaterial.disableLighting = true; skybox.material = skyboxMaterial; //Sun animation scene.registerBeforeRender(function () { sun.position = spot.position; spot.position.x -= 0.5; if (spot.position.x < -90) spot.position.x = 100; }); return scene; }
效果:
看起来很高大上的地理处理。
这里我准备进行小的变更
[更改太阳的运动轨迹为弧线]
<!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); // 点光源 var spot = new BABYLON.PointLight("spot", new BABYLON.Vector3(0, 30, 10), scene); //扩散颜色 spot.diffuse = new BABYLON.Color3(1, 1, 1); //镜面颜色 spot.specular = new BABYLON.Color3(0, 0, 0); // 电弧相机 var camera = new BABYLON.ArcRotateCamera("Camera", 0, 0.8, 100, BABYLON.Vector3.Zero(), scene); //最低水平视野限制 camera.lowerBetaLimit = 0.1; //最高水平视野限制 camera.upperBetaLimit = (Math.PI / 2) * 0.9; //半径下限(远近) camera.lowerRadiusLimit = 30; //半径上限(远近) camera.upperRadiusLimit = 150; camera.attachControl(canvas, true); // 平面 var groundMaterial = new BABYLON.StandardMaterial("ground", scene); //平面贴图 groundMaterial.diffuseTexture = new BABYLON.Texture("textures/earth.jpg", scene); //根据高度产生的地图(参数未知) var ground = BABYLON.Mesh.CreateGroundFromHeightMap("ground", "textures/worldHeightMap.jpg", 200, 200, 250, 0, 10, scene, false); //基于平面之上 ground.material = groundMaterial; //球形太阳 var sun = BABYLON.Mesh.CreateSphere("sun", 10, 4, scene); sun.material = new BABYLON.StandardMaterial("sun", scene); sun.material.emissiveColor = new BABYLON.Color3(1, 1, 0); // 天空盒子 var skybox = BABYLON.Mesh.CreateBox("skyBox", 800.0, scene); var skyboxMaterial = new BABYLON.StandardMaterial("skyBox", scene); skyboxMaterial.backFaceCulling = false; skyboxMaterial.reflectionTexture = new BABYLON.CubeTexture("textures/skybox", scene); skyboxMaterial.reflectionTexture.coordinatesMode = BABYLON.Texture.SKYBOX_MODE; skyboxMaterial.diffuseColor = new BABYLON.Color3(0, 0, 0); skyboxMaterial.specularColor = new BABYLON.Color3(0, 0, 0); skyboxMaterial.disableLighting = true; skybox.material = skyboxMaterial; var sunH=1; //Sun animation scene.registerBeforeRender(function () { //太阳盒子与光源绑定 sun.position = spot.position; //计算位置变化 spot.position.x -= 0.5; sunH+=0.01; sun.position.y=(Math.sin(sunH)*20)+25; if (spot.position.x < -90){ spot.position.x = 100; sunH=0; } }); return scene; } //赋予该场景于变量 var scene = createScene(); //在引擎中循环运行这个场景 engine.runRenderLoop(function(){ scene.render(); }); //追加事件:帆布与大小调整程序 window.addEventListener('resize', function(){ engine.resize(); }); }); </script> </body> </html>
太阳的路径会因此变成一个弧线
本章到此结束
分类:
BabylonJS学习随笔
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 现代计算机视觉入门之:什么是视频
· 你所不知道的 C/C++ 宏知识
· 聊一聊 操作系统蓝屏 c0000102 的故障分析
· SQL Server 内存占用高分析
· .NET Core GC计划阶段(plan_phase)底层原理浅谈
· 盘点!HelloGitHub 年度热门开源项目
· 某Websocket反爬逆向分析+请求加解密+还原html
· DeepSeek V3 两周使用总结
· 02现代计算机视觉入门之:什么是视频
· 回顾我的软件开发经历:我与代码生成器的涅槃之路