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

Lagoa

Nov 28, 2014

Download

Technology

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.
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Page 1: Lagoa

Web-based 3D Solutions

Justine Żarna

LAGOA.COM

Page 2: Lagoa

Work routine?

Page 3: Lagoa

Create 3D model

Step 1● use enterprise desktop tool

like AutoCAD and upload your model to Lagoa

● grab model from website like GrabCad.com

● search Lagoa Asset Library for matching model

Page 4: Lagoa

Configure Lagoa scene

Step 2● apply materials, textures

● add lights, hdri environments

● set camera properties

● manipulate model: move, orbit, rotate, scale

Page 5: Lagoa

Check your render

Step 3● set output resolution

● save render

● render in background

Page 6: Lagoa

Iframe settings

Step 4● mark auto load scene

● display navigation tools

● enable rendering

● set privacy settings

● set version of your scene

Page 7: Lagoa

Start code in JavaScript

Step 5● add your iframe to html file

● let’s get fun started!

Page 8: Lagoa

Demo Time..

Źródło: wakpaper.com

Page 10: Lagoa

$(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

Page 11: Lagoa

Binding navigation tools

$('.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

Page 12: Lagoa

$('.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");

// 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 = mat.properties.getProperty("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 ); });

Work with meshes and materials

Page 13: Lagoa

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;

// expose all textures for( var i=0 ;i<textures.length; ++i){ tmpTexture = textures[i]; textureName = tmpTexture.properties.getParameter('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, tmpTexture.properties.getParameter('guid').value ); img.attr('src', imgUrl ); img.appendTo('#patterns'); } } }

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; }) }

Binding textures and apply them on materials

Page 14: Lagoa

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

Page 15: Lagoa

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

Page 16: Lagoa

http://hellinahandbasket.nethttp://www.pet-vice.com

benefits disadvantages

Page 17: Lagoa

Seriously, Lagoa is cool.

The end