OpenCascade.js — это порт замечательной САПР-библиотеки OpenCascade на Javascript. Это инструмент, лежащий в основе CascadeStudio и CadHub.

Красиво, но… что это значит?

Это означает, что вы можете создавать модели для 3D-принтера или ЧПУ прямо в браузере, используя код и передовые технологии.

У Курта Хаттена есть хорошая статья здесь о преимуществах кода для создания 3D-моделей (и хорошо подобранный список программного обеспечения для этого). Проверь это.

Начиная

Откройте CadHub или CascadeStudio, вот и все. Не нужно ничего скачивать или устанавливать.

Рисовать и выдавливать

Давайте нарисуем что-то сначала в 2D, а затем вытянем в третье измерение. Удалите образец содержимого в редакторе и создайте круг радиусом 10 единиц.

Circle(10);

Нажмите F5, и сцена справа должна показать это:

Это плоский круг, как Земля🌎, верно? 😝

Так какие же здесь «единицы»? Сантиметры? Миллиметры? Дюймы? На самом деле, CascadeStudio было все равно. Это то, что хочет ваше программное обеспечение CAM, когда вы конвертируете его в GCode для печати или фрезерования.

Создавайте модели для 3D-принтера или ЧПУ прямо в браузере с помощью кода.

Теперь, чтобы придать ему объем, выдавите его и снова нажмите F5:

Extrude(Circle(10), [0, 0, 10]);

Небольшая очередь, но это много происходит.

Что означает [0, 0, 10]?

Точки и направления в Cascade Studio представляют собой массивы из 3-х элементов: [x, y, z] . Ось x показывает, насколько она «широкая», ось y — «глубокая», а ось z — « высота". Мы просим его сделать круг высотой 10 единиц.

Если вы знакомы с этим термином, эти массивы из трех элементов являются векторами. Иногда, когда мы моделируем 2D-формы для выдавливания, нам не нужна ось z, поэтому у нас есть 2 массива элементов [x, y].

Что делает Extrude?

Он проецирует 2D-формы в 3D-пространство, «растягивая» их в направлении предоставленного нами вектора. В случае выше он «растянул» круг вверх. Попробуйте использовать отрицательные значения для z или добавить что-то к y и посмотреть, что произойдет.

Не волнуйтесь, вы ничего не сломаете. Худшее, что может случиться, это получить сообщение об ошибке.

Это просто Javascript

Мы кодируем на простом Javascript, поэтому применимо все, что связано с Javascript. Например, мы можем использовать переменные:

let my_stuff = Circle(10);
let this_tall = [0, 0, 10];
Extrude(my_stuff, this_tall);

Не забудьте нажать F5, чтобы применить изменения.

Эскиз и выдавливание

Что, если мы хотим чего-то более сложного? Попробуем крышу.

new Sketch([0, 0])
  .LineTo([30, 0])
  .LineTo([15, 15])
  .End(true)
  .Face();

Ну… сложнее конечно, но на крышу не похоже 🤔. Не волнуйтесь, мы доберемся до этого, но сначала позвольте мне объяснить, что все эти сумасшедшие вещи означают.

Sketch — это отправная точка для новой 2D-формы, мы будем часто ее использовать. Обратите внимание на ключевое слово new перед ним. Это немного отличается от прежнего Circle, и это единственная вещь в Studio, которая его использует, все остальное создается функциями.

После Sketch мы цепляем кучу методов. они делают то, что, по вашему мнению, должны делать: они создают линию, соединяющую предыдущую точку со следующей. Таким образом, new Sketch([0, 0]).LineTo([30, 0]) создает горизонтальную линию от [0, 0] до [30, 0], затем следующий метод идет от [30, 0] до [15, 15].

Наконец, что не менее важно, у нас есть End(true) . Это завершает эскиз. Аргумент true означает «закрыть фигуру», поэтому нам не нужно рисовать последнюю линию от [15, 15] обратно к [0, 0]. Это просто удобно, но если хотите, вы можете создать последнюю строку самостоятельно, например:

new Sketch([0, 0])
  .LineTo([30, 0])
  .LineTo([15, 15])
  .LineTo([0, 0]) // Manually closing the shape
  .End().         // Look Ma'! No "true".
  .Face();

Последняя команда — Face(), которая сообщает Cascade Studio, что нам нужен заполненный многоугольник (чтобы мы могли выдавить его). Другой вариант — Wire() . Попробуй! Просто обратите внимание, потому что он есть, но его трудно увидеть.

Теперь, когда все это убрано, давайте сделаем его хотя бы похожим на крышу.

let roofSide = new Sketch([0, 0])
  .LineTo([30, 0])
  .LineTo([15, 15])
  .End(true)
  .Face();
let roofVolume = Extrude(roofSide, [0, 0, -50]);
Rotate([1, 0, 0], 90, roofVolume);

Ох… это больше похоже на то.

Как видите, я использовал некоторые переменные, чтобы сделать код более читабельным, и добавил в игру Rotate. Да, он делает то, что вы думаете.

Единственная хитрость — это вектор [1, 0, 0] . 1 означает, что объем будет вращаться вокруг оси x. 90 — это вращение в градусах.

Закругленные углы

Мы можем легко скруглить углы. Просто добавьте Fillet к точке, которую вы хотите округлить:

let roofSide = new Sketch([0, 0])
  .LineTo([30, 0])
  .LineTo([15, 15]).Fillet(4) // <=== This is new!
  .End(true)
  .Face();
let roofVolume = Extrude(roofSide, [0, 0, -50]);
Rotate([1, 0, 0], 90, roofVolume);

Неплохо для такого небольшого дополнения.

Обратите внимание, что мы добавили закругленный угол к эскизу, поэтому, когда мы выдавливаем его, закругленный угол также следует за ним.

Радости Code CAD!

Ты готов сделать это круто? Я!

Это Javascript, так почему бы не создать функцию для создания крыш?

function roof(width, depth, height) {
  let roofSide = new Sketch([0, 0])
    .LineTo([width, 0])
    .LineTo([width / 2, height])
    .End(true)
    .Face();
  let roofVolume = Extrude(roofSide, [0, 0, -depth]);
  return Rotate([1, 0, 0], 90, roofVolume);
}
roof(30, 60, 10);

Теперь у нас может быть куча крыш:

function roof(width, depth, height) {
  let roofSide = new Sketch([0, 0])
    .LineTo([width, 0])
    .LineTo([width / 2, height])
    .End(true)
    .Face();
  let roofVolume = Extrude(roofSide, [0, 0, -depth]);
  return Rotate([1, 0, 0], 90, roofVolume);
}
for (let i = 0; i < 10; i++) {
  let height = Math.random() * 20 + 5;
  let width = Math.random() * 25 + 10;
  Translate([i * 50, 0 ,0],
    roof(width, 60, height));
}

И, наконец, переведите это

В строке 17 кода выше вы видите Translate. Это причудливый способ сказать «двигаться». Если вы помните наш разговор о трехэлементных массивах (или векторах), вы можете видеть, что мы перемещаем крыши по оси x на 50 единиц каждый цикл цикла.

Вот и все

По крайней мере, на данный момент.

В CadHub есть еще примеры. Просто прокрутите начальную страницу вниз, нажмите там на любой проект, а затем на кнопку Открыть IDE. Вписанный многоугольник и Вакуумные головы — мои любимые.