In order to make the scene management mode clearer in large projects, it is also meaningful to create a second scene, and we can also introduce some simple editor functions.

and do a new scene

directory

1. Add Skybox
2. Save your work
3. Load a 3D model
4. Verify the work so far.

In order to make the scene management mode in large projects clearer, it is also meaningful to create the second scene. We can also introduce some simple editor functions.

This time we will start with a brand new scene.

Selection 'Yes'

Editor is now in a completely blank state, as shown below:

Let's add something. Since we are in a completely "blank state", covering the ground and the sky may be useful as many scenarios use this.

Add Skybox

If you look at the default scene in advance, you may notice that skybox is a special material that uses a file extension of .dds. The material type is based on physics-based rendering (PBR), which is a very cool and powerful feature of BabylonJS. The entire scope is not within the scope of this editor and workflow tutorial, but you can also see a demonstration of the underlying material PBR material type here.

https://www.babylonjs.com/demos/pbrglossy/

Do you see all the reflections and materials on the helmet, as well as the added sense of reality? This is the power of PBR. Aside from that fancy helmet net, physics-based modeling is great for Skybox.

I won't go into details on how to generate this file, but the short version is that you need a skybox, and then you need a way to convert this skybox into .dds format for use by BabylonJs. There are a lot of Skybox on the internet, and a great tool I used in this tutorial is Alex Peterson's Spacescape software. It's basically a very cool (and free) software dedicated to making space-themed sky boxes.

You can download it here: http://alexcpeterson.com/spacescape/

If you want to try it yourself, or just make a sky box yourself. Spacescape is exported directly to .dds format, so it is great for testing this workflow. The pattern you need to choose this specific tool is:

Select a name

1. Single DDs cube map (*.DDs)
2. 512 is a very good demonstration, 1024 looks better! For better performance, just use 512.
3. select source.

My advice is: Avoid using high resolution texture output. The original skybox is a big file and we just introduce the workflow. Optimizing this resource (such as converting to a .env file) is beyond the scope of this tutorial.

Now we need to get it up and running. In the new scene, drag the file (My is Space.dds) to the Texture Viewer tab. When it appears in the list, you need to change the texture "Coordinates Mode" to SKYBOX_MODE

Now you will see your sky box projected onto the sphere in the editor. It should be seamless.

Now we want to put this texture on a material. We will go to Materials Viewer and click +ADD. . . The button located under the tab name.

When doing this, a window will pop up and make sure PBRMaterial is selected.

When you have the material, change some properties. Click the new material and the Inspector window will open.

• Rename the material to SpaceBox

• We need to turn off the backside culling.

Click the selected hook so that the material can be visible inside the cube.

• specifies the actual texture!

Just add the .dds file in the Reflection Texture property of the inspector's Reflection menu.

Now, just like using the Texture Viewer, you should be able to see the sphere showing the correct texture in the Material Viewer.

Congratulations to you. This is basically the process of making materials in the editor.

1. Import texture
2. Add material
3. to configure both at the same time; especially to specify the correct texture for the material.

Our day box is almost finished. We need to add a new cube to the scene. Click +Add from the top menu and when the pop-up menu appears, select "Cube Mesh".

At this point, you should see a small gray cube in the scene and see two materials in the Materials Viewer. A material called default material is added next to the cube.

Next step, we need to make this cube bigger to accommodate the scene. In the cube's "inspector" window, view the "Properties Properties" tab. In it, you want to change the scaling to a large one, such as 500x500x500.

At this point you will have a large gray cube surrounding you. We need to take some extra steps to make it look like an empty box. Select the cube box in the Graph tab or the Preview tab. Now in its inspector:

1. is a reasonable name for it. I named my name: SkyboxSpacescape
2. assigns the SpaceBox material to the cube.

Now you should see the box of the sky around you! Run the game preview tab and check it out! Looks good!

Save your work

We have a simple scene with only one skybox, and now is a good time to save this scene. As before, save it to your own folder, under the editorprojects folder, named Space-Scene. So far, your entire project directory structure (probably) looks like this:

When you add more projects, they are archived in the editor project directory like this. You can switch back and forth between scenes by just double-clicking the icon here of scene.editorprojet.

Special note: Every time you save, it is recommended to use "Save Project As..." to save as. If you overwrite the previous results, you will not be able to cry.

Load a 3D model

Because our second scene is really just a skybox, I think it might be a good idea to add another 3D model to the scene before we start into the workflow related to managing the scene in the context of the web project you are planning to publish.

has provided some very good 3D models on the Babylon official website. After downloading it, you can conduct experiments. Since this tutorial is more about workflow than about making your own 3D models, we can download individual 3D models to learn.

Babylon supports common formats of 3D models, such as gltf, obj, stl., etc. For more information, please refer to:

https://doc.babylonjs.com/how_to/load_from_any_file_type

official model example: https://doc.babylonjs.com/resources/meshes_to_load (the model can be downloaded and the program source code can be downloaded)

In addition, if you can model software such as Blender, 3ds Max, Cheetah 3d, etc., then there may be an exporter that allows you to easily create grids. There are many articles about this in the reference section of the BabylonJS documentation.

In order to successfully complete this tutorial, we provide a ready-made 3D model download:

Dude.babylon

• Mesh: https://www.babylonjs-playground.com/scenes/Dude/Dude.babylon
• Asset: https://www.babylonjs-playground.com/scenes/Dude/0.jpg
• Asset: https://www.babylonjs-playground.com/scenes/Dude/1.jpg
• Asset: https://www.babylonjs-playground.com/scenes/Dude/2.jpg
• Asset: https://www.babylonjs-playground.com/scenes/Dude/3.jpg

downloaded as follows:

The difficult part is here. After downloading files and resources. . Drag them all into the editor and click yes on the prompt.

Let's see what's going on:

• has more textures in the texture viewer!

• Material Viewer has more materials

• In Graph, there is a new node, which may be a redundant camera, if you want, you can delete it. It looks like this:

• In Preview, there is an additional grid object

Click to play, try it, don't forget to save your work.

We can easily use the web page to display a 3D model

to verify the work so far.

• Open and close two projects
• Check your folder structure, it should be like this