Tutorial: Menyiapkan adegan

2023-07-12

Pelajari cara menyiapkan adegan, dan menambahkan beberapa elemen 3D dasar ke dalamnya.

Dalam tutorial ini, Anda akan belajar cara:

Membuat adegan
Menambahkan kamera
Tambahkan cahaya
Menambahkan elemen 3D dasar

Sebelum Anda mulai

Dalam langkah tutorial sebelumnya, halaman web dasar dibuat. Buka halaman web untuk pengeditan.

<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>

Membuat adegan

Adegan adalah tempat semua konten akan ditampilkan. Mungkin ada beberapa adegan dan dimungkinkan untuk beralih antar adegan. Baca selengkapnya tentang adeganBabylon.js.

Tambahkan tag skrip setelah elemen html kanvas dan tambahkan kode berikut untuk membuat adegan yang diisi dengan warna hitam:

<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>

Dalam kode di atas kita harus membuat instans mesin rendering web Babylon.js yang merender peristiwa adegan dan kait di kanvas. Untuk informasi selengkapnya tentang mesin, periksa halaman dokumentasi babylon.engine

Adegan tidak dirender secara default. Ingat, mungkin ada beberapa adegan dan Anda mengontrol adegan mana yang ditampilkan. Untuk merender adegan berulang kali pada setiap bingkai, jalankan kode berikut setelah panggilan ke fungsi createScene :
```
engine.runRenderLoop(function () {
    sceneToRender.render();
});
```

Menambahkan elemen 3D dasar

Mari kita tambahkan bentuk 3D pertama kita. Dalam bentuk dunia virtual 3D dibangun dari jala, banyak faset segitiga yang digabungkan, masing-masing faset yang terbuat dari tiga simpul. Anda dapat menggunakan jala yang telah ditentukan sebelumnya atau membuat jala kustom Anda sendiri. Di sini kita akan menggunakan box mesh yang telah ditentukan sebelumnya, yaitu kubus. Untuk membuat kotak, gunakan BABYLON. MeshBuilder.CreateBox. Parameternya adalah nama, dan opsi (opsi berbeda sesuai dengan jenis jala). Tambahkan kode berikut ke fungsi createScene:
```
const box = BABYLON.MeshBuilder.CreateBox("box", {});
box.position.x = 0.5;
box.position.y = 1;
```
Buka halaman web di browser Microsoft Edge dan periksa outputnya. Jendela browser memperlihatkan halaman kosong. Buka DevTools dengan menggunakan keyboard dan pilih F12 atau Control+Shift+I (Windows, Linux) atau Command+Option+I (macOS). Setelah membuka tab Konsol , Anda dapat mulai mencari kesalahan. Akan ada kesalahan yang ditampilkan: 'Kesalahan Yang Tidak Terjaring: Tidak ada kamera yang ditentukan'. Sekarang kita harus menambahkan kamera ke tempat kejadian.

Menambahkan kamera

Untuk melihat dunia virtual dan berinteraksi dengannya, kamera harus dilampirkan ke kanvas. Mari kita tambahkan kamera jenis BABYLON. ArcRotateCamera, yang dapat diputar di sekitar target. Parameter yang diperlukan untuk membuat instans kamera adalah:
1. name: nama kamera
2. alpha: posisi sudut di sepanjang sumbu longitudinal (dalam radian)
3. beta: posisi sudut di sepanjang sumbu lintang (dalam radian)
4. radius: jarak dari target
5. target: titik yang akan selalu dihadapi kamera (didefinisikan oleh koordinat x-y-z)
6. scene: adegan tempat kamera berada
Alfa, beta, radius, dan target bersama-sama menentukan posisi kamera di ruang, seperti yang ditunjukkan pada diagram di bawah ini:

Tambahkan kode berikut ke fungsi createScene :
```
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);
```
Jika Anda memeriksa output di browser, Anda akan melihat kanvas hitam. Kita kehilangan cahaya.

Tambahkan cahaya

Ada empat jenis lampu yang dapat digunakan dengan berbagai properti pencahayaan: Titik, Arah, Spot dan Cahaya Hemispheric. Mari kita tambahkan hemisphericLight cahaya sekitar, sebagai berikut:
```
const light = new BABYLON.HemisphericLight("light", new BABYLON.Vector3(1, 1, 0));
```

Kode akhir halaman web akan terlihat sebagai berikut:

<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>

Periksa output di browser. Anda akan melihat kubus dan menggunakan mouse Anda dapat memutar kamera di sekitar kubus dan melihat berbagai wajah kubus:

Adegan dasar dengan kubus

Langkah berikutnya

Tutorial berikutnya: 3. Berinteraksi dengan objek 3D

Bagikan melalui