Інтерактивний 3D-графік поверхні

Цей пост містить живий 3D-графік поверхні, відрендерений за допомогою Three.js. Поверхня — класична сідлова функція z = x² − y², забарвлена за висотою.

Управління

• ЛКМ + перетягування — обертання
• Колесо / щипок — масштабування
• ПКМ + перетягування — панорамування

Як це працює

Поверхня генерується шляхом семплування функції z = x² − y² по рівномірній сітці точок. Кожна вершина забарвлюється відповідно до значення z — від синього (низькі значення) до червоного (високі).

const z = x * x - y * y;
const color = heightToColor(z, minZ, maxZ);

Меш використовує BufferGeometry з атрибутами позиції та кольору, а MeshPhongMaterial з vertexColors: true забезпечує висотне затінення.

OrbitControls від Three.js обробляють взаємодію мишею/дотиком. Рендерер підключений до ResizeObserver, тому canvas завжди заповнює свій контейнер.