<!doctype html>
<html>
<head>
<meta charset = "utf-8">
<title>BabylonJs - Basic Scene- Playing sounds and music</title>
<style>
canvas {width: 100%; height: 100%;}
</style>
<script src="https://cdn.babylonjs.com/babylon.js"></script>
<script src="https://cdn.babylonjs.com/loaders/babylonjs.loaders.min.js"></script>
<script src="https://code.jquery.com/pep/0.4.3/pep.js"></script>
</head>
<body>
<canvas id = "renderCanvas"></canvas>
<script type = "text/javascript">
var canvas = document.getElementById("renderCanvas");
var engine = new BABYLON.Engine(canvas, true);
var createScene = function() {
var scene = new BABYLON.Scene(engine);
scene.clearColor = new BABYLON.Color3(0, 1, 0);
var camera = new BABYLON.ArcRotateCamera("Camera", 1, 0.8, 10, new BABYLON.Vector3(0, 0, 0), scene);
camera.attachControl(canvas, true);
var music = new BABYLON.Sound("sound", "sounds/music.wav", scene, null, {
loop: true,
autoplay: true
});
return scene;
};
var scene = createScene();
engine.runRenderLoop(function() {
scene.render();
});
</script>
</body>
</html>
یک فایل wav ، از فایلهای دانلود پیدا کنید و در پوشه soundz کنار فایل برنامه قرار دهید.
بعد اجرای برنامه یک صفحه سبز می آید ، که یک آیکون کوچک گوشه سمت چپ و بالا دارد که باید با زدن اون صدا را روشن کنیم.
البته فکر کنم باید کمی صبر کنید تا فایل صدا لود بشود تا این آیکون ظاهر شود.
بعد زدن آیکون ، پشت سر هم صدا اجرا می شود. یعنی بعد هر اتمام ، از اول صوت اجرا می شود.
سالک: یک سری از آموزشهای سایت فوق گفته شد ، تعدادی هم ماند.
من خودم هنوز بازی سازی با بابیلون را شروع نکردم ، فقط یک سری از سورس هایش را در تاپیک نقل کردم.
اگر کسی مشغول ساخت بازی خود باشد ، اون نیاز به کد خاص باعث میشه گیرایی اش بسیار بالاتر برود. و من چون در این فاز نبودم ، سطحی کار کردم.
در پست قبل می خواهم یک سری صحبتهای کلی در مورد گرافیک بکنم.
سالک: من اولین بار نیست که گرافیک کار می کنم ، ....
برای همین با مفاهیم و کلیات کار آشنایی دارم.
مثلا می دونم تکسچر چیه و ماتریال چیه و نقش دوربین و نورها چطور هستند.
من آموزشهایی درمورد این چیزها داشتم. در تاپیک های مختلف.
فعلا یک مقدار انسجام تاپیک هایی که ایجاد کردم خوب نیست. و باید روی اون کار کنم و نظم و اطلاع رسانی بهتری ایجاد کنم.
شاید من فعلا در این تاپیک نتوانم درست مفاهیم گرافیک را توضیح بدهم. پس بهتره این مفاهیم را در گوگل سرچ کنید و یاد بگیرید. در تمام محیط های گرافیکی این مفاهیم وجود دارد. یعنی هر کس گرافیک کار می کند با این مفاهیم روبروست. کدنویسی فقط روبرو شدن با این مفاهیم است. چون کامپیوتر و گوشی از لحاظ سخت افزاری ، جور خاصی با گرافیک برخورد می کند و به تبع اون تمام رشته های گرافیکی از همون برخورد متاثر میشوند.
مهم نیست اون شخص در چه مقوله ای گرافیک کار می کند. هر توضیحی که می دهد در رشته های گرافیکی دیگر هم صادق است.
من خودم وقتی opengl کار می کردم ، یک سری تصاویر مفهومی دیدم که خیلی از پارامترهای کدنویسی را برام با معنی کرد. دوست دارم این مفاهیم را یک جایی بگم ، ....... فعلا سعی می کنم حین شرح کدها کمی هم مفاهیم گرافیک را بگم .
فعلا شما وقتی یک سورسی می بینید ، باید با ور رفتن بهش و تغییر اعدادش ، تغییر در گرافیک را تحت نظر بگیرید تا بفهمید هر پارامتر نقشش چیست.
در مورد بابیلون من تازه شروع کردم و هنوز دید کلی بهش پیدا نکردم.
فعلا می خواهم یک سایت جدید پیدا کنم تا با کدهای اون تمرین کنیم
سایت قبلی نیمه کاره موند، و شاید بعدا برگشتیم تمومش کردیم. ولی مباحث اولیه گفته شد. و همون ها برای شروع ساخت بازی کافی است. در سایتهای دیگر اگر پیدا کردیم ، باز این مباحث را ترین می کنیم و شاید من بتونم بازی خودم را شروع کنم.
Babylon.js playground is a live editor for Babylon.js WebGL and WebGPU 3D scenes
playground.babylonjs.com
لینک بالا یک زمین و یک مکعب را نشان می دهد ، یک آیکون سمت چپ و پایین هست که اگر بزنید ، کدش می آید. که همین کد بالاست که من پست زدم در این پست.
حالا به این کد نگاه کنید:
JavaScript:
const createScene = () => {
const scene = new BABYLON.Scene(engine);
return scene;
}
خود سایت بابیلون میگه این کد اصلی است که باید استفاده کنید.
و داخلش در کدهای قبلی همین پست می بینید که دوربین و نور و زمین و مکعب آورده شده.
که این تکه را با خرت و پرتهای داخلش شامل دوربین و مکعب و ....
می گذارید در میان تگ های html
و اون لینک به فایلهای بابیلون هم باید افزوده بشه. که در پستهای قبلی این تاپیک من سه خط کد زیر را همواره به کدها می افزودم:
در همون صفحه که لینکش را پست قبل دادم ، یک منو از دکمه سمت چپ و بالا ، قابل باز شدن است که یکی از گزینه هایش save است ، که کد زیر را به ما می دهد:
JavaScript:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Babylon Template</title>
<style>
html,
body {
overflow: hidden;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
#renderCanvas {
width: 100%;
height: 100%;
touch-action: none;
}
</style>
<script src="https://cdn.babylonjs.com/babylon.js"></script>
<script src="https://cdn.babylonjs.com/loaders/babylonjs.loaders.min.js"></script>
<script src="https://code.jquery.com/pep/0.4.3/pep.js"></script>
</head>
<body>
<canvas id="renderCanvas" touch-action="none"></canvas>
<!-- touch-action="none" for best results from PEP -->
<script>
const canvas = document.getElementById("renderCanvas"); // Get the canvas element
const engine = new BABYLON.Engine(canvas, true); // Generate the BABYLON 3D engine
// Add your code here matching the playground format
const createScene = function () {
const scene = new BABYLON.Scene(engine);
BABYLON.MeshBuilder.CreateBox("box", {});
const camera = new BABYLON.ArcRotateCamera("camera", -Math.PI / 2, Math.PI / 2.5, 15, new BABYLON.Vector3(0, 0, 0));
camera.attachControl(canvas, true);
const light = new BABYLON.HemisphericLight("light", new BABYLON.Vector3(1, 1, 0));
return scene;
};
const scene = createScene(); //Call the createScene function
// Register a render loop to repeatedly render the scene
engine.runRenderLoop(function () {
scene.render();
});
// Watch for browser/canvas resize events
window.addEventListener("resize", function () {
engine.resize();
});
</script>
</body>
</html>
در کد بالا ، همان طور که در پست قبل گفتیم ، تگهای html اضافه شده و لینک به فایلهای مورد نیاز بابیلون داده شده ، ولی چند خط کد زیر اون هسته هم اضافه شده. هسته منظورم همان تابع createscene است که داخلش مکعب و دوربین و ...قرار دارد.
یکی از کدهای زیر هسته ، کد فراخوانی تابع هسته است که تابع هسته را صدا می زنه.
دومی همان طور که در کد توضیح داده شده ، یک حقله اجرای رندر ایجاد می کند.
سومی هم یک گوش دهنده به رویداد ایجاد کرده.
برای زنگ تفریح مقایسه ای می کنیم بین three.js و بابیلون:
Both Three.js and Babylon.js are excellent choices for creating 3D graphics on the web. Three.js is lightweight and easy to use, making it a great choice for beginners or for simpler applications. Babylon.js, on the other hand, is more complex and feature-rich and is designed specifically for game development and other immersive applications.
Ultimately, the choice between Three.js and Babylon.js will depend on the specific needs and goals of your project. If you’re new to 3D programming or are building a simpler application, Three.js is probably the best choice. If you’re building a more complex application that requires advanced physics and animation, or if you’re building a game or other immersive application, Babylon.js is the better choice.
پست مهر ۱۴۰۳ ، من نزدیک یک ماه است thre.js کار می کنم. تاپیک فعلی یعنی بابیلون را خوندم و کدهایش را مرور کردم ، لینکهایش به فضای من ، درست بود و کار می کرد. نمونه اول فکر کنم نزدیک یک دقیقه طول کشید load بشود. بابیلون شاید بشود گفت رقیب three.js است. دوست دارم بعدا باز بابیلون کار کنم. فعلا دارم با three.js یک محیطی می سازم.
doc.babylonjs.com
playground.babylonjs.com
www.linkedin.com
