با استفاده از Three.js یک صحنهٔ ساده بساز که شامل یک مکعب رنگی چرخان، نور محیط و کنترل‌های چرخش (OrbitControls) باشد و صحنه به تغییر اندازهٔ پنجره واکنش نشان دهد

4.0 بازدید آخرین ویرایش در 221 روز قبل ساعت 01:32

0.0

برای حل این مسئله یک Scene، Camera (مثلاً PerspectiveCamera) و Renderer ایجاد کن، سپس یک BoxGeometry و MeshStandardMaterial بساز و آن‌ها را به صورت Mesh به صحنه اضافه کن. نور محیط (AmbientLight) و یک نور جهت‌دار (DirectionalLight) اضافه کن، موقعیت دوربین را تنظیم کن و با استفاده از requestAnimationFrame حلقهٔ انیمیشن بساز که در آن مکعب را می‌چرخانی و renderer.render را فراخوانی می‌کنی؛ برای کنترل چرخش از OrbitControls (مثلاً از 'three/examples/jsm/controls/OrbitControls.js') استفاده کن و رویداد window.resize را مدیریت کن تا renderer.setSize و camera.aspect به‌روزرسانی شوند. نکات: می‌توانی Three.js را از CDN یا با npm وارد کنی، از MeshStandardMaterial برای نتیجهٔ بهتر با نور استفاده کن، renderer.setPixelRatio(window.devicePixelRatio) را برای وضوح مناسب تنظیم کن و قبل از اجرا کنسول را برای خطاهای مربوط به مسیرهای ایمپورت بررسی کن.

توسط پژوهشگر در 221 روز قبل ساعت 01:32
دسته بندی ها: JavaScript JavaScript for beginner
arman در 221 روز قبل ساعت 12:52

برای تجربه بهتر با OrbitControls، فعال‌سازی damping و به‌روزرسانی projection همراه با resize توصیه می‌شود. در resize، حتماً اندازه renderer و نسبت دوربین را به‌روزرسانی کن و camera.updateProjectionMatrix را فراموش نکن. MeshStandardMaterial با AmbientLight و DirectionalLight نتیجهٔ بهتری می‌دهد، اما اگر نور کافی نبود، شدت نورها یا shadows را تنظیم کن. همچنین مطمئن شو که مسیرهای ایمپورت درست‌اند و renderer.setPixelRatio(window.devicePixelRatio) را برای وضوح مناسب استفاده کرده‌ای.

گزارش

1 پاسخ

جدید ترین قدیمی ترین بالاترین امتیاز پاسخ های من

در حال بارگیری...
ورود به حساب کاربری