Allow your users to upload files into the configurator, and immediately use those files in the 3D scene as the image for a material, as a background billboard, and more.
Examples for use could be to show...
- A customer’s logo sticker would appear on your product.
- A laser-etched serial number would appear on your product.
- A customer’s logo could be cast into the metal which makes up your product.
Step-by-step guide
-
In your configurator, add a field. Set the type to "Upload" and the control to "File Upload".
-
Since the techniques shown here require a bitmapped image, help your user provide the correct type of file. In the field properties,
- Limit the accepted file types to .jpg, .gif, .bmp, or .png.
-
Optionally, you can also accept the .pdf file type, but then set the "Convert PDF to Image" option to true. This will use the first page of a PDF as an image.
-
Ensure a scene is related to this configurator.
Create a new scene, and tie it to the configurator created in step one. After creating the scene, go back to the configurator, set the viewer mode of the configurator to 'scene' and select the scene you just created.
Allow your user to upload an image
To show the uploaded image as a 2D sticker or plate
-
In the scene, create a local material.
You can extend a Global or Library material to get started. In this example, we created a material called "Material-for-custom-label".
-
Select the local material, and in the properties accordion on the right, open the "Textures" expander for that material. Create a new layer. In most cases, this would be an Image Texture applied to an Albedo
Layer Channel. Optionally, you can select an image from the Media folder as a default image that would be applied if your user choses not to upload a file.
-
Find or create a mesh, and apply a material to the mesh.
(Here, we created a primitive box mesh.) -
In the scene rules, use the "File is uploaded" block and the "Set feature" block to write a rule that first checks for the presence of an uploaded file, and then applies it to the material:
-
Run the configurator, which should look something like this:
-
Click the "upload" button, select an image file, and you will see it map onto your mesh.
To show the uploaded image as a 3D emboss or extrude
Two techniques are available: One results in a flat stamp with no variation in depth across its surface, and the other technique allows for variation in the depth of the carving across the surface.
Use a sketch mesh to create a flat/punched effect, with no variation in depth.
Use this technique to emboss a logo into a brick, or punch out a custom shape from a sheet of metal. Your source image may have variations in colors or shading, but this will be ignored: the outline of the image is being traced.
Use a displacement map to create a curved/carved effect, with variation in depth.
Tips and Tricks
-
Create the first mesh, representing the object which will be carved or extruded.
For example, if you wanted to create a coin embossed with your corporate logo, create a cylinder representing the coin blank. -
Create a second mesh, representing the shape to be embossed/extruded.
This will be a new sketch mesh. When you create a new sketch mesh, it has no paths defining it, so it exists but does not appear in the 3D scene. - Open the “sketch paths” expander in the properties on the right. You’ll see there are no paths in this new sketch mesh.
- Click “replace existing path with image” to upload an image representing the cross-section. Wait until the image is converted into paths. The sketch mesh will then appear in the 3D scene.
- To carve this path into the first mesh, use the geometry join feature. Or, to extrude it from the first mesh, simply position it adjacent to the first mesh.
-
In the scene rules, write a rule that applies an uploaded file to the sketch mesh’s path.
Use this technique to etch various depths into a surface. Your source image should have variations in colors or shading: lighter or darker colors will be converted into deeper or shallower carving of the 3D mesh.
Create the mesh surface which will be carved or extruded by the image. This target mesh should have enough vertices to accurately show the displacement map. For example, you can create a primitive plane and increase the segmentation of the plane until enough vertices appear. Or you can upload a Voroni mesh. Remember, you can change your render mode to wireframe to see these vertex details in the mesh.
Add a new displacement map feature to that mesh. In the feature properties, describe how high, and how low, the mesh should be displaced by setting the minimum and maximum displacement.
In the feature, click the “New Layer” button to add a new image texture to the albedo channel of this feature.
In the scene rules, write a rule that first checks for the presence of an uploaded file, and then applies it to the material. In the example code below, we use the getFeature block to get a handle to the array of textures in our displacement map feature. Since we added only one texture, get a handle to that first texture in the array. Then set the imagepath of the texture to the path of the user-uploaded file.
- Your user can replace the file they uploaded by just clicking the "upload" button again. To clear it, they can click the "clear" trashcan icon which appears next to the field when it is populated.
-
You can also apply an image to a specific area of the mesh, rather than the entire mesh. Two techniques:
- Create a new submesh feature in the mesh, defining an area where the image should appear.
- Create a separate polygon for that area, and move the polygon so it is aligned with and just above the surface of the mesh. (Think of the polygon like a sticker, stuck onto the side of your mesh). Then use Snap code to modify the material applied to that polygon, instead of to the original material applied to the object. To prevent z-fighting, set the Z order of your image material to a higher number than surrounding materials.