Skip to content

Instantly share code, notes, and snippets.



Last active Dec 4, 2019
What would you like to do?
Anisotropic Filtering With and Without
license: mit

Anisotropic filtering really helps with grid textures, but right now the only way to use it in A-Frame is to muck about with three.js.

<!DOCTYPE html>
<meta charset="utf-8">
<script src=""></script>
<script src=""></script>
<a-scene antialias="true">
<!-- Camera -->
<a-entity position="0 1.6 -2">
<a-entity camera look-controls wasd-controls></a-entity>
<a-entity bmfont-text="color: black; text: Aniosotropy = 16" position="-2.55 2.5 -4"></a-entity>
<a-plane id="planeWithAA" position="-50 -1.5 0" rotation="-90 0 0" height="100" width="100" material=""></a-plane>
<a-entity bmfont-text="color: black; text: Aniosotropy = 1" position="1 2.5 -4"></a-entity>
<a-plane position="50 -1.5 0" rotation="-90 0 0" height="100" width="100" material="src: url(; repeat: 100 100"></a-plane>
<a-sky color="grey"></a-sky>
var plane = document.querySelector('#planeWithAA');
var planeMesh = plane.getObject3D('mesh');
var texture = new THREE.TextureLoader().load('');
texture.wrapS = THREE.RepeatWrapping;
texture.wrapT = THREE.RepeatWrapping;
texture.anisotropy = 16;
texture.repeat.set(100, 100);
var material = new THREE.MeshBasicMaterial({map: texture});
planeMesh.material = material;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment