Автор оригинала: FreeCodeCamp Community Member.
по O-LAP
Это руководство поможет вам создать кусок параметрической мебели. Проверьте Один из дизайнов из нашей галереи, чтобы найти тот, который вам нравится. Вы можете прочитать больше о проекте здесь Отказ
В этом руководстве предполагается, что у вас есть понимание JavaScript, Git (основы) и Триес Отказ (Достаточно хорошо, если у вас есть только о работе с ними один раз).
Давайте начнем.
Установка
Получить стартовый проект, клонируя https://github.com/o-lap/starter_project.git Отказ Starter_Project У вас есть файлы, чтобы позволить вам запустить и проверить свой дизайн в среде разработки. Как только вы нажимаете его и зарегистрируйте его с основным приложением, он также работает плавно с каркасом.
Проект стартера настроен для отображения простого куба, который можно управлять с использованием параметров в браузере. Это упражнение заменит этот куб нашим собственным дизайном.
Вы можете открыть dev.html Файл в браузере, чтобы увидеть, как он выглядит в настоящее время.
Вы можете изменить ползунки с правой стороны, изменив пропорции куба. Вы увидите группу контролей в разделе «Окружающая среда» в правом нижнем углу. Попробуйте включить переключатель «Показать раздел». Он показывает участки куба, которые могут быть изготовлены.
Мы можем использовать эти разделы, чтобы сделать кубик реальной древесиной.
Когда вы нажимаете кнопку «Скачать», она даст вам файл CAD (.obj), который вы можете передать машину с ЧПУ, чтобы изготовить его. Вы можете прочитать больше об этом процессе здесь Отказ
Вот пример председателя, сделанного с использованием этой техники:
Проходить через код
Начнем, сделав параметрический цилиндр (который вы можете себе представить как небольшой стул), чтобы заменить кубик. Дизайн Папка содержит все файлы, которые вам нужны для дизайна.
Design.js Файл содержит какой-то код пример, показывающий куб, который может быть параметрически изменен.
dev.html Файл – это жгут разработки, который эмулирует веб-приложение OLAP. (Этот файл позже должен был быть скопирован вручную на обновлениях.)
Рамка требует, чтобы логика дизайна была захвачена в объекте JavaScript под названием Дизайн в Design.js файл.
Design.info = { ... };Design.inputs = { ... };Design.inputState = { ... };Design.init = async function() { ... };Design.updateGeom = async function(group, sliceManager) { ... };Design.inputs Где вы указываете параметры для вашего дизайна. Настроен для куба. Давайте изменим это, чтобы сделать его подходящим для нашей сферы.
Мы будем держать вещи очень просто и использовать только Высота и Вес для нашего цилиндра.
Обновить Design.inputs Так выглядит так.
Design.inputs = { "width": { "type": "slider", "label": "Width", "default": 150, "min": 100, "max": 200 }, "height": { "type": "slider", "label": "Height", "default": 150, "min": 100, "max": 200 }}Теперь, если вы откроете dev.html Это должно выглядеть что-то вроде:
Добавление в геометрию
Теперь мы создадим цилиндр вместо куба.
Конструкция обновляется каждый раз, когда значение параметра изменяется и на инитурованной нагрузке. Это проходит в пустом Three.Object3d Какой контейнер для вас, чтобы добавить геометрию на и A Slicemanager Что вы можете использовать, чтобы указать, как сделать «ломтики» для дизайна. Ссылки на предыдущее вызов обновления отбрасываются и используются свежие экземпляры для каждого вызова.
Design.updateGeom = async function(group, sliceManager) { ... };Давайте посмотрим, что updategemetryry Метод выглядит как для куба.
Design.updateGeom = async function(group, sliceManager) { var geometry = new THREE.BoxGeometry( 200, Design.inputState.height, Design.inputState.width * ((Design.inputState.doubleWidth) ? 2 : 1) ); var material = getMaterial(Design.inputState.colour, Design.inputState.finish); var cube = new THREE.Mesh( geometry, material ); sliceManager.addSliceSet({uDir: true, start: -80, end: 80, cuts: 3}); sliceManager.addSliceSet({uDir: false, start: -90, end: 90, cuts: 4}); group.add( cube );}Вы можете использовать Design.inputstate Чтобы получить доступ к текущему значению, установленным пользователем для параметров в любое время.
Например, чтобы получить доступ к значению для Высота Параметр, вы можете использовать Design.inputstate.height Отказ
Первые 4 строки чистые Триес код, где он создает простой BoxGeometry на основе значений параметров. Это основная часть вашего дизайна, которую вы будете изменять на следующем шаге, чтобы создать дизайн, используя значения параметров. Часть после этого с Slicemanager s Управляйте тем, как создаются профили раздела для вашего дизайна. Больше информации о нарезке дальше ниже.
Мы изменим этот метод, чтобы он в конечном итоге выглядит так:
Design.updateGeom = function(group, sliceManager) { var geometry = new THREE.CylinderGeometry( Design.inputState.width -100, Design.inputState.width, Design.inputState.height, 32 ); var material = new THREE.MeshStandardMaterial( {color: 0x00BFFF } ); var cylinder = new THREE.Mesh( geometry, material ); sliceManager.addSliceSet({uDir: true, start: -80, end: 80, cuts: 3}); sliceManager.addSliceSet({uDir: false, start: -90, end: 90, cuts: 4}); group.add( cylinder );}Мы заменяем 3 строки, которые создали кубик с 3 линиями, которые создают цилиндр. Мы используем ширину и высоту от параметров дизайна и фиксированного цвета.
Мы сохраняем такие же настройки нарезки, как и прежде, и обновите последнюю строку, чтобы добавить цилиндр вместо куба.
Нажмите Сохранить и попробуйте освежать страницу, чтобы увидеть изменение. Вы должны увидеть что-то вроде этого.
Попытка играть с параметрами и проверять, как разделы ищут этот дизайн. Вы можете работать с любой сеткой TrieJS, чтобы определить геометрию вашего дизайна.
Вся геометрия прошла в Группа «нарезанный» нарезной конфигурации согласно прилагаемым настройкам.
Эта быстрая прогулка через продемонстрировало, как вы можете парутробно построить базовые геометрии. Вы можете адаптировать эту логику, чтобы создать любую параметрическую геометрию, которая может быть изготовлена на мебель.
Проверьте это Статья для понимания использования вычислительных методов для дизайна мебели.
Отправить свой дизайн
Как только у вас есть дизайн, с которым вы довольны, вы можете прогрессировать для подачи вашего дизайна, если хотите.
Для этого быстрого запуска мы отправим наш дизайн в тестовую галерею, которую мы поддерживаем. Все проекты, зарегистрированные в тестовой галерее, периодически очищаются.
Проекты будут приняты в репо REPO MAIN/TEST через запросы на потяну. Это позволит осмысленно обсудить в процессе Add/Publish.
Перейти к:
https://github.com/o-lap/home/edit/master/data/test_designcollection.js Отказ
Если это ваш первый раз добавление дизайна, вам будет предложено вилку репо. Сделай это.
Добавьте ссылку на свой репозиторий (например, https://github.com/amitlzkpa/o-lap_plato ) в список внутри Test_designcollection Отказ Убедитесь, что у вас есть запятые в нужном месте.
Сделать только одно изменение за раз. Любые предложения с более чем одним изменением будут отклонены, даже если все остальное на месте. Нажмите, чтобы предложить изменения. Он будет модерироваться одним из сопровождающих, и если требуется дополнительное обсуждение, это произойдет на этой странице.
Если ваш дизайн принят … HOORAY! У нас есть Микеланджело в приготовлении! Вы можете проверить свой дизайн, перейдем к ссылке: http://o-lap.org/test.html?a=
Большинство изложений на тестовое репо будет принято. Как сообщество, мы надеемся, что тот же процесс будет использоваться для умеренных конструкций, которые не выполняют требования.
Ссылка на представление (Главная): https://github.com/o-lap/home/edit/master/data/olap_designcollection.js Ссылка на представление (тест): https://github.com/o-lap/home/edit/master/data/test_designcollection.js Дизайн галереи (главное): https://o-lap.github.io/home/designs.html Дизайн галереи (тест): https://o-lap.github.io/home/test.html Приложение: http://o-lap.org/app.html?a=
Как опубликовать обновление для вашего дизайна
Чтобы обновить файл дизайна, вам не нужно обновлять свой файл одновременно. На самом деле, лучше вносить изменения в небольшие шаги как отдельные коммиты. С каждым фиксациями включите значимое описание того, какие изменения вы сделали, а также как и почему вы внесли изменения.
Обновите Design.js Файл, чтобы сделать только обновление версии.
Изменить номер версии в "Версия": "x.y.z", (линия 11) внутри Design.js x.y.z (X: Основные изменения; Y: незначительные изменения; Z: Tweaks) (Подробнее) [ https://semver.org/ Несомненно
Как вилку другой дизайн
Откройте Bash/Terminal/Command Command в папку. Беги Git Clone Открыть Дес IGN.JS и внесите ваши изменения.
Возможно, вы захотите переименовать папку к тому, что вы хотите назвать ваш дизайн Отказ
После того, как вы сделали внесение изменений, сбросьте дизайн версии на 1.0.0 Изменение "Версия": "x.y.z" , (линия 11) внутри Design.js Отказ Обновить другую информацию, как name, short_desc, long_desc, сообщение и т.п.
Начните думать об этом дизайне как новый дизайн от.
Если вы хотите продолжать потянуть изменения из родительского репо, следуйте этим страница Отказ Отправить свой раздел дизайн как новый дизайн, следуя Отправить свой дизайн процесс.
Вы установлены!
Немного больше в глубине
До этого момента мы быстро посмотрели на несколько вещей. Теперь, когда у вас лучше понять, мы будем выглядеть немного более подробно.
Информация о дизайне
Вверху вы увидите дизайн мета-информацию, которая выглядит так:
Design.info = { "name": "Boxy", "designer": "Roxy", "version": "1.0.0", "license": "MIT", "short_desc": "Template design file demoing project setup.", "long_desc": "", "url": null, "message": "Control the parameters of the cube using these controls.", "tags": [ "", "" ]}Это используется для отображения информации о дизайне в галерее.
Входные типы
Чтобы дать вам контроль над вашими входными параметрами, вы можете указать различные типы ввода.
Design.inputs = { ... };Есть 4 типа параметров, которые вы можете предоставить – слайдер , Bool , Выберите и текст Отказ слайдер используется, чтобы позволить пользователю выбирать числовое значение с непрерывного диапазона. Значения в целых числах. Bool позволяет пользователю выбирать из значения да/нет. Выберите позволяет пользователю выбрать один из списка значений. текст принимает вход для текстовых значений. Чтобы добавить параметры к вашему дизайну, вам нужно зарегистрировать его, добавив пару клавиш для Design.input Отказ
Нарезка
Нарезка – это процесс извлечения прямых секций от вашего дизайна, который мы можем использовать для изготовления конструкции.
Прочитайте FAQ понять процесс.
Используйте Slicemanager Общаться с рамками, как вы хотите, чтобы дизайн был нарезан.
Мы делаем это, проходя config . объект к Slicemanager. Если мы хотим создавать ломтики вдоль оси X AT -80 и поднимитесь +80 с 3 кусочками, равные распределенные в этом диапазоне (все расстояния находятся в миллиметрах), мы проходим в объекте, который выглядит так:
{udir: true, start: -80, конец: 80, порезы: 3}
Чтобы создать еще один набор ломтиков вдоль оси Y, начнут с -90 и добираюсь до +90 с 4 порезами, мы проходим в такой объекте:
{udir: true, start: -90, конец: 90, порезы: 4}
Обязательно укажите настройку нарезки прямо перед добавлением геометрии. Как правило, с двумя наборами ломтиков в противоположных направлениях у вас должны быть проекты, которые могут быть изготовлены. Но вы должны быть осторожны о том, как вы думаете об этом в вашем дизайне.
Прочитайте Дизайн Руководства Чтобы лучше понять это.
Следующие шаги
Это руководство прогуливало вас через шаги, связанные с получением правильных файлов, создавая дизайн с нуля и отправлять его.
Чтобы понять больше о параметрической конструкции мебели, проверьте дизайн статьи Отказ Эксперимент с концепцией и его творческим потенциалом (ограничен физическими ограничениями производства).
Чтобы представить проекты в основную галерею, обязательно прочитайте Дизайн Руководства Отказ
Статья амит Nambiar для O-LAP