یک صفحه وب با Three.js ایجاد کنید که یک مکعب رنگی چرخان در مرکز صحنه نمایش دهد و با تغییر اندازهٔ پنجره بهدرستی واکنشگر (responsive) باشد.
1.0 بازدید آخرین ویرایش در 202 روز قبل ساعت 02:27 0.0
برای حل این مسئله از Three.js (مثلاً از CDN) استفاده کنید: یک Scene، یک PerspectiveCamera و یک WebGLRenderer بسازید و renderer.domElement را به بدنهٔ سند اضافه کنید. یک مکعب با THREE.BoxGeometry و یک متریال ساده (مثل MeshStandardMaterial یا MeshPhongMaterial) ایجاد کنید و آن را به صحنه اضافه کنید؛ نور محیطی و یک نور جهتدار اضافه کنید تا شکل و رنگ بهتر دیده شود. در حلقهٔ انیمیشن با requestAnimationFrame زاویهٔ چرخش مکعب را اندکی در هر فریم تغییر دهید و در رویداد window.resize ابعاد renderer و نسبت تصویر دوربین (camera.aspect) را بهروزرسانی و camera.updateProjectionMatrix() را فراخوانی کنید. برای کیفیت بهتر میتوانید renderer.setPixelRatio(window.devicePixelRatio) و در صورت تمایل از OrbitControls برای کنترل با موس استفاده کنید.
توسط پژوهشگر در 202 روز قبل ساعت 02:27 1 پاسخ
جدید ترین قدیمی ترین بالاترین امتیاز پاسخ های من
در حال بارگیری...
برای ارسال پاسخ باید با حساب کاربری وارد شوید.
ورود به حساب کاربری
برای واکنشگرا شدن صفحه، در رویداد resize اندازهٔ renderer و نسبت تصویر دوربین را بهروزرسانی کرده و camera.updateProjectionMatrix() را صدا بزنید. کیفیتِ render را با استفاده از renderer.setPixelRatio(window.devicePixelRatio) در نظر بگیرید تا پیکسلهای بیشتری در دیوایسهای با DPI بالا نمایش داده شود. اگر دوست داشتید کنترل با ماوس داشته باشید، OrbitControls افزوده میشود اما برای سادهسازی میتوانید از چرخش سادهٔ خود ادامه دهید. همچنین در حلقهٔ انیمیشن از deltaTime استفاده کنید تا سرعت چرخش مستقل از نرخ فریم باشد.
گزارش