Web-based 3D Solutions Justine Żarna LAGOA.COM
Nov 28, 2014
Web-based 3D Solutions
Justine Żarna
LAGOA.COM
Work routine?
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
Configure Lagoa scene
Step 2● apply materials, textures
● add lights, hdri environments
● set camera properties
● manipulate model: move, orbit, rotate, scale
Check your render
Step 3● set output resolution
● save render
● render in background
Iframe settings
Step 4● mark auto load scene
● display navigation tools
● enable rendering
● set privacy settings
● set version of your scene
Start code in JavaScript
Step 5● add your iframe to html file
● let’s get fun started!
Demo Time..
Źródło: wakpaper.com
https://github.com/lagoa/API-Samples/
$(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
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
$('.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
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
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
http://hellinahandbasket.nethttp://www.pet-vice.com
benefits disadvantages
Seriously, Lagoa is cool.
The end