Hello! We continue our series Verge3D for Blender Basics. In this part of the tutorial, we'll be setting up the camera and the background for our scene. Let's begin with the background. In the previous video, we added an environment texture. This texture defines lighting and is reflected by the materials. However, it isn't very suitable for the background being too distracting, and kinda weird. So we want to replace it with something better. There are different ways to do this. One possible way is to use World shader nodes. We can go to the World tab and add a Light Path node... ...then add MixRGB and connect it via the "is Camera Ray" output of Light Path. So how it works? If we connect the Mix node directly with the Background node, you can see it. Everything that goes to the upper socket, works as lighting and reflections. Everything that goes to the lower socket, becomes background. So we can pass the environment to the upper socket, thus making lighting and reflections. And to the lower socket, we can pass some color, or a texture. So this is one of possible ways to make the background. But we won't do it this way. We want it to be a more interesting, dynamic background. So lets delete this setup. Instead, we'll be using some geometry for background, to which we'll add some effects with shader nodes. Let's create an icosphere around our object, and make it bigger. Make the scale 8 for example. Apply scale. Next thing we do is invert the normals of this sphere, so that it is visible only when looking from inside. To do this, use the shortcut "Shift N", and in the normals recalculation dialog select "Inside". So all the normals are now looking inside. Now let's setup a material on this sphere. Create a material, name it "background". We won't be using the Principled BSDF shader, but rather an Emission shader. This will prevent applying lighting and shadows to this sphere. Right now it is pure white, and we are ready to add some effects to it. We'll use a Layer Weight node, and its Facing output. This will provide this interesting black and white mask. It is better seen from outside. It is almost want we want. We just make it a bit sharper with a spot in the middle. And use a Math/Multiply node to make it more contrast. The only thing left is to color this mask. Add another MixRGB node and use the mask as factor. And use dark blue and dark red to provide colors for mixing. This is almost what we want. We just need to add some extra geometry to make our texture more dynamic. To do this, lets add a Subdivision modifier to the sphere. This makes it more interesting already. Now add a Triangulate modifier to make it even more fancy. Let's add another Subdivision and another Triangulate. Yes, this is what we want. May be make it a bit brighter. Now we can save it. But before exporting, we either need to apply all these modifiers manually, or in the Render Properties tab find Verge3D settings panel and check Bake Modifiers. So that the exporter automatically applies these modifiers. Now let's export, open the application and see that our background is there. May be we should make it even more brighter. Export again and reload the application. This is good! Now let's handle the camera. It is already present in the scene and we more or less positioned it in a previous video. Now we want the camera to look at the object center. To do this, let's add an empty and reset its coordinates. Now go to the camera settings, and under Verge3D settings find the Target panel. Now use the object picker to pick this empty. As you can see, the camera now looks strictly at the empty object. If we check out the application we can find that the camera is not limited in any way. We can pan the camera without limits, move it too close to the objects so that it cuts the geometry. We don't really want the user to see all this. So let's fix it! In the camera settings, turn off Panning to disable camera movements outside the sphere. And here we can also limit the distance - make the minimum 3 units and maximum 5 units. We won't be using Horizontal or Vertical limits for this app. So the user will be able to freely observe the model from all sides. Now save, export and refresh the application page. We no longer can move too far or too close, and we cannot move outside the sphere. This is exactly what we want. Now let's make the camera auto-rotate after some idleness time. So if the user does not interact with the app for some time, the camera starts rotating around the object. This is the first time when we use Verge3D's scenario editor called Puzzles. In the App Manager, open Puzzles by clicking on this green icon. You can use both left click or right click menu - in both cases it opens as a new tab. This is the main work space to which we'll be dragging logic blocks. Here we got a preview window with our app running. This green button launches the scenario. The blue button nearby saves it. Be sure to save your puzzles so that they are permanently applied to your app. And here is a list of categories that contain all available logic blocks. These blocks perform various actions which you can read about in the User Manual. We were going to implement auto-rotation for the camera. So lets go to the Camera category and drag out the "autorotate" puzzle. This puzzle is very simple. You can turn auto-rotation on and off. And there is just a single parameter to tweak - namely rotation speed. Now after we placed this puzzle on the work space, we can run this simple scenario. As you see the camera starts rotating right away. But we cannot stop it because it requires some additional logic to do so. We want the camera stop once the user clicks somewhere on the 3D canvas. To do this, we can add an event puzzle, namely "when clicked". This puzzle will be triggered each time the user clicks on something. What exactly the user should click on, can be defined with selector puzzles. So you can select a single object - for example, a blade. But we want to stop the camera when any of the object parts - or the background sphere - is clicked. That's why we'll use another puzzle - "all objects". Now copy and paste the "autorotate" puzzle and put the copy inside the "do" slot of the "when clicked" puzzle. If we run the app now, we can see that if we click or rotate the object, the camera stops. However, we want auto-rotation to resume after a few seconds. This can be realized with a timer puzzle. It will count time and run what is inside it after the specified period of time passes. Lets rename this timer as "autorotate" and put our "autorotate camera" puzzle inside it. So after 1 second, there will be triggered whatever is inside. But 1 second is too fast, so let's make it 5 seconds. Let's save and refresh the page in order to clean the old logic which may still rest in the memory. Now auto rotation kicks in after 5 seconds since the app loads. And it is turned off when the user interact with the app. This is already good enough, but we want auto-rotation to begin each time the user is sitting idle for 5 seconds. This can be realized by adding the same timer set inside the "when clicked" puzzle. So what will happen now? Once the user would click somewhere, auto-rotation would stop. Then, the timer would refresh and trigger auto-rotation again. Well, 5 seconds may be ok for testing but for real life let's make it 10 seconds. Let save our scenario and refresh the editor page to clean the timer that may still be running. So lets wait 10 seconds and see that autorotation actually starts. After we interact with the app, the timer refreshes to start counting 10 seconds again, so that autorotation resumes - until we interact again. And again, waits for 10 seconds... and resumes. This is basically what we wanted to achieve. See you in the next video!
