< Back to Examples

Table Configurator

Open Scene in the Editor

This is very similar to the Texture switch example, except that there are 2 sliders to control the dimensions of the table.

HTML + Javascript

<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/polygonjs-embed@1.0.7/dist/polygonjs-embed.min.js"></script>
<style>
	html, body {height:100%;margin:0px} iframe {display:block;}
	.controls-container {position:absolute;text-align:center;margin:auto;display:block;width:100%}
</style>
</head>

<body>

	<div class='controls-container'>
		<div>
			<label> Dimensions: </label>
			<input type='range' min='1' max='2' step='0.05' oninput='change_width(this.value)' value='1.6'>
			<input type='range' min='1' max='2' step='0.05' oninput='change_depth(this.value)' value='1.4'>
		</div>
		<div>
			<label> Feet: </label>
			<input onclick='set_switch_feet(0)' type='button' id='feet_0' value='Set Feet Mat 1'>
			<input onclick='set_switch_feet(1)' type='button' id='feet_1' value='Set Feet Mat 2'>
			<input onclick='set_switch_feet(2)' type='button' id='feet_2' value='Set Feet Mat 3'>
		</div>
		<div>
			<label> Table: </label>
			<input onclick='set_switch_table(0)' type='button' id='table_0' value='Set Mat 1'>
			<input onclick='set_switch_table(1)' type='button' id='table_1' value='Set Mat 2'>
			<input onclick='set_switch_table(2)' type='button' id='table_2' value='Set Mat 3'>
		</div>
	</div>

	<!-- load your scene iframe (from the editor, go to File->Embed, and toggle on 'Embed Active' to see your iframe html) -->
	<iframe frameborder='0' height='100%' width='100%' src='https://embed.polygonjs.com/scenes/7ca38c41-08ad-4b5e-b49e-d71142df4a59?timestamp=1563363420' id='polygonjs-embed-iframe'></iframe>

	<script>
		// create the embed, with the id of the iframe
		var embed = new POLY.Embed('polygonjs-embed-iframe')
		var scene;
		var transform_size_node;
		var switch_feet_node;
		var switch_table_node;
		embed.on('scene_load', ()=>{
			scene = embed.scene()

			// get the nodes we need
			transform_size_node = scene.node('/table/transform_table_size')
			switch_feet_node = scene.node('/table/switch_feet')
			switch_table_node = scene.node('/table/switch_table')

			// optional: since each material will load a texture,
			// we may prefer to load them as soon as, so that the user
			// does not have to wait on first material switch
			var mat_names = ['mesh_standard_light', 'mesh_standard_orange', 'mesh_standard_dark']
			for(var mat_name of mat_names){
				var node = scene.node('/MAT/'+mat_name)
				node.force_cook()
			}

			// set the textures we see first
			set_switch_feet(0)
			set_switch_table(0)
		})

		// set the value of the switch node controlling which material is assigned
		function set_switch_feet(value){
			activate_buttons('feet')
			if(switch_feet_node){
				switch_feet_node.param('input').set(value)
				document.getElementById('feet_'+value).disabled = true
			}
		}
		function set_switch_table(value){
			activate_buttons('table')
			if(switch_table_node){
				switch_table_node.param('input').set(value)
				document.getElementById('table_'+value).disabled = true
			}
		}
		function change_width(value){
			if(transform_size_node){
				transform_size_node.param('sx').set(value)
			}
		}
		function change_depth(value){
			if(transform_size_node){
				transform_size_node.param('sz').set(value)
			}
		}
		function activate_buttons(prefix){
			for(var i of [0,1,2]){
				document.getElementById(prefix+'_'+i).disabled = false
			}
		}
	</script>

</body>

</html>

< Back to Examples