Как сделать параметрическую мебель с помощью JavaScript

1656607573 kak sdelat parametricheskuyu mebel s pomoshhyu javascript

от O-LAP

4 ммAQQTIxAMwkXKdwLy1aCMJY7aepVLqauYX
Источник

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

В этом учебнике предполагается, что вы знаете Javascript, Git (основы) и ThreeJS. (Довольно хорошо, если вы почти поработали с ними один раз).

Давайте начнем.

Настройка

Получите первоначальный проект путем клонирования https://github.com/O-LAP/starter_project.git. The starter_project имеет файлы, позволяющие запускать и тестировать свой дизайн в среде разработки. После того, как вы нажмете и зарегистрируете его в главной программе, он также бесперебойно работает с фреймворком.

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

Вы можете открыть dev.html файл в браузере, чтобы увидеть, как он выглядит сейчас.

Вы можете изменить ползунки с правой стороны, изменяющие пропорции куба. Вы увидите группу элементов управления в разделе «Среда» в правом нижнем углу. Попытайтесь включить переключатель «Показать раздел». Он показывает участки куба, которые можно изготовить.

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

При нажатии кнопки «Загрузить» вы получаете файл CAD (.obj), который вы можете скачать в станок с ЧПУ, чтобы получить его. Подробнее об этом процессе можно прочесть здесь.

Вот пример стула, изготовленного по этой технике:

nJCOzTVUgJAGHMHzJ6DUIOChhKf7iDIlQlbb

Перебираем код

Начнём с изготовления параметрического цилиндра (который вы можете представить в виде маленького табурета), чтобы заменить куб. The designs папка содержит все файлы, необходимые для оформления.

The Design.js файл содержит некий образец кода, показывающий куб, который можно параметрически изменить.

The dev.html file — это инструмент разработки, который эмулирует веб-приложение OLAP. (Позже этот файл придется копировать вручную при обновлении.)

Фреймворк требует, чтобы логика проектирования была записана в объект JavaScript, который называется Design в Design.js файл.

Design.info = { ... };Design.inputs = { ... };Design.inputState = { ... };Design.init = async function() { ... };Design.updateGeom = async function(group, sliceManager) { ... };

Design.inputs Здесь вы указываете параметры для вашего дизайна. Он сконфигурирован для куба. Давайте модифицируем его, чтобы сделать его пригодным для нашей сферы.

Мы сделаем вещи очень простыми и только использованными height и weight для нашего цилиндра.

Обновление 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 это должно выглядеть примерно так:

7OS0MXJTSb49EcVOxvOXv1QzPZv1gSCR6q04

Добавление геометрии

Теперь вместо куба создадим цилиндр.

Конструкция обновляется каждый раз, когда меняется значение параметра и при начальной загрузке.
Переходит в пустой THREE.Object3D который является контейнером для добавления геометрии и a SliceManager который вы можете использовать, чтобы указать, как сделать срезы для дизайна. Ссылки с предыдущего вызова обновляются, а новые экземпляры используются для каждого вызова.

Design.updateGeom = async function(group, sliceManager) { ... };

Давайте посмотрим, что updateGeometry Способ выглядит как для куба.

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 для доступа к текущему значению, установленному пользователем для параметров в любое время.

Например, чтобы получить доступ к значению for height параметр, который можно использовать Design.inputState.height.

Первые 4 строки являются чистым кодом threeJS, где он создает простой BoxGeometry на основе значений параметров
Это основная часть вашего дизайна, которую вы измените на следующем шаге, чтобы создать дизайн с использованием параметров.
Часть после этого из sliceManagerуправляйте тем, как создаются разделы профили для вашего дизайна.
Больше информации о нарезке ниже.

Мы изменим этот метод, чтобы он выглядел так:

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 линии, которые создали куб, тремя линиями, создающими цилиндр. Мы используем ширину и высоту из параметров дизайна и фиксированный цвет.

Мы сохраняем те же настройки нарезки, что и раньше, и обновляем последнюю строчку, чтобы добавить цилиндр вместо куба.

Нажмите кнопку «Сохранить» и попробуйте обновить страницу, чтобы увидеть изменения. Вы должны увидеть нечто подобное.

vaCx8l3sFofcRehFCfE4UxHBvm-j43PkZ7sh

Попытайтесь поиграть с параметрами и проверьте, как выглядят разделы для этого дизайна. Вы можете работать с любой сеткой threeJS, чтобы определить геометрию вашего дизайна.

Вся геометрия перешла в group «нарезается» конфигурацией нарезки в соответствии с указанными параметрами.

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

Просмотрите статью, чтобы понять использование вычислительных методов для дизайна мебели.

Отправьте свой дизайн

Когда вы получите дизайн, которым вы удовлетворены, вы можете перейти к представлению дизайна, если хотите.

Для этого быстрого начала мы отправим наш дизайн в тестовую галерею, которую мы поддерживаем. Все проекты, зарегистрированные в тестовой галерее, периодически очищаются.

Проекты будут приняты в основное/тестовое репо с помощью запросов на подъемник. Это позволит провести содержательное обсуждение в процессе добавления/публикации.

Идти в:

https://github.com/O-LAP/home/edit/master/data/TEST_DesignCollection.js.

Если вы впервые прибавляете дизайн, вам будет предложено разделить репо. Сделай это.

Добавьте ссылку в свое хранилище (напр. https://github.com/amitlzkpa/o-lap_plato) в список внутри TEST_DesignCollection . Обязательно проверьте, правильно ли вы поставили запятые.

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

Если ваш дизайн принят… ура! Мы создаем Микеланджело! Вы можете проверить свой дизайн, перейдя по ссылке: http://o-lap.org/test.html?a=<github-user-name>&r=<olap-repo-name>

Большинство заявок на тестовое репо будут приняты.
Как сообщество, мы надеемся, что этот же процесс будет использоваться для модерации дизайнов, которые не отвечают требованиям.

Ссылка для представления (основная): 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=<github-user-name>&r=<olap-repo-name>&m=тест

Как опубликовать обновления для своего дизайна

Чтобы обновить файл дизайна, вам не нужно обновлять файл одновременно. На самом деле лучше вносить изменения небольшими шагами как отдельные комиты. С каждым комитом добавьте содержательное описание того, какие изменения вы внесли, а также, как и почему вы внесли изменения.

Обновите Design.js файл, чтобы изменить только обновление версии.

Измените номер версии в at "version": "x.y.z",(строка 11) внутри Design.js
xyz (x: основные изменения; y: незначительные изменения; z: настройки) (подробнее)[https://semver.org/]

Как развить другой дизайн

Откройте bash/терминал/командную строку в папке. Беги git clone <repo you want to fork>. Open Design.js и измените.

Возможно, вы хотите переименовать папку так, как вы хотите назвать свой дизайн.

После внесения изменений сбросьте версию дизайна до 1.0.0 путем модификации "version": "x.y.z"(строка 11) внутри Design.js . Обновите другую информацию, например name, short_desc, long_desc, message тому подобное

Теперь начните думать об этом дизайне как о новом дизайне.

Если вы хотите продолжить извлекать изменения из родительского репо, перейдите на эту страницу. Отправьте свой раздвоенный дизайн как новый дизайн, придерживаясь Submit Your Design процесс.

Вы готовы!

Немного подробнее

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

Информация о дизайне

Вверху вы увидите цель информации о дизайне, которая выглядит так:

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": [ "", "" ]}

Это используется для отображения информации о дизайне в галерее.

cPpDrNJKdE1woXLlRpzOpqbPEhvs2shLt21v

Типы ввода

Чтобы предоставить вам контроль над входящими параметрами, можно указать различные типы ввода.

Design.inputs = { ... };

Вы можете предоставить 4 типа параметров. slider, bool, select и text.
slider используется, чтобы позволить пользователю выбрать числовое значение из непрерывного диапазона. Значения указаны в целых числах.
bool позволяет пользователю выбрать значение да/нет.
select позволяет пользователю выбрать одно из списка значений.
text принимает входящие данные для текстовых значений.
Чтобы добавить параметры в ваш дизайн, вам нужно зарегистрировать его, добавив пару ключ-значения Design.input.

Нарезка

Нарезка – это процесс извлечения прямых участков из вашего проекта, которые мы можем использовать для изготовления конструкции.

Прочтите часто задаваемые вопросы, чтобы понять процесс.

Использовать sliceManager чтобы сообщить фреймворку, как вы хотите, чтобы дизайн был разделен.

Мы делаем это, передавая a config объект для SliceManager. Если мы хотим создать срезы вдоль оси X при -80 и подняться вверх на +80 с 3 срезами, равномерно распределенными в этом диапазоне (все расстояния в миллиметрах), мы передаем выглядящий объект:

{uDir: true, start: -80, end: 80, cuts: 3}

Чтобы создать еще один набор срезов вдоль оси Y, которые начинаются с -90 и поднимаются до +90 с 4 разрезами, мы передаем объект, как это:

{uDir: true, start: -90, end: 90, cuts: 4}

Не забудьте указать конфигурацию вырезки непосредственно перед добавлением геометрии. Как правило, с двумя наборами ломтиков в противоположных направлениях у вас должны быть конструкции, которые можно изготовить. Но вы должны быть осторожны с тем, как вы думаете об этом в вашем дизайне.

Прочитайте инструкции по дизайну, чтобы лучше понять это.

Следующие шаги

Это руководство провело вас через этапы получения правильных файлов, создание дизайна с нуля и его представление.

Чтобы узнать больше о параметрическом дизайне мебели, посмотрите статью о дизайне. Экспериментируйте с концепцией и ее творческим потенциалом (ограниченными ограничениями физического производства).

Чтобы отправить проекты в главную галерею, обязательно прочтите рекомендации по дизайну.

Статья Амита Намбиара для O-lap

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *