@archvisioninc/canvas 2.6.0 → 2.6.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/dist/helpers/canvasUpdateHelpers.js +24 -13
  2. package/package.json +1 -1
  3. package/src/package/helpers/canvasUpdateHelpers.js +23 -12
  4. package/src/scenes/App/App.js +34 -0
package/dist/helpers/canvasUpdateHelpers.js CHANGED
@@ -150,7 +150,8 @@ export const updateMaterial = inboundData => {
150
150
  transparencyEnabled,
151
151
  opacityTexture,
152
152
  newSelectedMaterial,
153
- albedoHasAlpha
153
+ albedoHasAlpha,
154
+ clearTextureChannels
154
155
  } = payload;
155
156
  const material = scene.getMaterialByName(id, true);
156
157
  if (material) {
@@ -179,6 +180,16 @@ export const updateMaterial = inboundData => {
179
180
  return;
180
181
  }
181
182
 
183
+ // Reset supported texture channels, useful when manually importing a new material.
184
+ if (clearTextureChannels) {
185
+ material.albedoTexture = null;
186
+ material.metallicTexture = null;
187
+ material.microSurfaceTexture = null;
188
+ material.emissiveTexture = null;
189
+ material.bumpTexture = null;
190
+ material.opacityTexture = null;
191
+ }
192
+
182
193
  // Back-face culling
183
194
  if (backfaceCullingEnabled !== undefined) material.backFaceCulling = backfaceCullingEnabled;
184
195
 
@@ -205,30 +216,30 @@ export const updateMaterial = inboundData => {
205
216
  // Diffuse
206
217
  if (albedoColor) material.albedoColor = newColor(albedoColor);
207
218
  if (environmentIntensity !== undefined) material.environmentIntensity = environmentIntensity;
208
- if (!_.isEmpty(albedoTexture.src || albedoTexture.url)) {
209
- material.albedoTexture = newTexture(albedoTexture.src || albedoTexture.url);
219
+ if (!_.isEmpty(albedoTexture?.src || albedoTexture?.url)) {
220
+ material.albedoTexture = newTexture(albedoTexture?.src || albedoTexture?.url);
210
221
  material.albedoTexture.name = albedoTexture.name;
211
222
  }
212
223
 
213
224
  // Metallic
214
225
  if (metallic !== undefined) material.metallic = metallic;
215
- if (!_.isEmpty(metallicTexture.src || metallicTexture.url)) {
216
- material.metallicTexture = newTexture(metallicTexture.src || metallicTexture.url);
226
+ if (!_.isEmpty(metallicTexture?.src || metallicTexture?.url)) {
227
+ material.metallicTexture = newTexture(metallicTexture?.src || metallicTexture?.url);
217
228
  material.metallicTexture.name = metallicTexture.name;
218
229
  }
219
230
 
220
231
  // Roughness
221
232
  if (roughness !== undefined) material.roughness = roughness;
222
- if (!_.isEmpty(microSurfaceTexture.src || microSurfaceTexture.url)) {
223
- material.microSurfaceTexture = newTexture(microSurfaceTexture.src || microSurfaceTexture.url);
233
+ if (!_.isEmpty(microSurfaceTexture?.src || microSurfaceTexture?.url)) {
234
+ material.microSurfaceTexture = newTexture(microSurfaceTexture?.src || microSurfaceTexture?.url);
224
235
  material.microSurfaceTexture.name = microSurfaceTexture.name;
225
236
  }
226
237
 
227
238
  // Emissive
228
239
  if (emissiveColor) material.emissiveColor = newColor(emissiveColor);
229
240
  if (emissiveIntensity !== undefined) material.emissiveIntensity = emissiveIntensity;
230
- if (!_.isEmpty(emissiveTexture.src || emissiveTexture.url)) {
231
- material.emissiveTexture = newTexture(emissiveTexture.src || emissiveTexture.url);
241
+ if (!_.isEmpty(emissiveTexture?.src || emissiveTexture?.url)) {
242
+ material.emissiveTexture = newTexture(emissiveTexture?.src || emissiveTexture?.url);
232
243
  material.emissiveTexture.name = emissiveTexture.name;
233
244
  }
234
245
 
@@ -236,8 +247,8 @@ export const updateMaterial = inboundData => {
236
247
  if (bumpIntensity !== undefined && !_.isEmpty(material.bumpTexture?.url)) {
237
248
  material.bumpTexture.level = bumpIntensity;
238
249
  }
239
- if (!_.isEmpty(bumpTexture.src || bumpTexture.url)) {
240
- material.bumpTexture = newTexture(bumpTexture.src || bumpTexture.url);
250
+ if (!_.isEmpty(bumpTexture?.src || bumpTexture?.url)) {
251
+ material.bumpTexture = newTexture(bumpTexture?.src || bumpTexture?.url);
241
252
  material.bumpTexture.name = bumpTexture.name;
242
253
  }
243
254
 
@@ -268,8 +279,8 @@ export const updateMaterial = inboundData => {
268
279
  }
269
280
  }
270
281
  if (alpha !== undefined) material.alpha = alpha ?? 1;
271
- if (!_.isEmpty(opacityTexture.src || opacityTexture.url)) {
272
- material.opacityTexture = newTexture(opacityTexture.src || opacityTexture.url);
282
+ if (!_.isEmpty(opacityTexture?.src || opacityTexture?.url)) {
283
+ material.opacityTexture = newTexture(opacityTexture?.src || opacityTexture?.url);
273
284
  material.opacityTexture.name = opacityTexture.name;
274
285
  }
275
286
  if (transparencyType) {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@archvisioninc/canvas",
3
- "version": "2.6.0",
3
+ "version": "2.6.2",
4
4
  "private": false,
5
5
  "main": "dist/Canvas.js",
6
6
  "module": "dist/Canvas.js",
package/src/package/helpers/canvasUpdateHelpers.js CHANGED
@@ -187,6 +187,7 @@ export const updateMaterial = inboundData => {
187
187
  opacityTexture,
188
188
  newSelectedMaterial,
189
189
  albedoHasAlpha,
190
+ clearTextureChannels,
190
191
  } = payload;
191
192
 
192
193
  const material = scene.getMaterialByName(id, true);
@@ -217,6 +218,16 @@ export const updateMaterial = inboundData => {
217
218
  return;
218
219
  }
219
220
 
221
+ // Reset supported texture channels, useful when manually importing a new material.
222
+ if (clearTextureChannels) {
223
+ material.albedoTexture = null;
224
+ material.metallicTexture = null;
225
+ material.microSurfaceTexture = null;
226
+ material.emissiveTexture = null;
227
+ material.bumpTexture = null;
228
+ material.opacityTexture = null;
229
+ }
230
+
220
231
  // Back-face culling
221
232
  if (backfaceCullingEnabled !== undefined) material.backFaceCulling = backfaceCullingEnabled;
222
233
 
@@ -238,30 +249,30 @@ export const updateMaterial = inboundData => {
238
249
  // Diffuse
239
250
  if (albedoColor) material.albedoColor = newColor(albedoColor);
240
251
  if (environmentIntensity !== undefined) material.environmentIntensity = environmentIntensity;
241
- if (!_.isEmpty(albedoTexture.src || albedoTexture.url)) {
242
- material.albedoTexture = newTexture(albedoTexture.src || albedoTexture.url);
252
+ if (!_.isEmpty(albedoTexture?.src || albedoTexture?.url)) {
253
+ material.albedoTexture = newTexture(albedoTexture?.src || albedoTexture?.url);
243
254
  material.albedoTexture.name = albedoTexture.name;
244
255
  }
245
256
 
246
257
  // Metallic
247
258
  if (metallic !== undefined) material.metallic = metallic;
248
- if (!_.isEmpty(metallicTexture.src || metallicTexture.url)) {
249
- material.metallicTexture = newTexture(metallicTexture.src || metallicTexture.url);
259
+ if (!_.isEmpty(metallicTexture?.src || metallicTexture?.url)) {
260
+ material.metallicTexture = newTexture(metallicTexture?.src || metallicTexture?.url);
250
261
  material.metallicTexture.name = metallicTexture.name;
251
262
  }
252
263
 
253
264
  // Roughness
254
265
  if (roughness !== undefined) material.roughness = roughness;
255
- if (!_.isEmpty(microSurfaceTexture.src || microSurfaceTexture.url)) {
256
- material.microSurfaceTexture = newTexture(microSurfaceTexture.src || microSurfaceTexture.url);
266
+ if (!_.isEmpty(microSurfaceTexture?.src || microSurfaceTexture?.url)) {
267
+ material.microSurfaceTexture = newTexture(microSurfaceTexture?.src || microSurfaceTexture?.url);
257
268
  material.microSurfaceTexture.name = microSurfaceTexture.name;
258
269
  }
259
270
 
260
271
  // Emissive
261
272
  if (emissiveColor) material.emissiveColor = newColor(emissiveColor);
262
273
  if (emissiveIntensity !== undefined) material.emissiveIntensity = emissiveIntensity;
263
- if (!_.isEmpty(emissiveTexture.src || emissiveTexture.url)) {
264
- material.emissiveTexture = newTexture(emissiveTexture.src || emissiveTexture.url);
274
+ if (!_.isEmpty(emissiveTexture?.src || emissiveTexture?.url)) {
275
+ material.emissiveTexture = newTexture(emissiveTexture?.src || emissiveTexture?.url);
265
276
  material.emissiveTexture.name = emissiveTexture.name;
266
277
  }
267
278
 
@@ -270,8 +281,8 @@ export const updateMaterial = inboundData => {
270
281
  material.bumpTexture.level = bumpIntensity;
271
282
  }
272
283
 
273
- if (!_.isEmpty(bumpTexture.src || bumpTexture.url)) {
274
- material.bumpTexture = newTexture(bumpTexture.src || bumpTexture.url);
284
+ if (!_.isEmpty(bumpTexture?.src || bumpTexture?.url)) {
285
+ material.bumpTexture = newTexture(bumpTexture?.src || bumpTexture?.url);
275
286
  material.bumpTexture.name = bumpTexture.name;
276
287
  }
277
288
 
@@ -307,8 +318,8 @@ export const updateMaterial = inboundData => {
307
318
 
308
319
  if (alpha !== undefined) material.alpha = alpha ?? 1;
309
320
 
310
- if (!_.isEmpty(opacityTexture.src || opacityTexture.url)) {
311
- material.opacityTexture = newTexture(opacityTexture.src || opacityTexture.url);
321
+ if (!_.isEmpty(opacityTexture?.src || opacityTexture?.url)) {
322
+ material.opacityTexture = newTexture(opacityTexture?.src || opacityTexture?.url);
312
323
  material.opacityTexture.name = opacityTexture.name;
313
324
  }
314
325
 
package/src/scenes/App/App.js CHANGED
@@ -64,6 +64,21 @@ const serializedResponseData = {
64
64
  wireFrameEnabled: false,
65
65
  };
66
66
 
67
+ const noTextureData = {
68
+ ...serializedResponseData,
69
+ albedoColor: '#0675F7',
70
+ clearCoatEnabled: true,
71
+ environmentIntensity: 0.72,
72
+ metallic: 0,
73
+ roughness: 0.1,
74
+ albedoTexture: { url: '' },
75
+ bumpTexture: { url: '' },
76
+ emissiveTexture: { url: '' },
77
+ metallicTexture: { url: '' },
78
+ microSurfaceTexture: { url: '' },
79
+ opacityTexture: { url: '' },
80
+ };
81
+
67
82
  const App = () => {
68
83
  const [ notifications, setNotifications ] = useState([]);
69
84
  const [ previewURL, setPreviewURL ] = useState(null);
@@ -165,6 +180,25 @@ const App = () => {
165
180
  Import material
166
181
  </Button>
167
182
 
183
+ <Button
184
+ theme={theme}
185
+ $selectedTheme={selectedTheme}
186
+ onClick={() => {
187
+ const inboundData = {
188
+ payload: {
189
+ id: 'material',
190
+ clearTextureChannels: true,
191
+ ...noTextureData,
192
+ },
193
+ };
194
+
195
+ updateMaterial(inboundData);
196
+ console.log({ metadata: scene.metadata });
197
+ }}
198
+ >
199
+ Change material
200
+ </Button>
201
+
168
202
  <Button
169
203
  theme={theme}
170
204
  $selectedTheme={selectedTheme}