آموزش Three.js

[saalek110]

کل بسته را هم لازم نیست از لینک زیر دانلود کنید(با زدن دکمه سبز و زدن download zip)
۳۵۶ مگا.

GitHub - mrdoob/three.js at master

JavaScript 3D Library. Contribute to mrdoob/three.js development by creating an account on GitHub.

github.com

اون فایلهایی که نیاز دارید را دانلود کنید.
در مورد نیازهای فایل لود کننده obj file در چند پست بالاتر بحث کردیم.

ولی من هنوز با در اختیار گذاشتن همون چند تا فایل در اختیار برنامه، برنامه را امتحان نکردم. ولی احتمالا اجرا میشه.

پنج شش مگا فایلهای اصلی اش است.
اون تا فایل هم هر کدام بیست تا سی کیلو بیشتر نیست.

همچنین از لینک بالا ، تکسچر و عکس های خوبش را دانلود کنید. یا همشو دانلود کنید اگر دوست دارید.

پوشه تکسچرهایش:

three.js/examples/textures at master · mrdoob/three.js

JavaScript 3D Library. Contribute to mrdoob/three.js development by creating an account on GitHub.

github.com

 

[saalek110]

نرم افزار رایگان در کامپیوتر برای آبجکت سازی ، Blender است.

برای گوشی:

https://www.farsroid.com/3d-modeling-app-sculpt-draw

شصت مگا.

فعلا این را سراغ دارم ولی شاید برای این کار نرم افزارهای زیادی باشد و از این بهتر هم باشه.

ولی با این هم کارهای جالبی میشه کرد.
در یوتیوب آموزش کار باهاش است. خودش هم فیلم هایی آموزشی در خودش داره.

 

[saalek110]

دانلود archmodels Vol 154 - آرچ مدل 154: مدل های آماده سه بعدی درخت و درختچه و ...

در این مجموعه شاهد مدل های آماده سه بعدی آرچ مدل شماره 154 می باشید که شامل نمونه های متنوع درختان با فرمت های 3DS, DXF, JPG, MAX, obj می باشد و بر روی سایت قرار گرفته شده است.این مجموعه ها که به تدریج بر روی سایت قرار می گیرند، جهت استفاده مهندسین معمار، طراحان صنعتی، طراحان و مجریان دکوراسیون...

p30download.ir

گیاهان و تکسچر گیاهی ، مثل تنه درخت.

۳ گیگ.

 

[saalek110]

من امروز خیلی از مثالها را مرور کردم. این تکه را همشون دارند:

<script type="importmap">
            {
                "imports": {
                    "three": "../build/three.module.js",
                    "three/addons/": "./jsm/"
                }
            }
        </script>

        <script type="module">

            import * as THREE from 'three';

            import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
            import { PLYExporter } from 'three/addons/exporters/PLYExporter.js';
            import { GUI } from 'three/addons/libs/lil-gui.module.min.js';

            let scene, camera, renderer, exporter, mesh;

کار این تکه کد اول برنامه اینه که اول فایلهای اصلی را import می کنه ، بعدش بنا به نیاز ، از فایلهای پوشه های واقع در پوشه jsm استفاده می کند. که یک سری فایل با پسوند js هستند که کدهایی گه کارها را انجام میدهد داخل اونهاست و ما با نگاه به اون فایلها از توابع اونها استفاده می کنیم،


البته فایلهای مختلفی را import می کنند ولی همشون این import را دارند.

ولی برنامه ای که ما تا حالا کار می کردیم ، این تکه را نداره. فکر کنم بهتره قالب خود را عوض کنیم و قالب خود را با مثالهای برنامه یکی بکنیم.

ولی مجبور نیستیم داخل اون کدها کار کنیم. من بیرن بسته کار کردم و مسیر را به شکل زیر دادم.
اسم پوشه بسته را هم می بینید عوض کردم و گذاشتم three-js-master

<script type="importmap">
            {
                "imports": {
                    "three": "./three-js-master/build/three.module.js",
                    "three/addons/": "./three-js-master/examples/jsm/"
                }
            }
        </script>

        <script type="module">

            import * as THREE from 'three';

            import { OBJLoader } from 'three/addons/loaders/OBJLoader.js';
            import { OrbitControls } from 'three/addons/controls/OrbitControls.js';

            let camera, scene, renderer;

            let object;

نمونه برنامه داخل پوشه examples است , یک طبقه بالاتر از پوشه jsm و یک طبقه پایین تر از پوشه buid
برای همین آدرس ها را در نمونه برنامه ها این جوری می دهند.

ولی من بیرون بسته کار می کنم و آدرس ها را از بالا می دهم.

 

[saalek110]

در برنامه اخیر که کار کردیم و کارش load فایل obj است دو تا فایل صدا زده شده ، یعنی import شده ، یکی فایل لودکننده فایل obj است و دیگری فایل کنترل است. احتمالا اینکه میشه صحنه را چرخاند و بزرگ و کوچک کردن شکل را ، توسط کنترل است.

 

[saalek110]

three.js/examples/misc_controls_transform.html at master · mrdoob/three.js

JavaScript 3D Library. Contribute to mrdoob/three.js development by creating an account on GitHub.

github.com

این سورس از این جهت جالبه که یک مکعب است که میشه به این طرف و اون طرف کشیدش.
فکر کنم سورس ساده ای هم باشه.
برای کلیدهای کیبورد هم قابلیتهایی تعیین کرده.

اجرایش را اینجا ببینید:

three.js examples

threejs.org

من فقط کدش را مرور کوم و هنوز باهاش کار نکردم.

اون نکته ای که در پست قبل گفتن که بهتره قالب خود را به قالب جدید تبدیل کنیم،
دنبال برنامه ساده ای با قالب جدید بودم که شاید این برنامه خوب باشه.احتمالا میشه اضافاتش را حذف کرد.