初學WebGL引擎-BabylonJS：第2篇-基礎模型體驗

本文轉載自查看原文 2016-01-21 21:48 2770 BabylonJS學習隨筆

此次學習進度會比之前快很多，有了合適的學習方法后也就會有更多的樂趣產生了。

接上一章代碼

上章代碼

<!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="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;

            // 創建一個內置的“地面”，它的構造函數包括5個參數:名稱、寬度、深度、細分,場景
            var ground = BABYLON.Mesh.CreateGround('ground1', 6, 6, 2, scene);

            // 返回該場景
            return scene;
        }
        //賦予該場景於變量
        var scene = createScene();
        //在引擎中循環運行這個場景
        engine.runRenderLoop(function(){
            scene.render();
        });
        //追加事件：帆布與大小調整程序
        window.addEventListener('resize', function(){
            engine.resize();
        });
    });
    

</script>
</body>
</html>

運行結果

【playground】-basic scene（基礎場景）

本部分同上述代碼相同。跳過

【playground】-basic elements（基礎元素）

本部分引用了新鏡頭

ArcRotateCamera

該鏡頭可以鎖定一個點成球形觀察

以及多個控件的使用

HemisphericLight：燈關

box：箱

sphere：球

plane：平面

cylinder：油缸

torus：環

TorusKnot：環結

lines：線

ribbon：絲帶

下面是官方源碼：

var createScene = function () {
    var scene = new BABYLON.Scene(engine);

    var camera = new BABYLON.ArcRotateCamera("Camera", 3 * Math.PI / 2, Math.PI / 8, 50, BABYLON.Vector3.Zero(), scene);

    camera.attachControl(canvas, true);

    var light = new BABYLON.HemisphericLight("hemi", new BABYLON.Vector3(0, 1, 0), scene);

    //Creation of a box
    //(name of the box, size, scene)
    var box = BABYLON.Mesh.CreateBox("box", 6.0, scene);

    //Creation of a sphere 
    //(name of the sphere, segments, diameter, scene) 
    var sphere = BABYLON.Mesh.CreateSphere("sphere", 10.0, 10.0, scene);

    //Creation of a plan
    //(name of the plane, size, scene)
    var plan = BABYLON.Mesh.CreatePlane("plane", 10.0, scene);

    //Creation of a cylinder
    //(name, height, diameter, tessellation, scene, updatable)
    var cylinder = BABYLON.Mesh.CreateCylinder("cylinder", 3, 3, 3, 6, 1, scene, false);

    // Creation of a torus
    // (name, diameter, thickness, tessellation, scene, updatable)
    var torus = BABYLON.Mesh.CreateTorus("torus", 5, 1, 10, scene, false);

    // Creation of a knot
    // (name, radius, tube, radialSegments, tubularSegments, p, q, scene, updatable)
    var knot = BABYLON.Mesh.CreateTorusKnot("knot", 2, 0.5, 128, 64, 2, 3, scene);

    // Creation of a lines mesh
    var lines = BABYLON.Mesh.CreateLines("lines", [
        new BABYLON.Vector3(-10, 0, 0),
        new BABYLON.Vector3(10, 0, 0),
        new BABYLON.Vector3(0, 0, -10),
        new BABYLON.Vector3(0, 0, 10)
    ], scene);

    // Creation of a ribbon
    // let's first create many paths along a maths exponential function as an example 
    var exponentialPath = function (p) {
        var path = [];
        for (var i = -10; i < 10; i++) {
            path.push(new BABYLON.Vector3(p, i, Math.sin(p / 3) * 5 * Math.exp(-(i - p) * (i - p) / 60) + i / 3));
        }
        return path;
    };
    // let's populate arrayOfPaths with all these different paths
    var arrayOfPaths = [];
    for (var p = 0; p < 20; p++) {
        arrayOfPaths[p] = exponentialPath(p);
    }

    // (name, array of paths, closeArray, closePath, offset, scene)
    var ribbon = BABYLON.Mesh.CreateRibbon("ribbon", arrayOfPaths, false, false, 0, scene);


    // Moving elements
    box.position = new BABYLON.Vector3(-10, 0, 0);   // Using a vector
    sphere.position = new BABYLON.Vector3(0, 10, 0); // Using a vector
    plan.position.z = 10;                            // Using a single coordinate component
    cylinder.position.z = -10;
    torus.position.x = 10;
    knot.position.y = -10;
    ribbon.position = new BABYLON.Vector3(-10, -10, 20);

    return scene;
}

建議調整不同的參數查看不同的效果

學到這里，我的愛人聯系到我。突發奇想，寫一個英文單詞出來如何？

那么我就開始琢磨，就寫一個[LOVE]給愛人吧。

由於本人技術拙略，就按照了以下方式處理

L：使用lines完成

O：使用torus完成

V：使用lines完成

E：適用lines完成

鏡頭：由上至下最好

於是便有了下面的代碼

<!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="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(0, 10,0), 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);

            var lines = BABYLON.Mesh.CreateLines("lines", [
                new BABYLON.Vector3(0, 0, 2.5),
                new BABYLON.Vector3(0, 0, 0),
                new BABYLON.Vector3(1, 0, 0),
            ], scene);
            var torus = BABYLON.Mesh.CreateTorus("torus", 2, 0.1, 16, scene, false);
            torus.position.x = 2.3;
            torus.position.z = 1;
            var lines = BABYLON.Mesh.CreateLines("lines", [
                new BABYLON.Vector3(3.5, 0, 2.5),
                new BABYLON.Vector3(4, 0, 0),
                new BABYLON.Vector3(5, 0, 2.5),
            ], scene);
            var lines = BABYLON.Mesh.CreateLines("lines", [
                new BABYLON.Vector3(6, 0, 2.5),
                new BABYLON.Vector3(5, 0, 2.5),
                new BABYLON.Vector3(5, 0, 1.75),
                new BABYLON.Vector3(6, 0, 1.75),
                new BABYLON.Vector3(5, 0, 1.75),
                new BABYLON.Vector3(5, 0, 0),
                new BABYLON.Vector3(6, 0, 0),
            ], scene);
            // 返回該場景
            return scene;
        }
        //賦予該場景於變量
        var scene = createScene();
        //在引擎中循環運行這個場景
        engine.runRenderLoop(function(){
            scene.render();
        });
        //追加事件：帆布與大小調整程序
        window.addEventListener('resize', function(){
            engine.resize();
        });
    });
    

</script>
</body>
</html>

生成后記得左鍵鼠標，切換鏡頭。目前還沒處理好鏡頭的初始位置

以下是看到的結果

哈哈，大功告成。這里可以發散思維完成更有趣的東西。

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 初學WebGL引擎-BabylonJS：第1篇-基礎構造初學WebGL引擎-BabylonJS：第4篇-燈光動畫與叢林場景基於Babylonjs自制WebGL3D模型編輯器 Webgl中的基礎模型繪制基礎篇——Pycharm的安裝與使用初學者此篇夠用（一）SpringBoot2.0基礎篇- 介紹及HelloWorld初體驗 Redis基礎篇（二）高性能IO模型 webgl圖庫研究（包括BabylonJS、Threejs、LayaboxJS、SceneJS、ThingJS等框架的特性、適用范圍、支持格式、優缺點、相關網址） webgl圖庫研究（包括BabylonJS、Threejs、LayaboxJS、SceneJS、ThingJS等框架的特性、適用范圍、支持格式、優缺點、相關網址） .net 開源模板引擎jntemplate 教程：基礎篇之語法