Lesson 3 - Load Model
In the previous section, we created a nice UI and connected some buttons to JavaScript functions. Let's add some proper functionality to the buttons now.
Load Sample Model#
The first function to tackle is loading a sample model. This is quite a straight forward task. First we'll open a model in S3D, the export it as JSON, then we can place that model in our code and set the model to be equal to it when the button is clicked.
Open a model in Structural 3D that you'd like to use as the template.
First, open a model to use as a template. Then export it: File > Export > SkyCiv File (JSON for API) > v3. If you'd like to use the model from this tutorial, you can copy the copy below under the Sample Model heading.
This will be quite a lot of data. You might like to create a tool like our generate.js script to insert the model from another file to keep your development environment clean.
Just below app.init(), create a variable and equal it to the model object.
const sample_model = {
// Lots of data here!
};
You can collapse this definition by clicking the arrow on the side of the window, just to the left of your variable name.
Now all we need to do, is call the S3D.structure.set function and pass in our variable.
Inside the custom loadModel function, set the model.
S3D.structure.set(sample_model);
Your index.js file will look something like this now. Go ahead and create the build and try it out.
Sample Model#
// Sample model
const sample_model = {
settings: {
units: 'metric',
vertical_axis: 'Y',
},
nodes: {
1: { x: 0, y: 0, z: 1 },
2: { x: 0.34328, y: 0, z: 0.93923 },
3: { x: -0.60706, y: 0, z: 0.79465 },
4: { x: 0.68656, y: 0, z: 0.72708 },
5: { x: 0.89443, y: 0, z: 0.44721 },
6: { x: -0.98225, y: 0, z: 0.18759 },
7: { x: 0.98225, y: 0, z: -0.18759 },
8: { x: -0.89443, y: 0, z: -0.44721 },
9: { x: -0.68656, y: 0, z: -0.72708 },
10: { x: 0.60706, y: 0, z: -0.79465 },
11: { x: -0.34328, y: 0, z: -0.93923 },
12: { x: 0, y: 0, z: -1 },
13: { x: -0.27772, y: 0.20177, z: 0.93923 },
14: { x: -0.83315, y: 0.20177, z: 0.51492 },
15: { x: 0.96428, y: 0.20177, z: 0.17164 },
16: { x: -0.96428, y: 0.20177, z: -0.17164 },
17: { x: 0.83315, y: 0.20177, z: -0.51492 },
18: { x: 0.27772, y: 0.20177, z: -0.93923 },
19: { x: 0.10608, y: 0.32648, z: 0.93923 },
20: { x: 0.79264, y: 0.32648, z: 0.51492 },
21: { x: -0.79264, y: 0.32648, z: -0.51492 },
22: { x: -0.10608, y: 0.32648, z: -0.93923 },
23: { x: 0.49112, y: 0.35682, z: 0.79465 },
24: { x: -0.49112, y: 0.35682, z: -0.79465 },
25: { x: -0.55544, y: 0.40355, z: 0.72708 },
26: { x: -0.89872, y: 0.40355, z: 0.17164 },
27: { x: 0.89872, y: 0.40355, z: -0.17164 },
28: { x: 0.55544, y: 0.40355, z: -0.72708 },
29: { x: -0.72361, y: 0.52573, z: 0.44721 },
30: { x: 0.72361, y: 0.52573, z: -0.44721 },
31: { x: -0.18759, y: 0.57735, z: 0.79465 },
32: { x: 0.79465, y: 0.57735, z: 0.18759 },
33: { x: -0.79465, y: 0.57735, z: -0.18759 },
34: { x: 0.18759, y: 0.57735, z: -0.79465 },
35: { x: 0.21216, y: 0.65295, z: 0.72708 },
36: { x: 0.55544, y: 0.65295, z: 0.51492 },
37: { x: -0.55544, y: 0.65295, z: -0.51492 },
38: { x: -0.21216, y: 0.65295, z: -0.72708 },
39: { x: -0.44936, y: 0.73003, z: 0.51492 },
40: { x: -0.66152, y: 0.73003, z: 0.17164 },
41: { x: 0.66152, y: 0.73003, z: -0.17164 },
42: { x: 0.44936, y: 0.73003, z: -0.51492 },
43: { x: 0.27639, y: 0.85065, z: 0.44721 },
44: { x: -0.27639, y: 0.85065, z: -0.44721 },
45: { x: -0.06556, y: 0.85473, z: 0.51492 },
46: { x: 0.48988, y: 0.85473, z: 0.17164 },
47: { x: -0.48988, y: 0.85473, z: -0.17164 },
48: { x: 0.06556, y: 0.85473, z: -0.51492 },
49: { x: -0.30353, y: 0.93417, z: 0.18759 },
50: { x: 0.30353, y: 0.93417, z: -0.18759 },
51: { x: 0.10608, y: 0.97943, z: 0.17164 },
52: { x: -0.10608, y: 0.97943, z: -0.17164 },
},
members: {
1: { type: 'normal', node_A: 48, node_B: 44, section_id: 1 },
2: { type: 'normal', node_A: 19, node_B: 23, section_id: 1 },
3: { type: 'normal', node_A: 21, node_B: 24, section_id: 1 },
4: { type: 'normal', node_A: 51, node_B: 49, section_id: 1 },
5: { type: 'normal', node_A: 35, node_B: 31, section_id: 1 },
6: { type: 'normal', node_A: 13, node_B: 19, section_id: 1 },
7: { type: 'normal', node_A: 39, node_B: 45, section_id: 1 },
8: { type: 'normal', node_A: 52, node_B: 47, section_id: 1 },
9: { type: 'normal', node_A: 22, node_B: 18, section_id: 1 },
10: { type: 'normal', node_A: 42, node_B: 48, section_id: 1 },
11: { type: 'normal', node_A: 46, node_B: 51, section_id: 1 },
12: { type: 'normal', node_A: 25, node_B: 31, section_id: 1 },
13: { type: 'normal', node_A: 28, node_B: 34, section_id: 1 },
14: { type: 'normal', node_A: 40, node_B: 49, section_id: 1 },
15: { type: 'normal', node_A: 41, node_B: 50, section_id: 1 },
16: { type: 'normal', node_A: 3, node_B: 13, section_id: 1 },
17: { type: 'normal', node_A: 10, node_B: 18, section_id: 1 },
18: { type: 'normal', node_A: 36, node_B: 43, section_id: 1 },
19: { type: 'normal', node_A: 37, node_B: 44, section_id: 1 },
20: { type: 'normal', node_A: 18, node_B: 12, section_id: 1 },
21: { type: 'normal', node_A: 1, node_B: 13, section_id: 1 },
22: { type: 'normal', node_A: 25, node_B: 13, section_id: 1 },
23: { type: 'normal', node_A: 17, node_B: 28, section_id: 1 },
24: { type: 'normal', node_A: 35, node_B: 45, section_id: 1 },
25: { type: 'normal', node_A: 14, node_B: 25, section_id: 1 },
26: { type: 'normal', node_A: 18, node_B: 28, section_id: 1 },
27: { type: 'normal', node_A: 48, node_B: 38, section_id: 1 },
28: { type: 'normal', node_A: 42, node_B: 30, section_id: 1 },
29: { type: 'normal', node_A: 39, node_B: 29, section_id: 1 },
30: { type: 'normal', node_A: 19, node_B: 31, section_id: 1 },
31: { type: 'normal', node_A: 22, node_B: 34, section_id: 1 },
32: { type: 'normal', node_A: 47, node_B: 33, section_id: 1 },
33: { type: 'normal', node_A: 46, node_B: 32, section_id: 1 },
34: { type: 'normal', node_A: 38, node_B: 34, section_id: 1 },
35: { type: 'normal', node_A: 52, node_B: 50, section_id: 1 },
36: { type: 'normal', node_A: 20, node_B: 23, section_id: 1 },
37: { type: 'normal', node_A: 22, node_B: 24, section_id: 1 },
38: { type: 'normal', node_A: 45, node_B: 43, section_id: 1 },
39: { type: 'normal', node_A: 2, node_B: 1, section_id: 1 },
40: { type: 'normal', node_A: 12, node_B: 11, section_id: 1 },
41: { type: 'normal', node_A: 2, node_B: 4, section_id: 1 },
42: { type: 'normal', node_A: 9, node_B: 11, section_id: 1 },
43: { type: 'normal', node_A: 36, node_B: 35, section_id: 1 },
44: { type: 'normal', node_A: 38, node_B: 37, section_id: 1 },
45: { type: 'normal', node_A: 21, node_B: 33, section_id: 1 },
46: { type: 'normal', node_A: 15, node_B: 7, section_id: 1 },
47: { type: 'normal', node_A: 26, node_B: 14, section_id: 1 },
48: { type: 'normal', node_A: 27, node_B: 15, section_id: 1 },
49: { type: 'normal', node_A: 36, node_B: 46, section_id: 1 },
50: { type: 'normal', node_A: 16, node_B: 26, section_id: 1 },
51: { type: 'normal', node_A: 27, node_B: 17, section_id: 1 },
52: { type: 'normal', node_A: 37, node_B: 47, section_id: 1 },
53: { type: 'normal', node_A: 41, node_B: 30, section_id: 1 },
54: { type: 'normal', node_A: 38, node_B: 44, section_id: 1 },
55: { type: 'normal', node_A: 8, node_B: 16, section_id: 1 },
56: { type: 'normal', node_A: 27, node_B: 32, section_id: 1 },
57: { type: 'normal', node_A: 40, node_B: 33, section_id: 1 },
58: { type: 'normal', node_A: 41, node_B: 32, section_id: 1 },
59: { type: 'normal', node_A: 48, node_B: 34, section_id: 1 },
60: { type: 'normal', node_A: 42, node_B: 50, section_id: 1 },
61: { type: 'normal', node_A: 6, node_B: 14, section_id: 1 },
62: { type: 'normal', node_A: 7, node_B: 17, section_id: 1 },
63: { type: 'normal', node_A: 15, node_B: 20, section_id: 1 },
64: { type: 'normal', node_A: 41, node_B: 46, section_id: 1 },
65: { type: 'normal', node_A: 52, node_B: 48, section_id: 1 },
66: { type: 'normal', node_A: 47, node_B: 49, section_id: 1 },
67: { type: 'normal', node_A: 46, node_B: 50, section_id: 1 },
68: { type: 'normal', node_A: 51, node_B: 50, section_id: 1 },
69: { type: 'normal', node_A: 28, node_B: 30, section_id: 1 },
70: { type: 'normal', node_A: 25, node_B: 29, section_id: 1 },
71: { type: 'normal', node_A: 51, node_B: 43, section_id: 1 },
72: { type: 'normal', node_A: 52, node_B: 44, section_id: 1 },
73: { type: 'normal', node_A: 40, node_B: 39, section_id: 1 },
74: { type: 'normal', node_A: 42, node_B: 41, section_id: 1 },
75: { type: 'normal', node_A: 51, node_B: 52, section_id: 1 },
76: { type: 'normal', node_A: 27, node_B: 30, section_id: 1 },
77: { type: 'normal', node_A: 26, node_B: 29, section_id: 1 },
78: { type: 'normal', node_A: 45, node_B: 49, section_id: 1 },
79: { type: 'normal', node_A: 48, node_B: 50, section_id: 1 },
80: { type: 'normal', node_A: 36, node_B: 32, section_id: 1 },
81: { type: 'normal', node_A: 47, node_B: 44, section_id: 1 },
82: { type: 'normal', node_A: 14, node_B: 3, section_id: 1 },
83: { type: 'normal', node_A: 17, node_B: 10, section_id: 1 },
84: { type: 'normal', node_A: 39, node_B: 31, section_id: 1 },
85: { type: 'normal', node_A: 42, node_B: 34, section_id: 1 },
86: { type: 'normal', node_A: 46, node_B: 43, section_id: 1 },
87: { type: 'normal', node_A: 4, node_B: 5, section_id: 1 },
88: { type: 'normal', node_A: 9, node_B: 8, section_id: 1 },
89: { type: 'normal', node_A: 37, node_B: 33, section_id: 1 },
90: { type: 'normal', node_A: 52, node_B: 49, section_id: 1 },
91: { type: 'normal', node_A: 21, node_B: 16, section_id: 1 },
92: { type: 'normal', node_A: 47, node_B: 40, section_id: 1 },
93: { type: 'normal', node_A: 45, node_B: 51, section_id: 1 },
94: { type: 'normal', node_A: 39, node_B: 49, section_id: 1 },
95: { type: 'normal', node_A: 45, node_B: 31, section_id: 1 },
96: { type: 'normal', node_A: 26, node_B: 33, section_id: 1 },
97: { type: 'normal', node_A: 5, node_B: 15, section_id: 1 },
98: { type: 'normal', node_A: 35, node_B: 43, section_id: 1 },
99: { type: 'normal', node_A: 40, node_B: 29, section_id: 1 },
100: { type: 'normal', node_A: 16, node_B: 6, section_id: 1 },
101: { type: 'normal', node_A: 20, node_B: 32, section_id: 1 },
102: { type: 'normal', node_A: 11, node_B: 22, section_id: 1 },
103: { type: 'normal', node_A: 37, node_B: 21, section_id: 1 },
104: { type: 'normal', node_A: 40, node_B: 26, section_id: 1 },
105: { type: 'normal', node_A: 6, node_B: 26, section_id: 1 },
106: { type: 'normal', node_A: 27, node_B: 7, section_id: 1 },
107: { type: 'normal', node_A: 16, node_B: 33, section_id: 1 },
108: { type: 'normal', node_A: 15, node_B: 32, section_id: 1 },
109: { type: 'normal', node_A: 25, node_B: 3, section_id: 1 },
110: { type: 'normal', node_A: 28, node_B: 10, section_id: 1 },
111: { type: 'normal', node_A: 12, node_B: 22, section_id: 1 },
112: { type: 'normal', node_A: 1, node_B: 19, section_id: 1 },
113: { type: 'normal', node_A: 4, node_B: 23, section_id: 1 },
114: { type: 'normal', node_A: 9, node_B: 24, section_id: 1 },
115: { type: 'normal', node_A: 21, node_B: 8, section_id: 1 },
116: { type: 'normal', node_A: 20, node_B: 5, section_id: 1 },
117: { type: 'normal', node_A: 17, node_B: 30, section_id: 1 },
118: { type: 'normal', node_A: 14, node_B: 29, section_id: 1 },
119: { type: 'normal', node_A: 38, node_B: 24, section_id: 1 },
120: { type: 'normal', node_A: 13, node_B: 31, section_id: 1 },
121: { type: 'normal', node_A: 18, node_B: 34, section_id: 1 },
122: { type: 'normal', node_A: 2, node_B: 23, section_id: 1 },
123: { type: 'normal', node_A: 11, node_B: 24, section_id: 1 },
124: { type: 'normal', node_A: 21, node_B: 9, section_id: 1 },
125: { type: 'normal', node_A: 28, node_B: 42, section_id: 1 },
126: { type: 'normal', node_A: 4, node_B: 20, section_id: 1 },
127: { type: 'normal', node_A: 19, node_B: 35, section_id: 1 },
128: { type: 'normal', node_A: 39, node_B: 25, section_id: 1 },
129: { type: 'normal', node_A: 36, node_B: 23, section_id: 1 },
130: { type: 'normal', node_A: 37, node_B: 24, section_id: 1 },
131: { type: 'normal', node_A: 35, node_B: 23, section_id: 1 },
132: { type: 'normal', node_A: 19, node_B: 2, section_id: 1 },
133: { type: 'normal', node_A: 20, node_B: 36, section_id: 1 },
134: { type: 'normal', node_A: 41, node_B: 27, section_id: 1 },
},
sections: {
1: {
load_section: [
'Australian',
'Steel (250 Grade)',
'Circular hollow sections (250)',
'60x5.4 CHS',
],
material_id: 1,
},
},
materials: {
1: {
id: 1,
name: 'Structural Steel',
density: 7850,
elasticity_modulus: 200000,
poissons_ratio: 0.27,
yield_strength: 260,
ultimate_strength: 410,
class: 'steel',
},
},
supports: {
1: { node: 1, restraint_code: 'FFFRRR' },
2: { node: 2, restraint_code: 'FFFRRR' },
3: { node: 3, restraint_code: 'FFFRRR' },
4: { node: 4, restraint_code: 'FFFRRR' },
5: { node: 5, restraint_code: 'FFFRRR' },
6: { node: 6, restraint_code: 'FFFRRR' },
7: { node: 7, restraint_code: 'FFFRRR' },
8: { node: 8, restraint_code: 'FFFRRR' },
9: { node: 9, restraint_code: 'FFFRRR' },
10: { node: 10, restraint_code: 'FFFRRR' },
11: { node: 11, restraint_code: 'FFFRRR' },
12: { node: 12, restraint_code: 'FFFRRR' },
},
self_weight: {
1: { x: 0, y: -1, z: 0, LG: 'SW1' },
},
};
Next Section#
Perfect! In the next section, let's add the function to delete a random member.