Öğretici: bir sahne hazırlama

Bir sahnenin nasıl hazırlanacağını ve buna bazı temel 3B öğeler nasıl ekleneceğini öğrenin.

Bu öğreticide şunların nasıl yapıldığını öğrenirsiniz:

  • Sahne oluşturma
  • Kamera Ekle
  • Işık Ekle
  • Temel 3B öğeleri ekle

Başlamadan önce

Önceki öğretici adımında temel bir Web sayfası oluşturulmuştur. Web sayfasının düzenlenmek üzere açılmasını sağlayabilirsiniz.

<html>
    <head>
        <title>Babylon.js sample code</title>
        <script src="https://cdn.babylonjs.com/babylon.js"></script>
        <style>
            body,#renderCanvas { width: 100%; height: 100%;}
        </style>
    </head>
<body>
    <canvas id="renderCanvas"></canvas>
</body>
</html>

Sahne oluşturma

Bir sahne, tüm içeriklerin görüntüleneceği yerdir. Birden çok sahne olabilir ve sahneler arasında geçiş yapılabilir. babylon.js sahneyihakkında daha fazla bilgi edinin.

  1. Tuval HTML öğesinden sonra betik etiketini ekleyin ve siyah renkli doldurulmuş bir sahne oluşturmak için aşağıdaki kodu ekleyin:

    <script type="text/javascript">
        const canvas = document.getElementById("renderCanvas");
        const engine = new BABYLON.Engine(canvas, true);
    
        const createScene = function() {
            const scene = new BABYLON.Scene(engine);
            scene.clearColor = new BABYLON.Color3.Black;
            return scene;
        }
    
        const sceneToRender = createScene();
    </script>
    

    Yukarıdaki kodda, tuvalde bir sahne ve kanca olayları işleyen babylon.js Web işleme altyapısının bir örneğini oluşturmanız gerekir. Motor hakkında daha fazla bilgi için, Babylon. Engine belge sayfasını kontrol edin.

  2. Sahne varsayılan olarak işlenmez. Birden çok sahne olabileceğini ve hangi sahnenin görüntülendiğini kontrol etmeyi unutmayın. Her karede sahneyi art arda işlemek için, Createsahnenin işlevini çağırarak aşağıdaki kodu yürütün:

    engine.runRenderLoop(function () {
        sceneToRender.render();
    });
    

Temel 3B öğe Ekle

  1. İlk 3B şekilmizi ekleyelim. 3B sanal dünyada şekiller, kafeslerdenoluşturulmuştur, her biri üç köşelerden oluşan her bir şekilde birleştirilir. Önceden tanımlanmış bir ağ kullanabilir ya da kendi özel ağ oluşturma kullanabilirsiniz. Burada, bir küp olarak önceden tanımlanmış bir Box ağı kullanacağız. Kutuyu oluşturmak için Babylon kullanın. MeshBuilder. CreateBox. Parametreler adı ve seçenekleridir (Seçenekler, ağ türüne göre farklılık gösterilir). Aşağıdaki kodu Createsahfunctionöğesine ekleyin:

    const box = BABYLON.MeshBuilder.CreateBox("box", {});
    box.position.x = 0.5;
    box.position.y = 1;
    
  2. Microsoft Edge tarayıcısında web sayfasını açın ve çıktıyı kontrol edin. Tarayıcı penceresinde boş bir sayfa görüntülenir. klavyeyi kullanarak devtools 'u açın ve F12 ya da Control + shıft + ı (Windows, Linux) veya Command + Option + ı (macos) seçeneğini belirleyin. Konsol sekmesini açtıktan sonra, hata aramaya başlayabilirsiniz. Bir hata görüntülenmeyecektir: ' yakalanamayan hata: kamera tanımlı değil '. Şimdi sahneye bir kamera eklememiz gerekir.

Kamera Ekle

  1. Sanal dünyayı görüntülemek ve onlarla etkileşim kurmak için tuvale bir kamera eklenmiş olmalıdır. Babylon türünde kamerayı ekleyelim . Bir hedefin etrafında döndürülebilen ArcRotateCamera. Kameranın bir örneğini oluşturmak için gereken parametreler şunlardır:

    1. ad: kameranın adı
    2. Alfa: longitudinal ekseni (radyan cinsinden) üzerinde angular konumu
    3. Beta: latitudinal ekseni (radyan cinsinden) üzerinde angular konumu
    4. yarıçap: hedeften uzaklık
    5. hedef: kameranın her zaman doğru olduğu nokta (x-y-z koordinatları tarafından tanımlanır)
    6. sahne: kameranın bulunduğu sahne

    Alfa, Beta, yarıçap ve hedef birlikte, aşağıdaki diyagramda gösterildiği gibi kameranın konumunu boşluk olarak tanımlar:

    Kamera Alpha Beta yarıçapı

    Aşağıdaki kodu Createsahnenin işlevine ekleyin:

    const alpha =  Math.PI/4;
    const beta = Math.PI/3;
    const radius = 8;
    const target = new BABYLON.Vector3(0, 0, 0);
    
    const camera = new BABYLON.ArcRotateCamera("Camera", alpha, beta, radius, target, scene);
    camera.attachControl(canvas, true);
    
  2. Tarayıcıda çıktıyı denetederseniz siyah bir tuval görürsünüz. Işığın eksik olması.

Işık Ekle

  1. Bir dizi aydınlatma özelliği ile kullanılabilen dört ışık türü vardır: nokta, yön, nokta ve Hemispheric ışığı. Aşağıda gösterildiği gibi çevresel ışık Hemisphericlightöğesini ekleyelim:

    const light = new BABYLON.HemisphericLight("light", new BABYLON.Vector3(1, 1, 0));
    
  2. Web sayfasının son kodu şöyle görünür:

    <html>
    <head>
        <script src="https://cdn.babylonjs.com/babylon.js"></script>
        <style>
            body,#renderCanvas { width: 100%; height: 100%;}
        </style>
    </head>
    <body>
        <canvas id="renderCanvas"></canvas>
        <script>
            const canvas = document.getElementById("renderCanvas");
            const engine = new BABYLON.Engine(canvas, true);
    
            const createScene = function() {
                const scene = new BABYLON.Scene(engine);
                scene.clearColor = new BABYLON.Color3.Black;
    
                const alpha =  Math.PI/4;
                const beta = Math.PI/3;
                const radius = 8;
                const target = new BABYLON.Vector3(0, 0, 0);
    
                const camera = new BABYLON.ArcRotateCamera("Camera", alpha, beta, radius, target, scene);
                camera.attachControl(canvas, true);
    
                const light = new BABYLON.HemisphericLight("light", new BABYLON.Vector3(1, 1, 0));
    
                const box = BABYLON.MeshBuilder.CreateBox("box", {});
                box.position.x = 0.5;
                box.position.y = 1;
    
                return scene;
            };
    
            const sceneToRender = createScene();
            engine.runRenderLoop(function(){
                sceneToRender.render();
            });
        </script>
    </body>
    </html>
    
  3. Tarayıcıdaki çıktıyı denetleyin. Küpü görmeniz ve fareyi kullanarak kamerayı küpün etrafında döndürebilir ve küpün farklı yüzlerini görebilirsiniz:

Küple temel sahne

Sonraki adımlar