Microsoft 3d Viewer

admin

To get started, head to the Mixed Reality Viewer app, free with the Windows 10 Fall Creators Update. You’ll find a 3D character already created for you, or click the Remix 3D button to search the extensive 3D catalogue to browse for inspiration. Next, Select the Mixed reality button and your computer’s camera will turn on. The 3D Model Views gallery gives you a collection of preset views that you can use on your image. For example you can quickly select the head-on view or the top-down view. If you've got multiple 3D models and you're having trouble selecting the one you want to work with, click the Selection Pane to turn on the list of objects.

-->

Use the 3D View to debug your web app by navigating through the Document Object Model (DOM) or the z-index stacking context. With it, you may complete the following tasks.

  • Clear some of the clutter on the DOM pane or the z-index pane
  • Pick the color scheme to best debug your DOM problems or z-index problems

If you want to explore an early prototype of 3D View project and run the code yourself, navigate to 3D View Sample.

On the left side, there are three panes that you may use for your debugging experience.

  • The Z-index pane. Navigate through the different elements in the web app with the z-index context in mind. The Z-index pane is the default pane.
  • The 3D DOM pane. Explore the DOM as a whole with all the elements easily accessible. To access the pane, choose the DOM pane next to the Z-index pane.
  • The Composited Layers pane. Add another 3D element to create a more comprehensive experience from a layers perspective. To access the pane, choose the Composited Layers pane next to the DOM pane.

On the right side, the canvas displays your selections from the Z-index, 3D DOM, or Composited Layers.

Navigating the canvas

Keyboard shortcuts

  • Rotate the DOM: To rotate horizontally, select the left-arrow and right-arrow keys. To rotate vertically, select the up-arrow and down-arrow keys.
  • Navigate the DOM: To move through the adjacent elements, choose an element and select the up-arrow and down-arrow keys.

Mouse controls

  • Rotate the DOM: Choose and drag around the canvas space.
  • Pan around the DOM: Open the contextual menu (right-click) and drag in the direction you want the DOM to move.
  • Zoom: Drag two fingers across the touchpad or use the scroll wheel on your mouse.

On-screen controls

  • Reset the canvas view to the original view: Choose the Reset camera button, or choose the Reset elements in view and re-center camera (sideways refresh icon) button.
  • Refresh the canvas (for example, if the browser changed or you switched to a device emulator view): Choose the Retake snapshot button or choose the Take new snapshot button (refresh icon).

Z-index

While the Z-index pane has shared features with the 3D DOM pane, the panes still have elements that are unique to the pane.

Highlight elements with stacking context

The Highlight elements with stacking context setting allows you to turn on (and off) the z-index tags for the elements on the canvas. The checkbox is chosen by default.

Change the scope of your exploration

The Show all elements button is the quickest way to display all the elements of the DOM after changing the settings below it.

The Show only elements with stacking context button removes elements without stacking context and flattens the DOM for easier navigation.

The Isolate selected element button is essentially three buttons in one. There are two checkboxes below the Isolate selected element button: The Show all parents checkbox and Keep only parents with new stacking context checkbox.

The Show all parents checkbox is turned on by default. To display the element and any parents on the canvas, choose an element and choose the Isolate selected element button.

To display the element and the parents that have a new stacking context on the canvas, turn on the Keep only parents with new stacking context setting and choose the Isolate selected element button.

To display the element you chose on the canvas, turn off both the settings and choose Isolate selected element button.

At the bottom of the 3D DOM pane, locate the Hide elements with the same paint order as their parent checkbox. Choosing and deselecting the checkbox refreshes the elements based on your choice. If chosen, elements that share paint order are flattened to the parent.

The options are meant to clear up some of the clutter that more complex web pages create in your canvas.

Z-index color type

The are the different visualizations you may use for the DOM in your canvas. Whether you use it for fun or because the visualizations help you visualize the DOM better, the DevTools have different colorways and a Use background color option. The Z-index pane shares the Purple to White and Background Color with the 3D DOM pane. Given the added visual element of the z-index labels, your feedback that led to a reduction in the number of color options. The new simplicity improves the z-index debugging experience. The radio buttons allow you to toggle through the options and pick the color type. The color type is either most appropriate for your project or one that you like the most.

3D DOM

If you want to take more of a general debugging view, rather than the z-index experience, the 3D DOM gives an overall look of the DOM. Since the z-index context is removed, the DOM is stacked more closely and cleanly. The 3D DOM pane has similar functionality, but there are a few nuances.

Changing your view

On the 3D DOM pane, the Isolate selected element button has Include children and Include parents checkboxes. Both checkboxes are turned on by default. That means if you choose the Isolate selected element button after you choose an element, the canvas displays the chosen element, the parents of the element, and the children of the element. Turn off the Include children setting and choose the Isolate selected element button again to display the chosen element and the parents of the element. If you turn on the Include children setting and turn off the Include parents setting and then choose the Isolate selected element button, the canvas displays the element and any children. If you turn off both settings and choose the Isolate selected element button, the canvas only displays the element you previously chose.

A slider on the control pane named Nesting level for page with a number next to it. The number indicates the number of layers for the document. Dragging the slider to the left causes the outermost layers to peel away until you are left with a nesting level set to 1, which displays only the furthest back element in the DOM. To remove some of the clutter, drag the slider. It helps you get a closer look at what is happening in the lower levels.

DOM color type

The 3D DOM pane displays the following options.

  • Three different colorways.
    • Heatmap - Purple to White
    • Heatmap - Blue to Yellow
    • Heatmap - Rainbow
  • Use background color
  • Use screen texture

The Use screen texture option adds context to your debugging experience. It directly displays the content from the webpage onto the elements.

Composited layers

The Composited Layers pane opens the elements of the Layers tool without changing contexts. You may still access the details of each of the layers and have the Slow scroll rects and Paint.

Getting in touch with the Microsoft Edge DevTools team

The Microsoft Edge Devtools team is working on the UI and adding more functionality to the 3D View based on your feedback. Send your feedback to help improve the Microsoft Edge DevTools. Choose the Send Feedback icon in the DevTools or select Alt+Shift+I on Windows/Linux or Option+Shift+I on macOS and enter any feedback or feature requests you have for the DevTools.

-->

Dynamics 365 Field Service allows organizations to upload 3D models for field technicians to reference in the field. Typically a 3d model relates to a specific product or customer asset and helps field technicians with equipment repair and other tasks. As opposed to recording videos or writing long manuals, field service organizations can leverage pre-existing 3D models to generate what are effectively 3D knowledge articles.

You can configure 3D models by using an N:N relationship between the 3D model and customer asset entities, which enables 3D models to be associated with customer assets.

In this topic, we'll walk through how to associate a 3D model record with a customer asset and then view the 3D model on Field Service Mobile.

Prerequisites

  • Dynamics 365 v9.0+
  • Field Service v8.0+
  • Ensure the 3D Viewer solution is installed in Settings > Customizations
  • Increased storage for large 3D file sizes. You can do this by increasing attachment file size limit in Dynamics 365 administration, or by using Azure Blob storage.

To increase attachment file size in D365 administration:

  1. Go to Settings > Administration > System Settings
  2. Select the Email tab
  3. In the Set file size limit for attachments section, set the Maximum file size (in Kilobytes) to 131,072 KB. Then select Ok.

To configure Azure Blob storage, use the Microsoft Labs Attachment Management solution.

Finally, make sure that 3D file types are not blocked for attachments in the Dynamics 365 settings:

  1. Go to the General tab
  2. Scroll down to the Set blocked file extensions for attachments section
  3. Make sure GLB, GLTF, and OBJ are not listed

Note

The supported file 3D viewer types are GLB, GLTF, and OBJ.

Open a 3D file

If you already have a 3D file, you can use Paint 3D to open it and save it as a GLB file.

Microsoft

Microsoft 3d Viewer Uninstall

  1. Open Paint 3D on your Windows 10 device.
  2. Select the 3D Library tab at the top.
  3. Select a model from the library and open it on the canvas. Edit or make changes if necessary.
  1. When done, select the Menu tab, go to the Save as copy section, and select 3D Model.
  1. Enter a File Name. For Save as type, select 3D-GLB(.glb). Then Save.

Associate customer assets with 3D models

Once you have your GLB, GLTF, or OBJ file, and you have configured your organization per the steps in this topic, you are ready to associate your 3D model with a customer asset.

  1. Open up the desired customer asset record and select the Related tab.
  2. Select 3D Models from the drop down.
  3. Select Add Existing 3D Model.
  1. A quick create form for 3D model will open. Select +New.
  2. Enter a Name for the 3D model.
  3. Select the Storage Type drop-down, and choose Note Attachment. Then Save the form.
  1. After saving the record, the Timeline section will appear. Select the paperclip icon to add a note with an attachment.
  2. When the file prompt appears, select your 3D file and then Open.
  3. After selecting a file, you should see the file attached with a paperclip icon next to it. Give the note a Title and then select Add note.
  1. After saving the note, it will appear on the timeline with the attached 3D file.
  2. To view the 3D file, scroll past the timeline section on the form. You can interact with the 3D viewer by scrolling, left-clicking, right-clicking and dragging.
  1. After saving and closing the form for the 3D model, you can then select it from the lookup on the 3D model quick create form.
  2. After selecting the 3D model record, select Add to associate that 3D model with the customer asset.
  3. The 3D model can then be accessed through the 3D model associated view on the customer asset record.

View 3D model on Field Service Mobile

Microsoft

Now that the 3D model is associated to a customer asset and viewable from the web, let's enable it to be viewable on the Field Service Mobile app for field technicians to reference during onsite work orders.

  1. Go to the Field Service Mobile configuration tool (Woodford).
  2. Open the mobile project that holds your customizations.
  3. Select the entity Three-Dimensional Model (do not select the paint brush icon).
  4. Select Enable - see the following screenshot for reference.
  1. Check the File Type, File URL, and Storage Type boxes to enable those fields for mobile.
  2. Select Save.
  1. Select the paint brush icon next to Three-Dimensional Model.
  2. Select New Form.
  1. Give the form a name and select Ok.
  2. Select the blank, white part of the form and the available fields should show on the right panel.
  3. Drag and drop the Storage Type, File URL, and File Type fields to the form.
  4. Add a notes list to the form by going to Add List > Notes List.
  1. Select Add Iframe in the top menu.
  1. Name the Iframe. The name will appear at the top of the 3D Model. Then select Browse.
  2. Select viewer.html and then Ok.
  1. Leave the defaults as shown in the following screenshot and select Ok.
  1. Save and Close the form

At this point the three-dimensional model is set up for mobile. Next, we'll need to make it viewable from the mobile customer asset form.

Microsoft 3d Viewer

  1. Go to the customer asset entity and then the related form.
  1. Select Add List at the top, then choose Unrelated Entity List.

Microsoft 3d Viewer Base3d Code Execution

  1. Find the Three-Dimensional Model entity and select OK. This will ensure three-dimensional model records are accessible from the customer asset mobile form.

Microsoft 3d Viewer Update

  1. Save & Close the from, then Publish the mobile project.

The 3D model will now be viewable on the Field Service Mobile App by going to Customer Assets > Three Dimensional Models.

Additional notes

Microsoft 3d Viewer Registry

  • You can view 3D files on Field Service Mobile for Windows, iOS, and Android devices.
  • 3D models are viewable on Field Service Mobile in online and offline modes.