Creating a 3D Inspection Panel for Game Objects
Last updated
Last updated
The UI Components pack allows you display 3D Models on a UI Canvas. The included Actions will automatcially Clone your Model, create a Rendertexture and add it to a RawImage, and create the Camera with Lights to view your Model. You can automatcially rotate it, or use the mouse to drag the x and/or y axis.
This feature is ideal for your player to view and inspect object for collection or adding the the inventory. The following tutorial will show you step by step how to do this.
Create a Trigger around or close to the Object that you wish to display. Set the Trigger to "On Player Enter" or to a Key Down of your choice.
Add an Action stream to this Trigger by clicking the Action Icon - we will come back to the Actions shortly, but next we will create a layer and the canvas.
Select the 3D Object that you wish to display, and click the Layer Tab in the Inspector window and Add Layer.
4. Create a new Layer that you can use for all Canvas displayed 3D Objects. For this example, we have created a layer called Object. However, you can call it anything of your choice and use any User Layer Slot.
5. Select the Layer in your 3D Objects so it looks like this..
6. Now we need a Canvas to display the Object. In your scene Hierarchy, create a Canvas, and add a Canvas Group so you can fade it in and out. Set the Alpha in the Canvas Group to 0, so it is not initially visible.
7. To our Canvas we have added a Panel, and to that Panel a RawImage. These are all from the Unity UI menu.
8. On the Panel, we have added a source Image that will frame our 3D object. This can be anything of your choice.
9. On the RawImage, we have added a black texture otherwise the RawImage shows up as a white square. This is not essential, however it is important to leave the Color parameter as white, otherwise you will colour the 3D Object display, or wont see it at all.
10. Another option is to add an Outline and/or Shadow component. These are not essential but may provide added effects. They are added by clicking the "Add Component" button in the Inspector window.
11. Now we are back to the Actions to make this all happen. These are the Actions we will use and we will explain the need for each and how to configure them. However, they are not all mandatory and you should experiment with them to fit the needs of your scenario.
12. We disabled the Player when the Trigger is entered. You could also add a move to Marker if you wish to reposition the player, although this is not essential.
13. Next we disabled the Orbit and Zoom of the Camera Motor by unchecking the checkbox ticks. The main issue here is the Allow Orbit Input, as if we want to rotate the 3D Object with a Drag, but we dont want the Camera to spin around the Player at the same time. If the Current Camera is the Main Camera Motor, you can also select that check box.
14. Now we can fade in the Canvas. This can be done before or after you add the 3D model, it is entirerly up to you and what effect you want to have. We fade in the Canvas by changing the Alpha to 1 with a Duration of 0.5 seconds. However, these settings are your choice.
15. Next add the Action that comes withthe UI Components Pack. It is in the Actions Dropdown under UI and is titled Display 3D Model on Canvas.
16. Add the RawImage from your Canvas to the corresponding slot. Add the 3D Model and select the Layer that you created and assigned to the Model from the Dropdown selection of Layers.
17. The size of your model (when cloned by the Action) will probably be too small and it may be dark. The scale of a UI Canvas is 3 to 4 times that of the scene. Therefore, as a rule of thumb, start with setting the Size of Model parameter to 3 and the Lighting Intensity to 3. You can change these later to your preference.
18. The Auto Rotate checkbox will rotate the model on the X Axis (this may change in the future to include both axis). The Drag to Rotate checkbox will allow you to drag the model on both x and y axis, or to restrict the drag to only one axis.
19. The Time before Destroyed settings is the time in seconds before the cloned model, the camera, and render texture are removed from the scene. We have set this to 5 seconds. It is not recommended to set this too high, as cloned obejcts, rendertextures, and Canvas Cameras can be resource intensive.
20. The next Action is the Wait from the Actions/General menu. We have also set this to 5 seconds.This will be the time thatthe Canvas is displayed and the User can interact with the Model. If you decide to set this longer, set the Time before Destroyed to the same number.
21. Finally we add the earlier Actions in reverse order and reverse settings. Set the Aplha of the Canvas to 0, change the Camera settings to allow Orbit, and make the Player controllable. And thats all there is to it.
