< Back to Examples

Switch Material

Open Scene in the Editor

Use the buttons to set the value of a switch, which will assign a material to the model.

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'>
		<input onclick='set_default()' type='button' value='Set Default'>
		<input onclick='set_metallic()' type='button' value='Set Metallic'>
		<input onclick='set_uv_map()' type='button' value='Set Uv Map'>
	</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/8fed4100-15b8-4a93-8cfa-548c22d3619c?timestamp=1563362367' id='polygonjs-embed-iframe'></iframe>

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

			// optional: since this material refers to an env map,
			// it may take some time before being displayed
			// we can therefore force it to cook
			// so that it will be ready when we assign it
			var material_metal = embed.scene().node('/geo1/material_metal')
			material_metal.force_cook()
		})

		// set the value of the switch node controlling which material is assigned
		function set_switch(value){
			if(switch_node){
				switch_node.param('input').set(value)
			}
		}
		function set_default(){ set_switch(0) }
		function set_metallic(){ set_switch(1) }
		function set_uv_map(){ set_switch(2) }
	</script>

</body>

</html>

< Back to Examples