Öğretici: Sahne hazırlama

2023-07-12

Bir sahneyi hazırlamayı ve buna bazı temel 3B öğeler eklemeyi öğrenin.

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

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

Başlamadan önce

Önceki öğretici adımında temel bir web sayfası oluşturuldu. Web sayfasını düzenlemek üzere açın.

<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

Sahne, tüm içeriklerin görüntüleneceği yerdir. Birden çok sahne olabilir ve sahneler arasında geçiş yapmak mümkündür. Babylon.js Sahnesi hakkında daha fazla bilgi edinin.

Tuval html öğesinin arkasına betik etiketini ekleyin ve siyah renkle 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, bir sahneyi işleyen ve tuvaldeki olayları kancalayan Babylon.js web işleme altyapısının bir örneğini oluşturmamız gerekir. Motor hakkında daha fazla bilgi için babylon.engine belge sayfasına bakın

Sahne varsayılan olarak işlenmez. Unutmayın, birden çok sahne olabilir ve hangi sahnenin görüntüleneceğini siz denetlersiniz. Sahneyi her karede art arda işlemek için createScene işlevi çağrısından sonra aşağıdaki kodu yürütebilirsiniz:
```
engine.runRenderLoop(function () {
    sceneToRender.render();
});
```

Temel 3B öğe ekleme

İlk 3B şeklimizi ekleyelim. 3B sanal dünyada şekiller , her biri üç köşeden oluşturulan çok sayıda üçgen model bir araya gelen tirelerden oluşturulur. Önceden tanımlanmış bir mesh kullanabilir veya kendi özel ağınızı oluşturabilirsiniz. Burada önceden tanımlanmış bir kutu ağı, yani bir küp kullanacağız. Kutuyu oluşturmak için BABYLON kullanın. MeshBuilder.CreateBox. Parametreler ad ve seçeneklerdir (seçenekler mesh türüne göre farklıdır). createScene işlevine aşağıdaki kodu ekleyin:
```
const box = BABYLON.MeshBuilder.CreateBox("box", {});
box.position.x = 0.5;
box.position.y = 1;
```
Microsoft Edge tarayıcısında web sayfasını açın ve çıkışı denetleyin. Tarayıcı penceresinde boş bir sayfa gösterilir. Klavyeyi kullanarak Geliştirici Araçları'nı açın ve F12 veya Control+Shift+I (Windows, Linux) veya Command+Option+I (macOS) öğesini seçin. Konsol sekmesini açtıktan sonra hataları aramaya başlayabilirsiniz. Şu hata görüntülenir: 'Yakalanmayan Hata: Tanımlı kamera yok'. Şimdi sahneye bir kamera eklemeliyiz.

Kamera ekleme

Sanal dünyayı görüntülemek ve onunla etkileşim kurmak için tuvale bir kamera eklenmelidir. BABYLON türünde bir kamera ekleyelim . ArcRotateCamera, bir hedef etrafında döndürülebilir. Kameranın bir örneğini oluşturmak için gereken parametreler şunlardır:
1. name: kameranın adı
2. alfa: uzunlamasına eksen boyunca açısal konum (radyan cinsinden)
3. beta: latitudinal eksen boyunca angular konum (radyan cinsinden)
4. radius: hedeften uzaklık
5. hedef: kameranın her zaman karşı karşıya olacağı nokta (x-y-z koordinatlarıyla tanımlanır)
6. sahne: kameranın içinde olduğu sahne
Alfa, beta, yarıçap ve hedef birlikte aşağıdaki diyagramda gösterildiği gibi kameranın boşluktaki konumunu tanımlar:

createScene işlevine aşağıdaki kodu 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);
```
Çıktıyı tarayıcıda kontrol ederseniz siyah bir tuval görürsünüz. Işığı kaçırıyoruz.

Işık ekle

Çeşitli aydınlatma özellikleriyle kullanılabilecek dört tür ışık vardır: Nokta, Yön, Nokta ve Hemispheric Light. Ortam ışığını HemisphericLight'ı aşağıdaki gibi ekleyelim:
```
const light = new BABYLON.HemisphericLight("light", new BABYLON.Vector3(1, 1, 0));
```

Web sayfasının son kodu aşağıdaki gibi 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>

Çıktıyı tarayıcıda denetleyin. Küpü görmeniz gerekir ve fareyi kullanarak kamerayı küpün etrafında döndürebilir ve küpün farklı yüzlerini görebilirsiniz:

Küp ile temel sahne

Sonraki adımlar

Sonraki Öğretici: 3. 3B nesneyle etkileşim kurma

Aracılığıyla paylaş