About Sgilk

Introduction ThreeJS is a powerful 3D graphics library built on Javascript. This example application renders a .OBJ 3D model of a robot arm and allows user to zoom and rotate about the object. The JQuery library is also used to animate info panel show/hide functionality. Prerequisites A working knowledge of the Javascript language will be useful in understanding this code. An understanding of the WebIQ Designer will also be helpful. Library packaging will not be covered. Useful Links Package Code Libraries for WebIQ ThreeJS - Home Page TweenJS - Animation Three JS - Orbit Controls JQuery  Instructions Import the WebIQ application attached at the bottom of this article.   Load the project into your designer workspace.   Navigate to your project dashboard and select Code Manager.   Select the 3d-canvas local script and press the "Edit Selected Entry" button to open the code editor.   Code Overview A brief breakdown of key sections of the script is provided below. Execution of the module begins on line 160. Event listeners are added to the window object to handle resizing and mousedown events. The onWindowResize function dynamically updates the camera and renderer to maintain aspect ratio. The onDocumentMouseDown function initiates raycasting to check for intersection with clickable objects in the scene. module.run = function (self) { // Event listeners window.addEventListener( 'resize', onWindowResize ); window.addEventListener('mousedown', onDocumentMouseDown); On line 166, the ThreeJS renderer configuration begins and the associated DOM element is added to the web page to display the scene. // Add 3D rendering div to document var body = document.body; let container = document.createElement( 'div' ); body.appendChild( container ); // Configure renderer renderer = new THREE.WebGLRenderer(); renderer.setPixelRatio( window.devicePixelRatio ); renderer.setSize( window.innerWidth, window.innerHeight ); renderer.shadowMap.enabled = true; renderer.shadowMap.type = THREE.PCFSoftShadowMap; container.appendChild( renderer.domElement ); On line 182, the scene perspective camera is configured and positioned. // Instantiate and configure camera camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 2000 ); camera.position.z = -1200; On line 186, the 3D scene is created and the background is configured. // Generate Scene scene = new THREE.Scene(); scene.background = new THREE.Color( 0x72645b ); scene.fog = new THREE.Fog( 0x72645b, 1000, 2000 ); On line 195, the ground plane is configured and added to the scene. // Add ground plane to scene const plane = new THREE.Mesh( new THREE.PlaneGeometry(4000, 4000), new THREE.MeshPhongMaterial( { color: 0x999999, specular: 0x101010 } )); plane.rotation.x = - Math.PI / 2; plane.position.y = -350; scene.add( plane ); plane.receiveShadow = true; Lighting is added to the scene on line 205. Ambient light is added using a HemisphereLight and the shadowed light is directional. // Add and configure hemispher and directional lighting scene.add( new THREE.HemisphereLight( 0x443333, 0x111122,4) ); addShadowedLight( 300, 300, -300, 0xFCFF00, 0.8 ); The robot arm .OBJ file is loaded into the scene starting on line 209. The loadModel function descends the object tree and adds all child meshes to the scene. One important note is that the .OBJ resource is packaged with the project in a directory %AppData%\Roaming\webiq-designer\workspace\resources. WebIQ does not currently support the adding of custom files through the designer, so the \resources directory was created in the File Explorer. // Load 3D object const manager = new THREE.LoadingManager( loadModel ); const objLoader = new THREE.OBJLoader(manager); objLoader.load("resources/Rmk3.obj", loadResourceCallback); Starting on line 218, the user Orbit Controls are instantiated and configured. // Add and configure orbit controls const controls = new THREE.OrbitControls( camera, renderer.domElement ); controls.minDistance = 500; controls.maxDistance = 1500; controls.enablePan = false; controls.maxPolarAngle = 7*Math.PI/16; controls.update(); Finally, the animation loop is started on line 227. This function updates the renderer, orbit controls, and all animated properties. // Run animation loop animate(); The JQuery and Tween libraries will not be covered here, but their associated documentation can be found in the Useful Links section. ... View more

Introduction There is a large active community around software development using Javascript. Open source Javascript libraries are a great way to utilize existing, tested software, instead of recreating a solution. This How-To will cover the process of integrating custom libraries and additional plugins into WebIQ using ThreeJS as an example. All code used in this example is attached at the bottom of the article. Prerequisites It is assumed you have a licensed copy of WebIQ designer and a general knowledge of the software. To access Smart HMI documentation, an account will be required. Instructions Create Independent Library Package In this example, a package will be installed that is dependent on this library. For this reason, the independent library package must be installed first. Follow these steps to create an independent library package: Navigate to the designer packages directory at: %APPDATA%\webiq-designer\packages Create a new folder with your package name. WebIQ suggests adhering to their naming convention of lib-$name. For ThreeJS, this would be lib-threeJS. In the top level folder of the package, add a file named webiq.json with the JSON below. Information on package file structuring can be found here: https://www.smart-hmi.com/user/download/deliver/docs/documentation-dev-designer-package-format-2.12-6134/index.html { “format”: 2, “name”: “lib-threeJS”, “description”: “ThreeJS 0.144.0”, “type”: “library”, “version”: “0.144.0”, “forceInstall”: false, “forceUpdate”: false, “keep”: [ ], “localeVariables”: { }, “requires”: { “visuals”: “^2.0.0” } } ​   Create the sub folders js\custom-libs to hold the library javascript files. Download the built source code and place it in this folder. The code can be found here: https://github.com/mrdoob/three.js/blob/dev/build/three.min.js You can also place the ThreeJS license file in this folder with a unique name (ie. Lib-three-LICENSE). Packages will throw an error message in the designer package manager if there are duplicate file names. The license file can be found here:https://github.com/mrdoob/three.js/blob/dev/LICENSE At this point, your package structure should look like the tree below.   Create Dependent Library Package This package depends on the installation of the previous package. Following a similar process to step 1, ThreeJS plugin packages can be created as follows: Create a new package folder for the add on of your choice. For this example, OrbitControls will be used. It is important to name dependent libraries such that they will be loaded after the parent library. Libraries are loaded alphabetically in WebIQ, so in this example, the Orbit Controls package will be named (lib-threeJS-OrbitControls) and the javascript file itself (threeJS-OrbitControls.js).  WebIQ does not currently support Javascript modules, so the source code of the plugin will be used. The code for OrbitControls can be found here: https://github.com/mrdoob/three.js/blob/dev/examples/js/controls/OrbitControls.js In the webiq.json file, add the JSON below. Since this is dependent on the ThreeJS library, this is included in the “requires” property. { “format”: 2, “name”: “lib-threeJS-OrbitControls”, “description”: “threeJS OrbitControls Module”, “type”: “library”, “version”: “0.144.0”, “forceInstall”: false, “forceUpdate”: false, “keep”: [ ], “localeVariables”: { }, “requires”: { “visuals”: “^2.0.0”, “lib-threeJS”: “^0.144.0” } } ​   Install Packages In the WebIQ Designer package manager, the lib-threeJS package should now be available for install. The dependent packages should have an unmet dependency error which prevents their installation. After lib-threeJS is installed, the dependent packages should be available for installation. Test Libraries To test the threeJS library and OrbitControls installation, create a local-script and add it to the application in the layout manager. Instantiate some objects defined in the threeJS and OrbitControls library. An example script is provided below. ... View more