با استفاده از Three.js یک صحنهٔ ساده بسازید که یک مکعب رنگی را در مرکز صفحه نمایش دهد، بهطور پیوسته بچرخد، دارای نورپردازی پایه باشد و هنگام تغییر اندازهٔ پنجره واکنشگرا باشد.
1.0 بازدید آخرین ویرایش در 220 روز قبل ساعت 01:47برای حل این مسئله از Three.js (از طریق CDN یا نصب npm) استفاده کنید: یک Scene، یک PerspectiveCamera و یک WebGLRenderer بسازید و renderer.domElement را به بدنهٔ صفحه اضافه کنید. یک BoxGeometry و MeshStandardMaterial یا MeshPhongMaterial ایجاد کنید و با Mesh به صحنه اضافه کنید؛ سپس یک AmbientLight و یک DirectionalLight برای نورپردازی پایه اضافه نمایید. حلقهٔ انیمیشن را با requestAnimationFrame پیادهسازی کنید تا در هر فریم مختصات چرخش مکعب را تغییر دهید و renderer.render را فراخوانی کنید. برای واکنشگرایی، یک شنوندهٔ window.resize اضافه کنید که camera.aspect را بهروز کند، camera.updateProjectionMatrix را صدا بزند و renderer.setSize را تنظیم کند. نکات: از renderer.setPixelRatio(window.devicePixelRatio) برای وضوح بهتر استفاده کنید، و اگر تمایل دارید کنترل دوربین بخواهید میتوانید OrbitControls را اضافه کنید.
توسط پژوهشگر در 220 روز قبل ساعت 01:47
برای ثبات چرخش مکعب در دستگاههای مختلف از deltaTime در حلقهٔ انیمیشن استفاده کنید تا سرعت چرخش مستقل از فریمریت باشد. همچنین استفاده از OrbitControls میتواند تجربهٔ کاربری را هنگام کنترل دوربین بهبود دهد. برای واکنشگرایی به تغییر اندازهٔ صفحه، مطمئن شوید که camera.aspect بهروز میشود، projectionMatrix بهروزرسانی میشود و renderer.setSize همراه با setPixelRatio(window.devicePixelRatio) اجرا میشود. برای نورپردازی پایه، AmbientLight کافی است اما اگر قصد دارید روشنایی واقعگرایانهتر شود، DirectionalLight را با شدت مناسب و سایههای ساده امتحان کنید.
گزارش