javascript的参数

by O-LAP

由O-LAP

如何使用JavaScript制作参数家具 (How you can make parametric furniture with JavaScript)

This guide will help you create a piece of parametric furniture. Check out one of the designs from our gallery to find one you like. You can read more about the project here.

本指南将帮助您创建一件参数化家具。 从我们的画廊中查看一种设计，以找到自己喜欢的一种。 您可以在此处阅读有关该项目的更多信息。

This tutorial assumes that you have an understanding of Javascript, Git (basics) and ThreeJS. (It’s good enough if you have just about worked with them once).

本教程假定您已了解Javascript，Git(基础知识)和ThreeJS 。 (如果您只与他们一起工作过一次就足够了)。

Let’s get started.

让我们开始吧。

设定 (Getting set up)

Get the starter project by cloning https://github.com/O-LAP/starter_project.git. The starter_project has files in place to let you run and test your design in a development environment. Once you push it and register it with the main app, it runs smoothly with the framework as well.

通过克隆https://github.com/O-LAP/starter_project.git获得入门项目。 starter_project拥有适当的文件，可让您在开发环境中运行和测试设计。 推送并在主应用程序中注册后，它也可以在框架中顺利运行。

The starter project is configured to show a simple cube which can be controlled using parameters in the browser. This exercise will replace that cube with our own design.

入门项目配置为显示一个简单的多维数据集，可以使用浏览器中的参数进行控制。 本练习将使用我们自己的设计替换该多维数据集。

You can open up the dev.html file in a browser to see what it currently looks like.

您可以在浏览器中打开dev.html文件，以查看其当前外观。

You can change the sliders on the right hand side which change the proportions of the cube. You will see a group of controls under “Environment” on the bottom right. Try enabling the “Show Section” switch. It shows sections of the cube which can be fabricated.

您可以更改右侧的滑块，以更改立方体的比例。 您将在右下角的“环境”下看到一组控件。 尝试启用“显示部分”开关。 它显示了可以制造的立方体的各个部分。

We can use those sections to make the cube with real wood.

我们可以使用这些部分用实木制作立方体。

When you click the “Download” button, it will give you a CAD file (.obj) which you can feed into a CNC machine to get it fabricated. You can read more about this process here.

当您单击“下载”按钮时，它将为您提供一个CAD文件(.obj)，您可以将其输入到CNC机床中进行装配。 您可以在此处阅读有关此过程的更多信息。

Here’s an example of a chair made using this technique:

这是使用此技术制成的椅子的示例：

遍历代码 (Going through the code)

Let’s start by making a parametric cylinder (which you can imagine as a small stool) to replace the cube. The designs folder contains all the files you need for the design.

让我们开始制作一个参数化圆柱体(您可以想象成一个小凳子)来替换立方体。 designs文件夹包含designs所需的所有文件。

The Design.js file contains some sample code showing a cube which can be parametrically modified.

Design.js文件包含一些示例代码，这些示例代码显示可以参数修改的多维数据集。

The dev.html file is the development harness which emulates the OLAP web app. (This file would later have to be manually copied on updates.)

dev.html文件是模拟OLAP Web应用程序的开发工具。 (此文件以后必须在更新时手动复制。)

The framework requires the design logic to be captured in a JavaScript object called Design in Design.js file.

该框架要求将设计逻辑捕获在一个名为Design.js文件中的DesignJavaScript对象中。

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

Design.inputs is where you specify the parameters for your design. It is configured for the cube. Let's modify it to make it suitable for our sphere.

Design.inputs中，您可以为设计指定参数。 为多维数据集配置它。 让我们对其进行修改以使其适合我们的领域。

We will keep things very simple and only use height and weight for our cylinder.

我们将使事情变得非常简单，并且只对圆柱体使用height和weight 。

Update Design.inputs so it looks like this.

更新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    }}

Now if you open dev.html it should look something like:

现在，如果您打开dev.html它应该类似于：

添加几何 (Adding in geometry)

Now we will create a cylinder instead of a cube.

现在，我们将创建一个圆柱体而不是一个立方体。

The design is updated everytime a parameter value is changed and on initital load.It passes in an empty THREE.Object3D which is the container for you to add geometries to and a SliceManager which the you can use to specify how to make the 'slices' for the design. References from the previous update call are discarded and fresh instances for every call are used.

每次更改参数值并在初始负载下都会更新设计， THREE.Object3D传入一个空的THREE.Object3D这是您要添加几何图形的容器)和一个SliceManager可用于指定如何制作``切片''的)为设计。 来自上一个更新调用的引用将被丢弃，并使用每个调用的新实例。

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

Let’s look at what the updateGeometry method looks like for the cube.

让我们看一下多维数据集的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 );}

You can use Design.inputState to access the current value set by the user for the parameters at all times.

您可以随时使用Design.inputState访问用户为参数设置的当前值。

For example, to access the value for height parameter, you can use Design.inputState.height.

例如，要访问height参数的值，可以使用Design.inputState.height 。

The first 4 lines are pure threeJS code, where it creates a simple BoxGeometry based on the parameter values.This is the main part of your design which you will modify in the following step to create a design using the parameter values.The part after that with the sliceManagers manage how the section profiles are created for your design.More information about slicing further below.

前4行是纯ThreeJS代码，它基于参数值创建一个简单的BoxGeometry ，这是设计的主要部分，您将在下一步中对其进行修改以使用参数值创建设计。与sliceManager管理如何为您的设计创建截面轮廓。有关切片的更多信息，请sliceManager下文。

We will modify this method so it ends up looking like this:

我们将修改此方法，使其最终看起来像这样：

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 );}

We replace the 3 lines which created the cube with 3 lines which create a cylinder. We use the width and height from the design parameters and a fixed color.

我们用创建圆柱体的3条线替换创建立方体的3条线。 我们根据设计参数和固定颜色使用宽度和高度。

We retain the same slicing settings as before and update the last line to add the cylinder instead of the cube.

我们保留与以前相同的切片设置，并更新最后一行以添加圆柱体而不是立方体。

Hit save and try refreshing the page to see the change. You should see something like this.

点击保存并尝试刷新页面以查看更改。 您应该会看到类似这样的内容。

Trying playing with the parameters and check how the sections look for this design. You can work with any threeJS mesh to define the geometry of your design.

尝试使用参数，并检查各部分对该设计的外观。 您可以使用任何threeJS网格来定义设计的几何形状。

All geometry passed into the group is “sliced” by the slicing configuration as per the supplied settings.

根据提供的设置，通过切片配置对传递到group所有几何图形进行“切片”。

This quick walk through demonstrated how you can paarmetrically build basic geometries. You can adapt this logic to create any kind of parametric geometry which can be fabricated to furniture.

此快速演练演示了如何以参数方式构建基本几何。 您可以调整此逻辑以创建可以制造到家具的任何类型的参数几何。

Check out this article to understand the use of computational techniques for furniture design.

查看这篇文章，以了解计算技术在家具设计中的使用。

提交设计 (Submit Your Design)

Once you have a design you are happy with, you can progress to submitting your design if you wish.

设计完成后，如果您愿意，可以继续提交设计。

For this quick start, we will submit our design to a test gallery we maintain. All designs registered in the test gallery is periodically cleared.

为了快速入门，我们会将设计提交给我们维护的测试库。 在测试图库中注册的所有设计都将定期清除。

Designs will be accepted into the main/test repo via pull requests. This will allow for a meaningful discussion in the add/publish process.

通过拉取请求，设计将被接受到主/测试仓库中。 这将允许在添加/发布过程中进行有意义的讨论。

Go to:

去：

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

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

If it is your first time adding a design, you will be requested to fork the repo. Do it.

如果这是您第一次添加设计，将要求您分叉存储库。 做吧

Add the link to your repository (eg https://github.com/amitlzkpa/o-lap_plato) to the list inside TEST_DesignCollection . Make sure to check that you have the commas at the right place.

将指向您存储库的链接(例如https://github.com/amitlzkpa/o-lap_plato )添加到TEST_DesignCollection内的列表中。 确保检查逗号在正确的位置。

Make only one change at a time. Any proposals with more than one change will be rejected, even if everything else is in place. Click to propose the change. It will be moderated by one of the maintainers, and if any further discussion is required, it will happen on this page.

一次只能进行一次更改。 即使有其他所有更改，任何具有多个更改的提议都将被拒绝。 单击以提出更改。 维护者之一将主持此会议，如果需要任何进一步讨论，它将在此页上进行。

If your design is accepted…hooray! We have a Michelangelo in the making! You can check your design by going to the link: http://o-lap.org/test.html?a=<github-user-name>&r=<olap-repo-name>

如果您的设计被接受…万岁！ 我们正在制作米开朗基罗！ 您可以通过以下链接检查设计： http://o-lap.org/test.html?a=<github-user-name>&r=<olap-r ://o-lap.org/test.html?a=<github-user-name>&r=<olap-r epo-name>

Most submittals to the test repo will be accepted.As a community we hope the same process will be used to moderate designs which fail the requirements.

大部分提交给测试仓库的文件都会被接受。 作为一个社区，我们希望采用相同的过程来审核不符合要求的设计。

Submission Link (Main): https://github.com/O-LAP/home/edit/master/data/OLAP_DesignCollection.js Submission Link (Test): https://github.com/O-LAP/home/edit/master/data/TEST_DesignCollection.js Design Gallery (Main): https://O-LAP.github.io/home/designs.html Design Gallery (Test): https://O-LAP.github.io/home/test.html App: http://o-lap.org/app.html?a=<github-user-name>&r=<olap-repo-name>&m=test

提交链接(主要)： https://github.com/O-LAP/home/edit/master/data/OLAP_DesignCollection.js : 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://github.com/O-LAP/home/edit/master/data/TEST_DesignCollection.js设计库(主要)： https://O-LAP.github.io/home/designs.html : https://github.com/O-LAP/home/edit/master/data/TEST_DesignCollection.js设计库(测试)： https://O-LAP.github.io/home/test.html : https://github.com/O-LAP/home/edit/master/data/TEST_DesignCollection.js https://O-LAP.github.io/home/test.html应用： http://o-lap.org/app.html?a=<github-user-name>&r=<olap-repo-nam ： https://O-LAP.github.io/home/test.html a = < https://O-LAP.github.io/home/test.html >＆ https://O-LAP.github.io/home/test.html = < https://O-LAP.github.io/home/test.html e>＆m = test

如何发布设计更新 (How to Publish An Update For Your Design)

To make updates to the design file, you don’t have to update your file at the same time. In fact, it’s better to make your changes in small steps as separate commits. With each commit, include a meaningful description of what changes you made, as well as how and why you made the changes.

要更新设计文件，您不必同时更新文件。 实际上，最好以小的步骤作为单独的提交来进行更改。 每次提交时，都要对所做的更改以及更改的方式和原因进行有意义的描述。

Update the Design.js file to make only the version update change.

更新Design.js文件以仅更改版本更新。

Modify the version number in at "version": "x.y.z",(line 11) inside Design.js x.y.z (x: major changes; y: minor changes; z: tweaks) (more details)[https://semver.org/]

在Design.js内部的"version": "xyz", (第11行)处修改版本号 xyz(x：重大更改； y：较小更改； z：调整)(更多详细信息)[ https://semver.org / ]

如何分叉另一个设计 (How to Fork Another Design)

Open up bash/terminal/command prompt to a folder. Run git clone <repo you want to fork>. Open Design.js and make your changes.

打开bash / terminal / command提示符到一个文件夹。 运行git clone <repo you want to fo仓库>。 Open Des ign.js并进行更改。

You might want to rename the folder to whatever you would like to name your design.

您可能希望将文件夹重命名为您想要命名设计的名称 。

After you are done making changes, reset the design version to 1.0.0 by modifying "version": "x.y.z", (line 11) inside Design.js . Update other information like name, short_desc, long_desc, message etc.

完成更改后，通过修改Design.js "version": "xyz" (第11行)将设计版本重置为1.0.0 。 更新其他信息，例如name, short_desc, long_desc, message等。

Start thinking of this design as a new design from now on.

从现在开始，将此设计视为新设计。

If you want to continue pulling changes from the parent repo, follow this page. Submit your forked design as a new design by following the Submit Your Design process.

如果要继续从父存储库中提取更改，请遵循此页面 。 通过遵循“ Submit Your Design过程，将叉状设计作为新设计Submit Your Design 。

You are set!

你定了！

深度多一点 (A Little More in Depth)

Up to this point, we’ve quickly glanced over a few things. Now that you have a better understanding, we will look a bit more in depth.

到目前为止，我们已经快速浏览了几件事。 现在您有了更好的了解，我们将更深入地了解。

设计资料 (Design Info)

At the top, you will see the design meta information which looks like this:

在顶部，您将看到如下所示的设计元信息：

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

This is used to show information about the design in the gallery.

这用于在图库中显示有关设计的信息。

输入类型 (Input Types)

To give you control over your input parameters, you can specify different types of input.

为了控制输入参数，可以指定不同类型的输入。

Design.inputs = { ... };

There are 4 types of paramaters you can provide — slider, bool, select and text. slider is used to allow the user to pick a numercial value from a continuous range. The values are in integers. bool allows the user to pick from a yes/no value. select allows the user to select one from a list of values. text takes input for text values.To add a parameters to your design you need to register it by adding a key-value pair to Design.input.

您可以提供4种类型的参数- slider ， bool ， select和text 。 slider用于允许用户从连续范围中选择数值。 该值是整数。 bool允许用户从是/否值中进行选择。 select允许用户从值列表中选择一个。 text需要输入文本值。要向设计中添加参数，您需要通过在Design.input添加键值对来注册它。

切片 (Slicing)

Slicing is the process of extracting straight sections from your design which we can use to fabricate the design.

切片是从您的设计中提取直线部分的过程，我们可以用它来制作设计。

Read the FAQ to understand the process.

阅读常见问题解答以了解该过程。

Use the sliceManager to communicate to the framework how you want the design to be sliced.

使用sliceManager与框架通信，以如何分割设计。

We do this by passing a config object to the SliceManager. If we want to create slices along the X-axis at -80 and go up +80 with 3 slices equally distributed in that range (all distances are in millimeters), we pass in an object that looks like this:

为此，我们将一个config对象传递给SliceManager。 如果要沿X轴在-80处创建切片，然后向上+80并在该范围内均匀分布3个切片(所有距离以毫米为单位)，则传入一个如下所示的对象：

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

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

To create another set of slices along the Y-axis which start at -90 and go up to +90 with 4 cuts, we pass in an object like this:

要沿Y轴创建另一组切片，其起始于-90，并经过4个切割达到+90，我们传入一个这样的对象：

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

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

Make sure to specify the slicing configuration right before adding the geometry. Generally, with two sets of slices in the opposite directions, you should have designs which can be fabricated. But you need to be careful about how you think of this in your design.

确保在添加几何图形之前立即指定切片配置。 通常，使用两组方向相反的切片，您应该具有可以制造的设计。 但是您需要谨慎对待自己在设计中的想法。

Read the design guidelines to get a better understanding of this.

阅读设计指南 ，以更好地理解这一点。

下一步 (Next Steps)

This guide walked you through the steps involved in getting the right files, making a design from scratch, and submitting it.

本指南将引导您逐步完成获取正确文件，从头开始设计并提交设计所涉及的步骤。

To understand more about parametric furniture design, check out the design article. Experiment with the concept and its creative potential (constrained to the physical production limitations).

要了解有关参数化家具设计的更多信息，请查看设计文章 。 尝试该概念及其创造潜力(受实际生产限制)。

To submit designs to the main gallery make sure to read the design guidelines.

要将设计提交给主画廊，请务必阅读设计指南 。

Article by Amit Nambiar for O-lap

Amit Nambiar的O-lap文章

翻译自: https://www.freecodecamp.org/news/make-parametric-furniture-with-javascript-50c835402e93/

javascript的参数