Watch this newly published tutorial series recorded by one of our co-founders, Jonathan:
The next tutorial shows how to upload a model to p3d.in to get started:
The next video shows how to fix a 3D model after uploading it:
This video takes you through the process of texturing a 3D model step by step:
This video goes into more detail on texturing the scene using the built-in p3d.in editor
More on texturing multiple elements within a 3D scene
This tutorial provides a walkthrough of the p3d.in animation control features:
This final tutorial describes the powerful hot-spot features of p3d.in and how to use it with animation and camera control
P3d.in is a cloud-based 3D file sharing and embedding platform that lets you work on a project with collaborators from all over the world. Your 3D models can quickly be turned into interactive 3D web embeds using our user friendly point-and-click sharing tool. Without writing a single line of code, you can generate iFrame embed code and cut and paste this into any HTML or Javascript page. We also support node.js, react.js and other web frameworks through an npm library. You can read more about this feature in our FAQ at 3D Web Embeds and 3D Javascript Embed API.
You do not need to be a graphic designer to make your 3D models look great. p3d.in's website widget is the easiest way to make your 3D models more engaging on any website. Create the perfect look in seconds, for any 3D model, with a large selection of backgrounds and vignettes or upload your own background.
Video summaries and transcripts:
Video 1:
Summary:
The video is an introduction to P3D.in and its features.
Jonathan explains that the video series will cover how to use P3D.in for commercial and educational purposes.
He mentions that signing up for the P3D.in service is the first step.
Jonathan demonstrates how he signs in with his Google account.
He showcases the sample models gallery, a universal folder for all users.
The video highlights that interactions with models in this gallery won't affect the originals.
Changes made are not saved to the database; this gallery serves a specific purpose.
The "My Gallery" section is introduced, where users will manage their own models in upcoming videos.
0:00
Hello, I'm Jonathan from P3D.in.
0:02
In this video series, we will explore all the features of P3D.in, how to use the site, and how to share your models for both commercial and educational purposes.
0:14
First, you'll need to sign up for the P3D.in service.
0:20
I've already completed that step.
0:21
When I go to the login page, I can see that I've successfully signed in using my Google account.
0:27
I'll simply click on the "Sign in with Google" button, and it will take me directly to my account.
0:35
Since this is a new account with no models, I'm directed to the sample models gallery.
0:42
This gallery is a shared folder accessible to all users on the platform.
0:47
Once a model loads, I can explore all its features and settings.
0:56
For instance, I can interact with the hotspots on this model.
0:59
You don't need to worry about making changes; you can freely interact with the models, and any edits you make won't affect the original model.
1:08
Changes are not saved to the database; this folder serves a specific purpose.
1:12
You're automatically directed here if you have no models.
1:15
In the "My Gallery" section, you'll see that there are currently no models. We'll be adding models to this space in the upcoming videos, where we'll demonstrate all of P3D.in's features.
1:35
Stay tuned for our next video, where we'll start uploading models.
Video 2:
Summary:
The video explains how to upload 3D models to the platform.
It details the supported file formats for both geometry and textures.
Users can upload files individually or as ZIP archives.
Various examples are shown, including OBJ/MTL, GLTF/GLB, and FBX files.
The video demonstrates that the platform retains textures and animations when uploading models.
After successful uploads, users can save changes and view their models in their gallery.
The tutorial concludes with the promise of more in-depth topics in future videos.
0:00
Let's begin with how to upload a model. There are several ways to do this: you can click on the "New Model" link here.
0:08
Clicking on it takes you to the upload form, or you can create a new model from the actions menu.
0:16
Either option leads to the same page.
0:19
First, let's discuss file requirements.
0:22
Supported model files are OBJ/MTL, accompanied by an MTL file.
0:31
Other formats include GLTF, GLB, STL, and FBX.
0:34
These are the formats supported by the platform for uploading geometry.
0:41
For textures, you can use JPG, PNG, GIF, and BMP.
0:47
No other file formats are supported.
0:50
Stick to these formats.
0:52
Refer to this note here.
0:54
If you're uploading OBJ files, select or drag-and-drop all OBJ/MTL and texture files at once, or you can upload a ZIP archive containing the required files.
1:13
For example, let's return to 100% zoom and go to our file explorer.
1:20
Examples in this series will use GLTF and GLB files.
1:30
To elaborate on the note, you can drag this file into the window, dropping it there.
1:41
The model, which is already configured in the 3D editing suite, will upload with its textures and animations intact.
1:49
It should look the same as when initially exported.
1:55
I'll reload the upload page and restart the process.
2:00
I have some files for a Mars Rover model.
2:05
This one includes both geometry and textures.
2:12
I also have a lighter FBX file.
2:16
It's just 20 kilobytes, and all textures are separate.
2:22
The note about OBJ files applies to GLTF as well.
2:29
Simply select them all, drag and drop into the window.
2:35
Everything works as it should, as with the all-inclusive file.
2:42
Alternatively, you can compress these files into a ZIP file.
2:52
Here's a fresh upload page.
2:55
Drag-and-drop the ZIP file; it works the same way.
3:01
This also applies to OBJ files.
3:03
GLTF files are similarly compatible.
3:08
To summarize, you can upload files separately, as a single FBX file, or as a ZIP file. All methods work equally well.
3:24
I'll reload the upload page and simply upload the Mars Rover FBX file.
3:33
Done.
3:34
It looks the same as with the separate files.
3:38
Now, save the changes.
3:41
Click here, wait, and you'll see the page URL change. The model reloads accordingly.
4:01
Returning to my gallery, I now see my first model instead of the sample models folder.
4:10
That concludes this quick upload tutorial.
4:13
We will delve deeper into these topics in future videos.
4:18
Stick around for more.
4:19
We have many topics to cover.
4:22
See you in the next video.
Video 3:
Summary:
The video focuses on texturing the room around the robot arm.
Various texture maps like base color, metallic, roughness, ambient occlusion (AO), and normal maps are introduced.
The process of selecting and applying these textures to the room's material is demonstrated.
The video highlights the impact of each texture, such as making surfaces appear metallic, rough, or casting shadows.
The use of a normal map to add complexity to surfaces without additional geometry is explained.
The video concludes by hinting at further texturing in the rear parts of the scene and model enhancements in future videos.
0:00
In this video, we'll focus on texturing the room surrounding the robot arm.
0:03
Let's dive right in.
0:06
We have room-based color, room metallic, room roughness, A O (ambient occlusion), and room normal maps.
0:22
We'll drag them into the viewport for use in texturing the room.
0:30
To begin, we'll select the material by right-clicking on the mesh that corresponds to the room.
0:36
In this case, I know the walls are part of the room, so I'll right-click on them.
0:43
You'll notice it highlights for a moment, indicating the material is selected.
0:52
Now, I can work on texturing this mesh.
0:58
For the base color, we'll select "room base color" from the options.
1:19
Many elements in the scene have colors, such as clipboard-like objects, the floor, the robot arm's stand, and some panels with baked-in shadows.
1:47
This is looking good.
1:59
For the metallic channel, we'll use the "metallic and roughness" texture.
2:07
Each channel corresponds to a different setting on the P3D service.
2:13
Metal uses one of the RGB channels, unaffected by the others.
2:20
The material changes, giving the frames on the walls a more metallic look.
2:37
We'll do the same for the roughness channel, selecting the same texture.
2:44
Now, the metallic frames appear rougher, scattering light differently.
3:02
Finally, we'll do the same for the ambient occlusion (AO) channel, picking the same image.
3:11
Now, shadows are calculated for the room walls, panels, frames, and even parts of the scene.
3:24
The scene has become noticeably shadowier.
3:35
Lastly, we'll assign the normal channel to the room, paying attention to the flooring.
3:45
Despite some color variation on the floor, light reflects from it as if it's flat.
4:00
The normal map will add relief and complexity without additional geometry.
4:09
Selecting the normal map, you'll immediately notice the difference.
4:19
This effect is achieved without the need for actual modeled geometry.
4:26
It's all thanks to the normal map, instructing how light interacts with surfaces.
4:34
In the next video, we'll continue texturing the rear parts of the scene and further enhance our model setup.
Video 4:
Summary:
The video discusses basic animation settings in the scene.
It demonstrates how to enable or disable animations, either looping or playing once.
The "play once" option is highlighted to make animations serve as intros to the scene.
Adjusting animation speed is shown, slowing down the robot arm's movements for a deliberate effect.
The importance of these basic animation settings in controlling animation playback is emphasized.
0:00
All right.
0:00
We've completed the uploading and texturing of our entire scene.
0:05
Next, we'll examine the most basic animation settings for the scene. To do this, we'll immediately open the animation settings panel.
0:21
The P3D app doesn't allow you to edit the animations directly, but you can manipulate them.
0:28
For example, you can disable them by clicking on this small icon.
0:36
Both animations that come with the model are currently disabled. You can enable them, and they will loop over and over. You can change this to play just once by selecting the animation and choosing "play once" from the drop-down menu.
1:00
You'll see that the other object, separate from the arm, stops playing.
1:07
That animation is actually this one, and we can also set it to play once.
1:14
The viewer will now show us a preview.
1:19
The arm releases the tray and returns to its default position.
1:24
That concludes the animation.
1:27
This is useful if you want a long animation to play only when the model first starts, halting all actions afterward.
1:42
For instance, if I save these changes and reload, you'll observe that the arm moves, places the tray on the table to the left, returns to its full position, and everything halts.
1:58
The animations serve as an intro to the scene and will not replay; they play only once.
2:06
Another function you can utilize is altering the speed of the animations.
2:12
Let's set this to 0.5, and adjust the "grab" animation to 0.5 as well.
2:25
We'll save this.
2:28
Upon model reload, you'll see that the animation is much slower.
2:35
The robot arm moves more deliberately.
2:38
Because we set the animation speed to half the normal rate, we can reduce this even further to 0.1 for both animations.
2:53
Save the changes and wait for the reload.
2:58
There you go.
2:59
The animation is now playing at a very slow pace, illustrating one way to control animations using these basic settings.
Video 5:
Summary:
The video focuses on texturing a robot in a 3D scene.
It explains the use of base color and demonstrates how textures can affect the robot's appearance.
The metallic and roughness workflow is explored, with textures being used for the desired look.
Other parameters like shin, clear coat, and emission are briefly mentioned.
The occlusion channel and its relationship to texture channels are discussed.
The video concludes by mentioning the upload of a normal map and saving the changes, with the intent to continue texturing the scene.
0:00
We'll now begin working on the textures for our model.
0:05
This scene comprises two main objects: the room itself and a robot. Let's start by texturing the robot.
0:15
To do this, navigate to the Material Settings tab and click on it to open.
0:24
We'll be exploring various setups.
0:30
To select the material for a particular object, right-click on it; for example, the robot arm. It will highlight momentarily, and the material is then selected.
0:45
Now it can be edited.
0:46
In the base color section, the color can be changed to red, green, etc.
0:57
This is sufficient to start.
1:00
However, the actual color is determined by a texture imported from our working folder.
1:10
In this example, we'll use a metallic workflow with PBR material.
1:17
Multiple shading methods exist in P3D.
1:23
We'll use PBR due to its recent technology and superior appearance depending on your use case.
1:34
Initially, we'll upload the base color texture.
1:42
Return to the base color texture window.
1:50
Click, hold, and drag it into the viewport.
1:55
The texture is now in the viewport but needs to be assigned. To do this, click the "T" icons, revealing the textures in an overlay.
2:13
Upon clicking, the color may seem incorrect.
2:19
This is due to the material still using the initial color setting.
2:25
With the texture being yellow, it blends with the base color, turning green.
2:33
To correct this, ensure the base color is set to white before using the texture.
2:42
This ensures that the texture colors are accurately represented.
2:53
The model now reflects the chosen base color.
2:58
Next, we'll utilize the metallic and roughness workflow.
3:03
This allows for adjusting the metallic appearance using sliders.
3:14
The appearance alters entirely.
3:17
Similarly, the roughness parameter can be adjusted for varied shine.
3:27
It appears metallic, but light scatters on its surface.
3:32
The material resembles anodized aluminum.
3:36
For this model, we'll use textures.
3:40
The original artist designed it to appear painted, with metallic bolts and front parts.
3:56
Textures will be used for these aspects.
4:01
Proceed to the folder and select the metallic and roughness texture. Drag and drop it into the viewport.
4:14
Select it from the texture widget.
4:21
Don't use this texture for base color as it contains unwanted colors.
4:35
Assign it as the base color.
4:38
For the metallic material, use this texture.
4:44
The material's appearance changes accordingly.
4:50
The same texture will also be used for the roughness parameter.
4:58
The model now appears like a painted or powder-coated piece of equipment.
5:08
Note the metallic elements at the front of the arm.
5:18
This is intentional.
5:21
The model was designed this way.
5:24
Details such as bolts and screws are metallic, while the painted portion appears as such.
5:44
The original artist's intent will be honored.
5:50
Additional parameters are available.
5:55
The shin parameter can be adjusted to add a tangent light effect.
6:08
A halo appears on the model, enhancing realism.
6:16
A bit of this can be added.
6:20
Clear coat is optional, as the original material is already shiny.
6:40
Emission is not required in this case.
7:04
Lastly, an occlusion channel is available.
7:07
Interestingly, the metal and roughness texture is also used for ambient occlusion.
7:20
This adds new shadows to the model, as intended by the original artist.
7:29
The texture is used for multiple channels because each setting uses one of the RGB channels in the image.
8:01
For reference, R is for occlusion, G is for roughness, and B is for metallic.
8:21
Hopefully, this explanation is clear.
8:24
For more details, search for "Orm PBR."
8:39
Finally, upload the normal map for the robot arm.
8:47
Zoom in and drag the texture into the viewport.
9:03
For the normal channel, ensure it's selected.
9:10
Open the texture overlay and choose the normal map.
9:23
Little changes occur, owing to the texture's limited details.
9:35
The light directions are subtly altered.
9:47
We have now completed the model setup.
9:49
Save changes and wait for the reload.
9:58
The model reloads.
10:01
Textures are now in place.
10:04
We'll continue texturing the rest of the scene.
Video 6:
Summary:
The video focuses on setting up a complex 3D model in P3D.in.
It emphasizes the importance of uploading both GLTF and BIN files together for proper functionality.
The tutorial demonstrates adjusting the model's orientation, zoom level, and default camera view.
It covers enabling "double-sided" mode to prevent backface transparency.
The video concludes by mentioning upcoming topics such as texturing and potentially disabling animations in future videos.
0:00
Hi, this is Jonathan with P3D.in.
0:02
In the following video, we will explore setting up a complex 3D model in P3D.in. We will focus on uploading geometry separately from textures and discuss PBR workflows.
0:24
Note that some 3D editing suites export a GLTF file along with a BIN file containing extra model data.
0:42
If your suite exports both, upload them together.
0:49
For demonstration, I'll open a new model form and upload just the GLTF file. You'll see an error.
1:01
The BIN file is required.
1:03
Go back, select both files, and drop them in.
1:08
Now the model functions as expected.
1:12
This completes the main upload.
1:15
I'll quickly save this and wait for completion.
1:24
Done.
1:25
In my gallery, I now have two models.
1:30
I'm not satisfied with this thumbnail.
1:33
The model appears too small.
1:36
This one is especially small.
1:41
Let's correct that.
1:43
Zoom in using the scroll wheel to an appropriate level.
1:50
Here is a good zoom level.
1:53
To adjust orientation, go to the model settings tab and scroll to the bottom.
2:10
My model faces right.
2:14
I'll rotate it left.
2:16
Now the opening faces me.
2:25
In the materials tab, check "double-sided."
2:35
This prevents backface culling, which makes the model transparent from the back.
2:42
Unchecking it turns the wall transparent.
2:50
I don't want that.
2:52
I'll keep it checked and adjust the default view.
3:00
Double-clicking returns the model to its default position.
3:06
It's too far out.
3:08
Zoom in a few steps and go back to model settings to establish a new default camera view.
3:23
Upon loading, I want this view.
3:27
Click here to update the thumbnail and save changes.
3:35
The model reloads with the new default view.
3:41
Double-clicking resets to this view. That concludes this video. Up next, we'll cover texturing and possibly disabling animations.
3:58
More advanced features will follow.
4:02
Stay tuned.
Video 7:
Summary:
The video focuses on finishing the texturing of the scene, specifically the stacks in the background.
The narrator demonstrates how to select materials for the stacks and assigns textures for base color, metallic, roughness, ambient occlusion, and normal maps.
The video concludes by mentioning that the next video will cover basic animation settings and the hotspots feature to create interactivity in the scene.
0:00
So let's finish up texturing this scene. All we're missing now is to texture these stacks in the back of the scene.
0:09
To do that, we're just gonna go ahead and open the mesh materials tab.
0:15
And of course, we know that this is the material for those, but I can also select that by right-clicking on top of a mesh, and then the material gets selected.
0:25
So the textures are not present at the moment in the scene.
0:28
I can quickly check on that here.
0:31
We have the room normal, room metallic, room base color, robot arm normal, robot arm metallic, and robot arm base color.
0:41
And we can also, of course, go and check the folder with all of the assets.
0:48
And yeah, we can see that there are these three extra textures that we haven't uploaded to the scene.
0:55
So it's just a matter of grabbing them and dropping them into the scene here.
1:01
I can quickly again check here and yes, you will notice that the new textures are right here.
1:08
So this is the base color for the holder material.
1:12
And so we're gonna pick the holder's base color texture, and that's the base color for that.
1:19
And then what we're gonna do is select the appropriate metal texture, which is this one here.
1:28
You will notice that the material changes the way that the light reflects from the stacks is a little different.
1:39
And then also for roughness, we're gonna use the same texture.
1:43
Of course, because we are always using this RRM approach to these metal roughness and A O textures using the orm convention and then for the ambient occlusion as well, we're gonna use the same texture, right?
2:03
And the last thing that we're gonna have to do is to pick the normal map for that one, which is also present here, and it's this one. You just pick it, and we are done with assigning those textures.
2:18
Now, it's just a matter of saving the changes and wait for it to be done. It should be fairly quick.
2:25
The scene is gonna reload.
2:28
There you go.
2:30
And our stacks are textured. In the next video, we're gonna be exploring some of the basic animation settings and of course, the hotspots feature. We're gonna get started with the hotspots.
2:43
It's gonna allow us to create a more interactive experience from this scene.
Video 8:
Summary:
The video introduces the hotspots feature in the P3D service, allowing interactivity in 3D scenes.
The narrator demonstrates how to add hotspots, name them, add descriptions, and move them to prevent collisions.
The video concludes by mentioning that more hotspot settings will be explored in upcoming videos.
0:00
So we're gonna get started with hotspots, and the hotspots tab is the fourth one from the top in the settings panel.
0:09
And when you choose it, it doesn't have a lot of things in it.
0:13
We're gonna go deeper into this one.
0:15
But the first thing that we're gonna do actually is go back to animation settings and use these little icons, these "I" icons to disable these two animations.
0:26
So they don't ever play.
0:28
We don't need to touch anything else that we changed.
0:31
We're just gonna change save the changes now and wait for the scene to be done.
0:37
Reloading.
0:37
There you go.
0:38
And yeah, we're gonna go back to the hotspots panel, and well, hotspots are a very nice feature that allows you to add a lot of interactivity to your 3D scenes in the P 3D service.
0:53
So, if I just come here and add a hotspot, the hotspot is added by the fold, they get added to the original of the scene.
1:02
So this should be 000 in the space of the scene.
1:07
So that's where the actual hotspots get added to.
1:11
And what you do with the hotspots is add more information about your scene, and the most basic usage, of course, is just adding a title to something and pointing on something.
1:23
So let's name this robot arm, and that's our hotspot, in the next thing that you can do with hotspots when they are selected is add extra information about the object.
1:41
So you can add a description.
1:43
It can be anything that you would like to add.
1:46
For example, let's say it's painted yellow.
1:52
So, so visibility in the factory, it's very good, and that's how you add a description.
2:07
This is where the interactivity part starts to kick in.
2:10
So, for example, if I click outside of this hotspot, I'm taken back to the default view of the model.
2:17
And if I click on the actual hotspot, it gets sort of activated.
2:23
And the description is displayed for that particular hotspot.
2:29
So if I click outside again, I go back to the default view, if I click on it, the hotspot activates and it displays all of its data, you can have more than one hotspot.
2:43
For example, this one is simply selected, and it displays its data, but you can have more of them in the scene.
2:50
So I'm just gonna go here and click on the add new hotspot button and a new hotspot is created.
2:56
And as I said, before the hotspot is created at the exact origin of the scene.
3:03
And this would be very problematic to have everything pointing at the same point in the scene.
3:10
Of course, we don't want that.
3:12
Because if I, for example, move the scene around, the hotspots start colliding.
3:18
So with the hotspot two selected, the way to fix this conflict is to select the hotspot that you want to move and click on this place hotspot button.
3:30
Now I'm gonna click it and now I'm hovering the scene, I'm not holding any buttons.
3:37
And as soon as I get to some part of the mesh, the hotspot jumps to where my cursor is.
3:44
So now I can place this one say up here and in the bottom wall just click on it, and it's placed, and now the hotspot will follow that placement all the time all around and that's how you fix that.
3:59
And then in this particular hotspot, let's call this one room walls.
4:07
And let's give it some dummy description.
4:12
This is like this is just a dummy description, right?
4:19
This is just to showcase the capability.
4:22
So let's click outside of it.
4:25
We're taking back to the default view of the model.
4:28
If we click on our first hotspot, it gets activated, it displays its data.
4:35
And if you click on the other one, this one deactivates and the new one activates and shows its its contents, it's description.
4:44
If I click outside of it, it basically just collapses and goes into just the title mode.
4:53
And now we have 22 hotspots on the scene, and we can use them to showcase more stuff about our model.
5:01
There are many more, many, many, many more settings for hotspots and we're gonna be exploring them one by one in the following videos.
