Онлайн 3D-графический калькулятор: поверхности, параметрические кривые и точки (WebGL)
Интерактивный 3D-построитель на WebGL (three.js). Отрисовывайте поверхности z=f(x,y) с настраиваемым разрешением, параметрические пространственные кривые или облака точек 3D-диаграммы рассеяния — добавляя точки по одной или вставляя их массово. Вращайте, приближайте и панорамируйте с помощью OrbitControls, сбрасывайте вид и копируйте точки диаграммы рассеяния — всё работает локально в вашем браузере.
Руководство по 3D-графику функций
Поверхности, параметрические кривые и облака точек в WebGL
3D-график функций отрисовывает три вида объектов в интерактивном вьюпорте WebGL: поверхности z = f(x, y), параметрические пространственные кривые (x(t), y(t), z(t)) и облака точек (scatter). Переключайте режимы, вводите выражения или точки и вращайте сцену мышью или касанием, чтобы изучить форму с любого ракурса.
01 Выбор режима
В режиме «Поверхность» введите z как функцию x и y (например sin(sqrt(x^2 + y^2))) и задайте диапазоны x и y; разрешение управляет плотностью сетки. В режиме «Параметрика» введите x(t), y(t) и z(t) как функции параметра t на [tmin, tmax]; число точек управляет количеством точек, определяющих кривую. В режиме «Точки» добавляйте отдельные точки (x, y, z), вводя координаты и нажимая +; используйте «Очистить», чтобы удалить все точки, и × для удаления одной.
Нажмите и перетаскивайте для вращения камеры, прокручивайте для масштабирования, а перетаскивание правой кнопкой (или двумя пальцами) — для панорамирования. Вид отрисовывается в браузере через WebGL и обёрнут в ClientOnly, чтобы не влиять на серверный рендеринг.
- Поверхность: z = f(x,y), дискретизированная по прямоугольной сетке
- Параметрика: кривая, прослеживаемая при изменении t по [tmin, tmax]
- Точки: дискретное облако точек (x, y, z)
- Более высокое разрешение/число точек дают более гладкий результат ценой производительности
Переключатель режима
- ПоверхностьСтроить z = f(x, y) по сетке.
- ПараметрикаСтроить параметрическую кривую x(t), y(t), z(t).
- ТочкиСтроить отдельные 3D-точки.
Элементы поверхности
- z = f(x, y)Выражение высоты через x и y.
- диапазон x / yЗадаёт прямоугольную область, дискретизируемую для поверхности.
- разрешениеПлотность сетки (24–64); выше — глаже, но медленнее.
Элементы параметрики
- x(t) / y(t) / z(t)Три выражения, определяющие кривую по параметру t.
- tmin / tmaxДиапазон параметра t.
- число точекКоличество точек вдоль кривой (100–2000).
Элементы точек
- поля x / y / zКоординаты для новой точки.
- +Добавляет введённую точку в облако.
- ОчиститьУдаляет все точки (а также очищает поле массового ввода).
- × (на точке)Удаляет эту одну точку.
- bulk text boxВставьте или введите сразу много точек, по одной в строке: x, y, z через запятую или пробел.
- ApplyРазбирает текст массового ввода и заменяет облако точек.
- CopyКопирует все точки построчно в формате x, y, z для вставки в другое место.
Вьюпорт
- перетаскиваниеВращать/поворачивать 3D-сцену.
- прокруткаПриближать и отдалять камеру.
- правая кнопкаПанорамировать камеру.
- reset viewКнопка на холсте, возвращает камеру к виду по умолчанию после вращения/панорамы/зума.
- Снижайте разрешение во время экспериментов, затем повышайте для финальной отрисовки.
- Параметрические кривые идеальны для спиралей, орбит и траекторий.
- Если поверхность выглядит рваной, увеличьте разрешение или сузьте диапазоны x/y.
- WebGL должен быть включён в браузере, чтобы появилось 3D-изображение.
Бесплатный онлайн 3D-графический калькулятор. Отрисовывайте поверхности z = f(x,y), стройте параметрические кривые x(t)/y(t)/z(t) и облака точек — всё интерактивно на WebGL с управлением орбитой. Выбирайте разрешение и диапазоны параметров, вращайте и масштабируйте в браузере. three.js поставляется в комплекте, поэтому не нужны ни плагин, ни загрузка данных.
Графики поверхностей
Введите z как функцию от x и y, например sin(sqrt(x^2+y^2)) или x^2-y^2, и выберите область по x/y и разрешение сетки. Поверхность отрисовывается в WebGL с освещением; увеличивайте разрешение для более гладкой сетки ценой производительности.
Параметрические кривые и точки
Для параметрических кривых введите x(t), y(t), z(t) и диапазон t, чтобы рисовать узлы, спирали и траектории. Для графиков точек введите списки координат x, y, z, чтобы визуализировать облака точек. Переключайте типы объектов на панели; каждый независим.
Навигация и производительность
Перетаскивайте для вращения, прокручивайте для зума и перетаскивайте правой кнопкой (или двумя пальцами) для панорамирования с помощью управления орбитой; кнопка сброса возвращает вид по умолчанию. Движок three.js загружается только при открытии этого инструмента, поэтому начальная страница остаётся быстрой. В браузере должен быть доступен WebGL.
Частые вопросы
QЧто можно построить в 3D?
Поверхности z=f(x,y), параметрические кривые x(t)/y(t)/z(t) и облака точек из списков координат x/y/z.
QНужно ли что-то устанавливать?
Нет. three.js поставляется с сайтом, а 3D использует WebGL, встроенный в современные браузеры, — ни плагин, ни приложение не требуются.
QМожно ли вращать и масштабировать вид?
Да — перетаскивайте для вращения, прокручивайте для зума, перетаскивайте правой кнопкой или двумя пальцами для панорамирования и используйте сброс, чтобы вернуться к камере по умолчанию.
QПочему поверхность блочная при высоком разрешении?
Более высокое разрешение сетки даёт более гладкие поверхности, но и больше треугольников для отрисовки. Снизьте разрешение, если ваше устройство медленное; производительность WebGL зависит от вашего GPU.