100 %
0 %
Information about Lagoa

Published on February 19, 2014

Author: Solution4Future



Lagoa - web based 3D solution.
Few words about how Lagoa Tool works, how JavaScript Lagoa API looks and examples based on Lagoa demo materials.

LAGOA.COM Web-based 3D Solutions Justine Żarna

Work routine?

Step 1 Create 3D model ● use enterprise desktop tool like AutoCAD and upload your model to Lagoa ● grab model from website like ● search Lagoa Asset Library for matching model

Step 2 Configure Lagoa scene ● apply materials, textures ● add lights, hdri environments ● set camera properties ● manipulate model: move, orbit, rotate, scale

Step 3 Check your render ● set output resolution ● save render ● render in background

Step 4 Iframe settings ● mark auto load scene ● display navigation tools ● enable rendering ● set privacy settings ● set version of your scene

Step 5 Start code in JavaScript ● add your iframe to html file ● let’s get fun started!

Demo Time.. Źródło: wakpaper. com

$(document).ready(function() { // called once, called when scene finishes loading – no geometry data is guaranteed to have loaded lapi.onSceneLoaded = function(){ var scn = lapi.getActiveScene(); var cam = scn.getCameras()[0]; cam.getProperty("Lens").getParameter("dofradius").value = 0; cam.getProperty("Resolution").getParameter("width").value = 720; lapi.desselectAll(); setTimeout( function(){ // now we will set all the GL meshes to not visible var meshes = scn.getMeshes(); for( var m in meshes ){ meshes[m].getProperty("Visibility").getParameter("visible").value = false; } lapi.startRender() }, 2000 ); }; }); Example of using function onSceneLoaded

$('.js-orbit').bind( "click", function(){ lapi.orbitTool(); }); $('.js-pan').bind( "click", function(){ lapi.panTool(); }); Other possibilities: lapi.moveTool, lapi.scaleTool, lapi.orbitTool, lapi.panTool, lapi.zoomTool Binding navigation tools

$('.js-color-white').bind( "click", function(){ lapi.applyMaterialToMeshByName( "Realistic Carpaint White", "bodywork"); }); var uiElement = $('select[name="color-picker1"]'); uiElement.change(function(){ console.log("Color change"); Work with meshes and materials // read the color form the UI element var color = lapi.utils.hexToRGB( cPicker.val() ); // this will return an array with all objects that have the part name, in Lagoa multiple parts // can have the same name – no "name uniqueness" only object GUID uniqueness is guaranteed. // we will make an assumption that we are only interested in the first one, therefore the array [0] var mat = exportMeshes[currentMesh].getMaterial(); // we are interested in changing the reflectance property // for Velvet shader the color is called "color..." var reflectance ="color"); // pow 2 is just for gamma correction reflectance.parameters.f0.value = Math.pow( color.r * ONE_OVER_255, 2 ); reflectance.parameters.f1.value = Math.pow( color.g * ONE_OVER_255, 2 ); reflectance.parameters.f2.value = Math.pow( color.b * ONE_OVER_255, 2 ); });

function addPatterns(){ // our patterns var scn = lapi.getActiveScene() var textures = scn.getTextures(); // scrape all textures that start with "EXPORT_TAG". var tmpTexture = null; var textureName = ""; var isExport = false; function setOnClickPattern( in_htmlElement, in_clickValue ){ $(in_htmlElement).click(function(e){ // grab the parameter that the element will handle var mat = exportMeshes[currentMesh].getMaterial(); var param = mat.getProperty("color").parameters.texture; param.value = in_clickValue; }) } // expose all textures for( var i=0 ;i<textures.length; ++i){ tmpTexture = textures[i]; textureName ='name').value; isExport = textureName.indexOf(EXPORT_TAG); if(isExport >= 0){ // create the HTML element var imgUrl = tmpTexture.getProperty("url").getParameter('url').value; var img = $(document.createElement('img')); // assign the callback setOnClickPattern( img,'guid').value ); img.attr('src', imgUrl ); img.appendTo('#patterns'); } } } Binding textures and apply them on materials

function setOnClickHdriEnv( in_htmlElement, in_clickValue ){ $(in_htmlElement).click(function(e){ // grab the parameter that the element will handle var mat = lapi.getActiveScene().getObjectByName(DOME_LIGHT_NAME)[0]; var param = mat.getProperty("EnvironmentMap").parameters.path; param.value = in_clickValue; }) } function setLightColor(in_htmlElement, in_clickValue){ $(in_htmlElement).click(function(e){ var light = lapi.getActiveScene().getObjectByName(DOME_LIGHT_NAME)[0]; light.getProperty("Color").getParameter("r").value = in_clickValue['red']; light.getProperty("Color").getParameter("g").value = in_clickValue['green']; light.getProperty("Color").getParameter("b").value = in_clickValue['blue']; }) } Play with lights

function setCamera(in_htmlElement, in_clickValue) { $(in_htmlElement).click(function(e){ var cam = lapi.getCamera(); cam.getProperty("Position").getParameter("x").value = in_clickValue[‘x’]; cam.getProperty("Position").getParameter("y").value = in_clickValue[‘y’]; cam.getProperty("Position").getParameter("z").value = in_clickValue[‘z’]; }) } var cam = lapi.getActiveScene().getCameras()[0]; cam.getProperty("Resolution").getParameter("width").value = 300; cam.getProperty("Lens").getParameter("zoom").value = 5; Play with camera settings

benefits disadvantages

Seriously, Lagoa is cool. The end

Add a comment

Related presentations

Presentación que realice en el Evento Nacional de Gobierno Abierto, realizado los ...

In this presentation we will describe our experience developing with a highly dyna...

Presentation to the LITA Forum 7th November 2014 Albuquerque, NM

Un recorrido por los cambios que nos generará el wearabletech en el futuro

Um paralelo entre as novidades & mercado em Wearable Computing e Tecnologias Assis...

Microsoft finally joins the smartwatch and fitness tracker game by introducing the...

Related pages

Yoga & Pilates Berlin Charlottenburg | Lagoa Yoga Berlin

Yoga, Pilates und Wellness für Frauen in Berlin Charlottenburg. Lagoa Yoga Berlin ist eine Oase für die Seele. Hier findest du Ruhe, Erholung und Energie.
Read more

Yoga & Pilates Kurse Berlin | Lagoa Yoga Berlin

Hier findest du aktuelle Kurse für Yoga, Pilates und DeepWork vom Yoga Studio Lagoa Yoga in Berlin-Charlottenburg | Kurse für Anfänger & Fortgeschrittene
Read more

Lagoa (Algarve) – Wikipedia

Lagoa ist eine Stadt und ein Kreis mit 7248 Einwohnern (Stand 30. Juni 2011) in der Region Algarve im Süden Portugals.
Read more

Portugal - Sehenswerte Orte - Lagoa

Lagoa, eine typische, kleine Provinzstadt, ist vor allem bekannt für ihre Weinproduktion, die ertragreichste der Algarve.
Read more

Lagoa Portugal - Algarve Portal

Lagoa, eine ländliche Stadt im Hinterland der Felsenalgarve, Portugal: Lage und Verkehrsanbindung, Sport- und Freizeitangebot, Einkaufstipps, lokale ...
Read more

Lagoa (Azoren) – Wikipedia

Basisdaten; Autonome Region: Azoren: Concelho: Lagoa: Koordinaten: 37.75-25.583333333333 Koordinaten: 37° 45′ N, 25° 35′ W: Einwohner: 14.430 (Stand: 30.
Read more


Read more

Overview | LAGOA

The cloud visualization and distribution platform for engineers and designers.
Read more

Lagoa, Algarve - Wikipedia, the free encyclopedia

Lagoa (Portuguese pronunciation: ) is a municipality in the former-district of Faro, in the Portuguese region of the Algarve. The population in 2011 was ...
Read more

LAGOA | Cloud-based 3D Design and Publishing

Cloud-based 3D Design and Publishing ... Create kinematic assemblies, renders, and photoreal interactive 3D experiences all in the browser.
Read more