初学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);

效果

你可能感兴趣的:(初学WebGL引擎-BabylonJS:第5篇-学习挑战:草地上桃心蜡烛)