Đang tải bảng tin…
Codrops0 Hot0 bình luận15 phút đọc
Building a Scroll-Driven 3D Gallery Using a Blender Camera Path with Three.js and GSAP
A step-by-step guide to building a cinematic scroll-driven 3D image gallery. The workflow starts in Blender, where a Bezier curve is drawn and exported as JSON via a Python script with coordinate-system remapping. Three.js reconstructs the curve using CatmullRomCurve3, distributes 500 image planes along it with randomized lateral and depth offsets, and renders the scene with fog for depth. GSAP's Observer plugin captures scroll input across wheel, touch, and pointer devices, while gsap.quickTo() smoothly animates the camera along the path. A per-frame focus system scales nearby planes up to 14× using a cubic proximity function, also driven by quickTo() to avoid creating new tweens every frame. Additional features include animated path switching between five curves and an auto-scroll dolly mode.
Nguồn: https://tympanus.net/codrops/2026/07/07/building-a-scroll-driven-3d-gallery-using-a-blender-camera-path-with-three-js-and-gsap. 8sync News chỉ tóm tắt và dẫn link; bản quyền nội dung thuộc tác giả và nguồn gốc.
Đề xuất cho bạn
InfoWorld84 Hot1 phútAI
ECMAScript 2026 specification approved
ECMA International vừa phê duyệt ECMAScript 2026 (ES2026) vào ngày 30/6, phiên bản thứ 17 của đặc tả JavaScript. Bản cập nhật bổ sung nhiều tính năng mới như Math.sumPrecise, Iterator.concat, Array.fromAsync, Error.isError, phương thức mới cho Map/WeakMap, hỗ trợ chuyển đổi Uint8Array sang hex/base64, cùng cải tiến cho JSON.parse và JSON.stringify.
Lập trình viên nên đọc bài này vì ECMAScript 2026 mang đến những tính năng mới như Array.fromAsync và JSON.rawJSON, giúp cải thiện hiệu suất và tính linh hoạt trong xử lý dữ liệu đồng bộ/không đồng bộ và định dạng JSON trong các dự án hiện đại.
