Old school D3 from simpler times

All examples By author By category About

bryik

Full window Github gist

Anisotropic Filtering With and Without

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="https://aframe.io/releases/0.3.0/aframe.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/bryik/aframe-bmfont-text-component/dist/aframe-bmfont-text-component.min.js"></script>

<a-scene antialias="true">
  
  <a-entity position="0 1.6 -2">
    <a-entity camera look-controls wasd-controls></a-entity>
  </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(https://cdn.rawgit.com/bryik/aframe-scatter-component/master/assets/grid.png); repeat: 100 100"></a-plane>
  
  <a-sky color="grey"></a-sky>
</a-scene>

<script>
  var plane = document.querySelector('#planeWithAA');
  var planeMesh = plane.getObject3D('mesh');
  
  var texture = new THREE.TextureLoader().load('https://cdn.rawgit.com/bryik/aframe-scatter-component/master/assets/grid.png');
  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;
</script>

xxxxxxxxxx
 
<!DOCTYPE html>
<meta charset="utf-8">
<script src="https://aframe.io/releases/0.3.0/aframe.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/bryik/aframe-bmfont-text-component/dist/aframe-bmfont-text-component.min.js"></script>
​
<a-scene antialias="true">
  <!-- Camera -->
  <a-entity position="0 1.6 -2">
    <a-entity camera look-controls wasd-controls></a-entity>
  </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(https://cdn.rawgit.com/bryik/aframe-scatter-component/master/assets/grid.png); repeat: 100 100"></a-plane>
  
  <a-sky color="grey"></a-sky>
</a-scene>
​
<script>
  var plane = document.querySelector('#planeWithAA');
  var planeMesh = plane.getObject3D('mesh');
  
  var texture = new THREE.TextureLoader().load('https://cdn.rawgit.com/bryik/aframe-scatter-component/master/assets/grid.png');
  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;
</script>
    

Updated missing url https://rawgit.com/bryik/aframe-bmfont-text-component/master/dist/aframe-bmfont-text-component.min.js to https://cdn.jsdelivr.net/gh/bryik/aframe-bmfont-text-component/dist/aframe-bmfont-text-component.min.js

https://aframe.io/releases/0.3.0/aframe.min.js

https://rawgit.com/bryik/aframe-bmfont-text-component/master/dist/aframe-bmfont-text-component.min.js