Teach you to add a sky box to the scene, super easy!

inDigital Twin VisualizationIn the scene, if the scene sky is to be changed, such as day, night, haze effect, etc., the sky box technology can be considered at this time. A realistic sky can be added to the digital twin visual scene, making the world more beautiful and real.

The sky boxIt is a cube that wraps the entire scene, rendering and displaying the entire scene environment. Sky box is actually a cube, and then paste the corresponding map, on the surface of the six in the actual rendering, twin visual scene will cover the cube is on the digital camera around, twin visual scene to digital cameras at the center of the cube, and then according to the line of sight with the cube of the coordinates of the intersection, To determine which face to sample the texture on. So in real-time rendering, because the camera moves along with the object, the object appears to the naked eye to be almost the same size, which is called skybox technology.



Skyboxes are a common technique used to enhance digital twin visualizations by wrapping a texture around the camera. To keep the view consistent, you need to correct the skybox. After the camera has flown and the current view has changed, the skybox needs to be corrected — get the type, name and URL of the custom layer tilelayer1 and add this layer to the list of basic map sets.

Currently, BlueSky, Milkyway, Night, Cloudysky, White and Dark skyboxes are provided inside ThingJS. The app.skyBox property is used to set the digital twin visual background skyBox.

app.skyBox = "Night"; // Unset skyBox app.skybox = null;

Set the background skybox timeline using the app.skyEffect property.

App.skyeffect = {// Display light source position Showhelper: false, // Light source diffusion size Turbidity: 10, // Atmospheric Scatter Rayleigh: 2, // Time [0~24] Time: 17.6, // Horizontal Angle beta: 30}; // Unset effect app.skyeffect = null;

The effect is as follows:



There is a problem when app.skyBox and app.skyEffect work together. You need to select one to work and disable the other.

— — — — — — — — –

Digital Twin Visualization:https://www.thingjs.com/