Nowadays, social pressure, work pressure and family pressure are very big, everyone has a lot of things to do, busy “happy”, for technical personnel, facing the work pressure will be greater, every day non-stop code has been “life and death fatigue”. Do you have a good way to do 3D visualization applications? Today I share this platform with you. It is absolutely lightweight, with low threshold and low development cost. Ordinary front-end development engineers who are familiar with WebGL and master JS can develop online.
Based on HTML5 and WebGL, ThingJS can be easily viewed and debugged on major browsers, PCS and mobile devices. ThingJS offers simple, rich functionality for visual applications that require basic Javascript development experience.
ThingJS provides scene loading level, layering, browse, access, search, and object is rich in a variety of control mode and the effect of the show, can undertake all kinds of interactions through binding event, also provides the camera Angle, temperature and humidity control, the effect of point, line and plane, cloud interface data display, particle effects, etc. Various kinds of visual function.
ThingJS provides the following components and tools for users to use:
CityBuilder: Focus on 3D city map building tool to create your 3D city map.
CamBuilder: Simple, easy to use, free 3D scene building tool.
ThingPano: A panorama creation tool that makes it easy to create and develop panorama applications that seamlessly blend 3D macro and micro scenes.
ThingDepot: Tens of thousands of models, dozens of industries, independent selection, one production multiple reuse.
Scene lighting. Js
/ * *
* Description: Adjust the scene lighting
* Set by app.lighting
* For specific parameter adjustment and effect adjustment, you can use “Tools” — > “Scene Effects” — > “Lighting Configuration”
* After adjusting the effect in the tool, you can click the “Generate code Block” button
* You can use the parameters in the code editor
* See tutorials for details.
* Tutorials: ThingJS Tutorials — > Effects and Environments — > Lighting
* Difficulty: ★☆☆☆
* /
var app = new THING.App({
url: ‘https://www.thingjs.com/static/models/chinesehouse’
});
app.on(‘load’, function (ev) {
App.camera. Position = [18.217000353088125, 16.96513529990897, 11.90387798709408];
App.camera. Target = [-0.92, 2.1, 2.7];
})
// Ambient light object
var ambientLight = {
Intensity: 0.4.
color: ‘#FFFFFF’,
};
// Hemisphere light
var hemisphereLight = {
Intensity: 0.5.
color: ‘#FFFFFF’,
groundColor: ‘#202020’,
};
// Main light object
var mainLight = {
shadow: true,
Intensity: 0.6.
color: ‘#FFFFFF’,
alpha: 120,
beta: 0,
};
// Second light object
var secondaryLight = {
shadow: false,
intensity: 0,
color: ‘#FFFFFF’,
alpha: 0,
beta: 0,
};
// Global configuration
var config = {
ambientLight,
hemisphereLight,
mainLight,
secondaryLight
}
New thing.widget. Button(‘ Adjust scene light ‘, function () {new THING.
// Set the light
app.lighting = config;
})
To be honest, this kind of lightweight online development platform is especially suitable for our generation, which saves the process of large sections of code knocking. In the way of frame code and fast code, we only need to write some simple codes to build scenes, online development, docking data and project deployment. Project deployment can be hosted online or deployed offline. In short, save a lot of time and energy, the technical personnel must try oh ~