super-standard.html

---
layout: a-frame
title: A-Frame Physical Shaders
description: Complex physical materials in A-Frame
image: 'https://cdn-images-1.medium.com/max/1600/1*5C86U-OZFf4eYedrsIEjqw.png'
scripts: [
	# A-Frame
	'https://cdn.rawgit.com/AdaRoseEdwards/aframe/fast/dist/aframe.min.fast.js',

	# Required to load the demo model
	'https://cdn.rawgit.com/mrdoob/three.js/r79/examples/js/loaders/BinaryLoader.js',

	# Ocean primitive which relies on the new materials
	'https://samsunginter.net/a-frame-components/dist/ocean-plane.js'
]
---

<a-scene inspector stats physics="debug: true">

	<!-- Assets -->

	<a-assets>
		<img id="sky" src="https://img.gs/bbdkhfbzkk/2048x1024,stretch/https://samsunginternet.github.io/a-frame-demos/a-frame-assets/sky/CGSkies_0347_free.jpg" />

		<img id="ao" src="a-frame-assets/ninja/ao.jpg" />
		<img id="displacement" src="a-frame-assets/ninja/displacement.jpg" />
		<img id="normal" src="a-frame-assets/ninja/normal.jpg" />
		<a-asset-item id="ninja-model-js" src="a-frame-assets/ninja/NinjaLo_bin.js"></a-asset-item>

		<img id="water-normal" src="https://raw.githubusercontent.com/mrdoob/three.js/dev/examples/textures/waternormals.jpg" crossorigin="anonymous" />
	</a-assets>

	<a-entity light position="1 1 1"></a-entity>
	<a-entity light="type: ambient; intensity: 0.1;"></a-entity>

	<a-entity look-controls position="0 1 -5">
		<a-entity
			position="-2 0 0"
			scale="0.15 0.15 0.15"
			material="color: lightpink; metalness:0.8; roughness:0.3; sphericalEnvMap: #sky; envMapIntensity: 1.0; normalMap: #normal; normalScale: 1 -1; ambientOcclusionMapIntensity: 1.0; ambientOcclusionMap: #ao; displacementMap: #displacement; displacementScale: 2.436143; displacementBias: -0.428408;"
			bin-model="#ninja-model-js"
		></a-entity>

		<a-entity
			geometry="primitive: torusKnot;"
			position="2 0 0"
			material="color: lightpink; metalness:0.8; roughness:0.2; sphericalEnvMap: #sky;"
		></a-entity>
	</a-entity>

	<a-ocean-plane material="normalMap: #water-normal; sphericalEnvMap: #sky;" position="0 -2 0" ></a-ocean-plane>

	<a-sky src="#sky"></a-sky>

</a-scene>

<!-- Pay no attention to that man behind the curtain -->
<!-- This script is just loading the demo model from the THREE.js examples -->

<script>

AFRAME.registerComponent('bin-model', {

	dependencies: ['material'],

	schema: {
		type: 'src'
	},

	init: function () {
		this.loader = new THREE.BinaryLoader();
		this.el.getOrCreateObject3D('mesh', THREE.Mesh);
	},

	update: function () {
		var url = this.data;
		var self = this;
		var el = this.el;

		if (!url) { return; }

		this.loader.load( url, function( geometry ) {
			var mesh = el.getObject3D('mesh');
			geometry.faceVertexUvs[ 1 ] = geometry.faceVertexUvs[ 0 ]; // 2nd set of UVs required for aoMap
			mesh.geometry = geometry;
			mesh.material = el.components.material.material;
			el.emit('model-loaded', {format: 'bin', model: mesh});
		} );
	},

	remove: function () {
		if (this.getObject3D('mesh')) this.el.removeObject3D('mesh');
	}
});
</script>