مدلهایی که با سایت بالا ساخته میشه گویا با three.js خوب سازگاره:
این اولین خانه ای است که وارد محوطه کردم.
باید یک کدی نوشت بزای حرکت دادن اجسام در حالت ریل تایم. اینکه بخواهیم پشت سر هم کدها را ادیت کنیم طراحی محسوب نمیشه.
یک کلبه با نام مجیدآنلاین ، در همون سایت ساخت مدل ساختم. عکس:
در اون نرم افزار اندرویدی ۶۰ مگایی که در تاپیک قبلا معرفی کردم ، یک obj ساختم ولی در برنامه نتوانست لود بشود.
JavaScript 3D Library. Contribute to mrdoob/three.js development by creating an account on GitHub.
github.com
من در بلندر ، شکل زیر را ساختم و در بلندر اکسپورت کردم به obj ، که به من علاوه بر فایل دارای پسوند obj فایل دارای پسوند mtl را هم داد.
در کد صفحه بالا ، بعد تنظیم مسیر three.js اول برنامه ، داخل کد مسیر و اسم فایلهای obj و mtl را می دهید.
کد کوتاهی هم داره ، خودتان در لینک بالا نگاه کنید.
یک مقدار فعالیت من روی نرم افزارهای سازنده مدل ، چه کامپیوتری ، چه اندرویدی است
همچنین دانلود مدل ها از سایتها و تست اون.
چون حالا که میشه مدل ها را وارد محیط برنامه کرد ، باید روی ساخت و پیدا کردن مدل ها هم کار کنیم.
البته خیلی از خوانندگان مدتها بعد این مطالب را می خوانند و زیاد متوجه وقفه در تاپیک نمی شوند. ولی اونهایی که در حال حاضر تاپیک را دنبال می کنند ، بیشتر متوجه کاهش فعالیت من در تاپیک می شوند. چون به جای کد زدن در تاپیک ، دنبال مدل و تست اون در برنامه ام هستم و همچنین چیدن مدل ها در برنامه ام.
با ادیت کدها سخته ، مدل ها را جابجا کرد. انشا الله بعدا یک سیستمی برای جابجایی راحت تر مدل ها درون محیط برنامه می سازیم یا پیدا می کنیم.
یعنی بدون خروج از حالت اجرا ، مدل ها را بچینیم. من قبلا که opengl کار می کردم. چنین سیستمی را ساخته بودم. سیستم اون این جوری بود که یک مدل پایه داشت که با دکمه هایی قابل حرکت و تغییر اندازه بود. مثل بلندر که می توانید اشیا را حرکت دهید یا تغییر اندازه دهید. وقتی اون مدل نمونه ، محل و سایزش مناسب میشد ، با استفاده از سایز و محل اون ، یک شی ساخته میشد و به برنامه اضافه میشد. در سایت secondlife هم تقریبا چنین سیستمی هست ولی در سایت activeworlds با کپی کردن یک آبجکت از اطراف کار را شروع می کنند.
اگر سورس های three.js را مرور کنید ، انواع سورس ها هست که شما در آنها قادر به حرکت دادن مدل ها هستید. پس میشه از همون ابزارها هم استفاده کرد.
یک روش دیگر اینه که محل قرارگیری و سایز همه آبجکتها را در دیتابیس وارد کنیم و با اسم هر آبجکت بشود دیتابیس را ادیت کرد. مثلا یک لیست از آبجکت ها بیاید. ولی اگر تعداد آبجکت ها خیلی زیاد باشه ، به یاد ماندن اسم اونها غیرممکن میشه. خود three.js برنامه تاچ آبجکت ها را دارد. با نگاه به اون سورس ها احتمالا روشهایی بشود پیاده کرد.
کدی که دو تا مدل را کمی می کند. قسمتی از کد است ، کد کامل را از گیت هاب نگاه کنید.
شاید این روش درستی نباشد ، ولی اگر خواستید این طوری عمل کنید ، کدش این میشه.
JavaScript:
// manager
function loadModel() {
object.traverse( function ( child ) {
if ( child.isMesh ) child.material.map = texture;
} );
object.position.y =0.2;
object.position.z =-2;
object.position.x =-32;
object.scale.setScalar( 0.1 );
scene.add( object );
render();
}
const manager = new THREE.LoadingManager( loadModel );
// texture
const textureLoader = new THREE.TextureLoader( manager );
const texture = textureLoader.load( 'textures/brick_diffuse.jpg', render );
texture.colorSpace = THREE.SRGBColorSpace;
// model
function onProgress( xhr ) {}
function onError() {}
const loader = new OBJLoader( manager );
loader.load( 'model/model4.obj', function ( obj ) {
object = obj;
}, onProgress, onError );
function loadModel2() {
object2.traverse( function ( child ) {
if ( child.isMesh ) child.material.map = texture;
} );
object2.position.y =0.2;
object2.position.z =-2;
object2.position.x =-52;
object2.scale.setScalar( 0.1 );
scene.add( object2 );
render();
}
const manager2 = new THREE.LoadingManager( loadModel2 );
// texture
const textureLoader2 = new THREE.TextureLoader( manager2 );
const texture2 = textureLoader2.load( 'textures/brick_diffuse.jpg', render );
texture2.colorSpace = THREE.SRGBColorSpace;
// model
function onProgress( xhr ) {}
function onError() {}
const loader2 = new OBJLoader( manager2 );
loader2.load( 'model/model3.obj', function ( obj ) {
object2 = obj;
}, onProgress, onError );
حالا دو کلبه در زمین خود داریم:
اشیا را وقتی تمامش را از یک تکسچر استفاده کنیم جالب نمیشه.میشه موقع ساخت مدل ، تکسچر هر قسمت را هم بهش داد.
و می توانید از فرمت های مدل دیگر هم استفاده کنید. فرمت های قوی تری هم وجود دارد. Three.js انواع لودر دارد.
نکته کد بالا اینه که اگر دو متغیر همنام داشته باشیم برنامه هنگ می کنه ، و من تمام متغیرهایی که لازم بود را یک ۲ جلویش گذاشتم. بالای برنامه هم object2 را معرفی کردم.
برای شکل سوم ، تمام این ۲ ها را باید ۳ کرد و برای شکل چهارم ، همه را باید ۴ کرد.
شاید هم بشه آرایه ای از این متغیرها تعریف کرد. فکر کنم بشه این کارو کرد و روش منطقی تری از روش بالاست.
من کمی سرچ هم کردم. راه حلهایی گفته شده. خودتان می توانید سرچ کنید و بخوانید. سایتهای انگلیسی را بگردید.
Quoda Code Editor یک ویرایشگر کد کامل و آسان می باشد که به کمک آن میتوانید ویرایشگر یا IDE با پشتیبانی یکپارچه برای سرورهای (SFTP / FTPS) و ذخیره سازی ابر (Dropbox و Google Drive) استفاده کنید به راحتی انواع مختلف کدها را در دستگاه خود ویرایش نمایید. ویژگی های مختلفی در این نرم افزار همانند تشخیص
patoghu.com
من سایت بالا را نمی شناسم و نمی دونم قابل اعتماد است یا نه ، ولی ادیتوری که در این صفحه معرفی کرده ادیتور خوبیه.
در سایت بالا ، بعد ساختش ، در کنار هم ساخت و ساز انجام می دهیم.
کسانی که اونجا کار می کنند نیازی به دانستن three.js ندارند ، یک سری مصالح کار هست که با اونها ساخت و ساز انجام می دهند.
هنوز هیچ کاری انجام نشده ولی وقتی انجام بشود ، افراد بعد ثبت نام در سایت یک مقدار زمین دریافت می کنند.
هر کس در زمین خود خانه یا باغ یا هر چی دوست داره می سازه.
کار ساخت محیط به تدریج انجام میشه و در هر مرحله برای مرحله بعد فکر می کنیم.
الگوگیری از activeworlds است. در گوگل سرچ کنید. فکر کنم ایران را تحریم کرده.
در این تاپیک جای این بحث نیست. تاپیک برای این موضوع می زنم.
اسم تاپیک فعلا هست (( سایت ۳ بعدی ))
چون آبجکت ۱ و ۲ برای خانه اول و دوم استفاده شده بود، به این مدل آقا ، آبجکت شماره ۳ رسید.
داخل تابع onProgress را هم خالی کردم. ویک عدد ۳ هم جلوی اسمش گذاشتم چون قبلا هم چنین تابعی داشتیم. مختصات مکانی اش را هم جوری دادم که جلوی کلبه قرار بگیرد. سایزش هم با اون setScalar تنظیم کردم.
برنامه ساده ای است ولی تداخلش با متغیرهای برنامه لود دو کلبه مشکل ایجاد کرد فقط.
این کارهایی که من روی کد می کنم ، ادعا ندارم کارهای درست یا اصولی ئی هست. ولی کمک می کنه کد را درک کنیم. با تغییر دادن کدها میشه فهمید اونها چطوری کار می کنند.
یک برنامه ۶۰ مگائی معرفی کردم که البته همه سایتها اون را دارند ، با اون می توانید فایلهای obj را ببینید.
I need to make multiple objects fall from the top. I have tried to duplicate code but it did not work. HERE is my code: var renderer = new THREE.WebGLRenderer({canvas: document.getElementById('myCa...
شرح کد:
بیرون حلقه ، جئومتری و متریال را می سازیم.
یک آرایه به نام objects داریم.
هر مش که ساخته میشه ، push میشه به آرایه. push از جاوا اسکریپت است و ربطی به three.js ندارد. می توانید سرچ کنید ولی خلاصش افزودن به آرایه است.
حالا چرا باید مش ها داخل آرایه ذخیره بشوند را خودتان فکر کنید. بدون افزودن به آرایه هم به صحنه افزوده شدند و در میدان کار ما هستند. ولی شاید اگر بخواد یکیشون را تکان بدهد ، داخل آرایه قابل دسترس است. شماره اون را و اسم objects را میاره. اگر در داخل آرایه نریزد ، اسم همه علمک ها یکی است.
حلقه من ۵۰ بار اجرا شده ولی خط تعریف کردن مش خطا نداده. منظورم اینه مگه میشه از یک اسم ، پنجاه بار متغیر ساخت. منظورم اینه رفتار جاوا اسکریپت را یاد بگیرید.
Contribute to stemkoski/stemkoski.github.com development by creating an account on GitHub.
github.com
باستان شناسی کدها!!
سالک:تاریخ آپلود کدهای بالا در github هشت سال قبل است و الان ۲۰۲۴ است. پس میشه ۲۰۱۶
میشه این را زیرخاکی حساب کرد؟
در ویکپدیا نوشته three.js سال ۲۰۱۰ ایجاد شد. و این بسته ۶ سال بعد اون بوده و هشت سال پیش....یعنی تقریبا از نظر زمانی بین ما و زمان خلق three.js بوده. ( بعض از شما رشته تجربی خونده در دبیرستان و زمین شناسی خونده، دوره پرکامبرین یادتونه؟خخخخ)
پس نگاه کردن به اسم پوشه ها و فایلهایش می تونه چیزهایی را به ما نشان دهد.
چون د طول تاریخ پوشه ها و فایل ها جابجا شده اند و تغییر نام داده اند و مقداری هویت خود را از دست داده اند.
سالک: شاید به این کار بشه گفت باستان شناسی کدها. خخخخ
و یک پوشه js حاوی فایلهای پسوند js کنار سورس ها است. و خبری از importmap نیست.
شاید این سیستم قدیمی three.js بوده . بسته ۸ سال پیش ساخته شده.
فایلهای مورد نیاز در یک پوشه: ولی سوالی که برای من مطرح شده این است که آیا ما هم می توانیم فایلهای js مورد نیاز را این طوری کنار سورس قرار دهیم. بعدا شاید بررسی کردم. ولی انگار نیاز به بررسی نداره ، در پوشه 7DFPS بسته مورد بحث این کار انجام شده. فایلهای مورد نیازش را در پوشه ای به نام js کنار فایل اصلی گذاشته. یک بازی است. ولی فکر کنم با کیبورد و ماوس باشه و من الان در تبلت کار می کنم.
ولی معلوم نیست الان هم بشه این کارو کرد یا نه. تا تست نکنیم معلوم نمیشه. من با فایلهای جدی کار می کنیم و شاید نغییرات ایجاد شده در اونها ، مانع این کار باشه.
A shader is, in fact, one of the main components of WebGL. If we had started WebGL without Three.js, it would have been one of the first things we would have to learn, and this is why native WebGL is so hard.
در این سایت می گوید shader یکی از کامپوننتکهای اصلی webgl است اگر ما webgl شروع می کردیم ، بدون three.js آنگاه shader یکی از اولین چیزهایی بود که ما باید یاد می گرفتیم.و این علت اینه که webgl چرا این قدر سخته.
در حوزهٔ گرافیک رایانه‌ای، سایه‌زَن (به انگلیسی: Shader) به مجموعه‌ای از دستورهای نرم‌افزاری گفته می‌شود که بخشی از عملیات رندر است و عمدتاً وظیفه انجام محاسبات مربوط به رنگ را دارد.
سایه‌زن توسط طراحان برنامه‌های سه‌بعدی به‌کاربرده می‌شود و با آن می‌توان جزئیات بیشتری مثل سایه‌ها، انعکاس نور، ایجاد مه و غیره را بسیار واقعی‌تر نمایش داد.
WebGL امکانی است که در اکثر مرورگرهای وب پشتیبانی می‌شود و شما را قادر می‌سازد که از طریق جاوااسکریپت با المان‌های سه‌بعدی کار کنید. این کار موجب می‌شود که در اپلیکیشن‌ها و بازی‌های مبتنی بر مرورگر امکانات بسیار زیادی را دریافت کنند.
WebGL به صورت پیشفرض دارای امکانات کمی است و بعید به نظر می‌رسد که در چنین حالتی شما از آن استفاده کنید
WebGL امکانی است که در اکثر مرورگرهای وب پشتیبانی می‌شود و شما را قادر می‌سازد که از طریق جاوااسکریپت با المان‌های سه‌بعدی کار کنید. این کار موجب می‌شود که در اپلیکیشن‌ها و بازی‌های مبتنی بر مرورگر امکانات بسیار زیادی را دریافت کنند
roocket.ir
WebGL چیست؟
WebGL یک استاندارد وب است که برای ایجاد گرافیک سه‌بعدی در مرورگرها استفاده می‌شود. WebGL به عنوان یک API گرافیکی برای وب، امکان اجرای کدهای سه‌بعدی و بهره‌برداری از قدرت پردازشی کارت گرافیک را فراهم می‌کند. این استاندارد توسط کارگروهی از کارشناسان از شرکت‌هایی چون Mozilla، Google و Apple توسعه یافته است.
با استفاده از WebGL، توسعه دهندگان وب می‌توانند اپلیکیشن‌های وب سه‌بعدی و با کیفیت بالا را ایجاد کرده و در مرورگرها اجرا کنند. این استاندارد بر پایه OpenGL ES (OpenGL for Embedded Systems) مبتنی بر OpenGL است و به زبان‌های برنامه‌نویسی وب مانند JavaScript اجازه می‌دهد تا با کارت گرافیک تعامل کنند.
برای استفاده از WebGL، باید کدهای سه‌بعدی و shader های گرافیکی را با استفاده از JavaScript در محیط مرورگر نوشت و استفاده از کتابخانه‌های گرافیکی موجود مانند Three.js می‌تواند فرآیند توسعه را سریعتر و آسان‌تر کند.
WebGL یک استاندارد وب است که برای ایجاد گرافیک سه‌بعدی در مرورگرها استفاده می‌شود. WebGL به عنوان یک API گرافیکی برای وب، امکان اجرای کدهای سه‌بعدی و بهره‌برداری از قدرت پردازشی کارت گرافیک را فراهم می‌کند. این استاندارد توسط کارگروهی از کارشناسان از شرکت‌هایی چون Mozilla، Google و Apple توسعه...
webgl شاید نگاه به تاپیک opengl مفید باشد: https://forum.majidonline.com/threads/opengl-%D8%AF%D8%B1-%D9%85%D8%AC%DB%8C%D8%AF%D8%A2%D9%86%D9%84%D8%A7%DB%8C%D9%86.233839/
forum.majidonline.com
من در سپتامبر ۲۰۱۹ ، اول تایپک opengl را زدم ...
(البته opengl را سایت دیگری کار کرده بودم و کپی اش را اینجا آوردم)
، بعد آخر تاپیک opengl مقداری webgl نوشتم ، اون پستها را سال ۲۰۲۳ سپتامبر ، بردم یک تاپیک دیگر.که همین تاپیک webgl را تشکیل داده.
(ولی پستهایش همان ۲۰۱۹ زده شده بود ۲۰۲۱فقط یک انتقال پست بود)
و بعدش تاپیک three.js را ژوئن ۲۰۲۱ زدم
یعنی دو سال بعد opengl , تاپیک three.js باز شده.
و امسال یعنی ۲۰۲۴ باز سپتامبر ، من ادامه تاپیک three.js را پی گرفتم.
تاپیک webgl یک برنامه داره که یک مثلث رسم می کند.
در برنامه زیر می بینید که اول برنامه به هیچ فایل js ئی لینک نداده.
JavaScript:
<!doctype html>
<html>
<body>
<canvas width = "300" height = "300" id = "my_Canvas"></canvas>
<script>
/* Step1: Prepare the canvas and get WebGL context */
var canvas = document.getElementById('my_Canvas');
var gl = canvas.getContext('experimental-webgl');
/* Step2: Define the geometry and store it in buffer objects */
var vertices = [-0.5, 0.5, -0.5, -0.5, 0.0, -0.5,];
// Create a new buffer object
var vertex_buffer = gl.createBuffer();
// Bind an empty array buffer to it
gl.bindBuffer(gl.ARRAY_BUFFER, vertex_buffer);
// Pass the vertices data to the buffer
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
// Unbind the buffer
gl.bindBuffer(gl.ARRAY_BUFFER, null);
/* Step3: Create and compile Shader programs */
// Vertex shader source code
var vertCode =
'attribute vec2 coordinates;' +
'void main(void) {' + ' gl_Position = vec4(coordinates,0.0, 1.0);' + '}';
//Create a vertex shader object
var vertShader = gl.createShader(gl.VERTEX_SHADER);
//Attach vertex shader source code
gl.shaderSource(vertShader, vertCode);
//Compile the vertex shader
gl.compileShader(vertShader);
//Fragment shader source code
var fragCode = 'void main(void) {' + 'gl_FragColor = vec4(0.0, 0.0, 0.0, 0.1);' + '}';
// Create fragment shader object
var fragShader = gl.createShader(gl.FRAGMENT_SHADER);
// Attach fragment shader source code
gl.shaderSource(fragShader, fragCode);
// Compile the fragment shader
gl.compileShader(fragShader);
// Create a shader program object to store combined shader program
var shaderProgram = gl.createProgram();
// Attach a vertex shader
gl.attachShader(shaderProgram, vertShader);
// Attach a fragment shader
gl.attachShader(shaderProgram, fragShader);
// Link both programs
gl.linkProgram(shaderProgram);
// Use the combined shader program object
gl.useProgram(shaderProgram);
/* Step 4: Associate the shader programs to buffer objects */
//Bind vertex buffer object
gl.bindBuffer(gl.ARRAY_BUFFER, vertex_buffer);
//Get the attribute location
var coord = gl.getAttribLocation(shaderProgram, "coordinates");
//point an attribute to the currently bound VBO
gl.vertexAttribPointer(coord, 2, gl.FLOAT, false, 0, 0);
//Enable the attribute
gl.enableVertexAttribArray(coord);
/* Step5: Drawing the required object (triangle) */
// Clear the canvas
gl.clearColor(0.5, 0.5, 0.5, 0.9);
// Enable the depth test
gl.enable(gl.DEPTH_TEST);
// Clear the color buffer bit
gl.clear(gl.COLOR_BUFFER_BIT);
// Set the view port
gl.viewport(0,0,canvas.width,canvas.height);
// Draw the triangle
gl.drawArrays(gl.TRIANGLES, 0, 3);
</script>
</body>
</html>
github.com
stackoverflow.com
threejs.org
threejs-journey.com
fa.wikipedia.org
roocket.ir
bytegate.io
Top 10 Best Free AI Song Generators for Music Creation
