jyuko/navmesh.html

## navmesh.html
<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="Content-Language" content="ja">
    <title>NavMesh</title>
    <script src="https://aframe.io/releases/0.7.1/aframe.min.js"></script>
    <script src="https://cdn.rawgit.com/donmccurdy/aframe-extras/v3.12.4/dist/aframe-extras.min.js"></script>
    <script src="https://unpkg.com/aframe-particle-system-component@1.0.x/dist/aframe-particle-system-component.min.js"></script>
    <script src="https://cdn.rawgit.com/kripken/ammo.js/dcab07bf0e7f2b4b64c01dc45da846344c8f50be/builds/ammo.js"></script>
    <script src="https://cdn.rawgit.com/takahirox/aframe-outline/v1.1.1/build/aframe-outline.min.js"></script>
    <script src="https://cdn.rawgit.com/takahirox/a-mmd/v1.0.3/build/a-mmd.min.js"></script>
  </head>
  <body>
    <script "text/javascript">
      AFRAME.registerComponent('nav-pointer', {
         init: function () {
          const el = this.el;
          // On click, send the NPC to the target location.
          el.addEventListener('click', (e) => {
            const ctrlEl = el.sceneEl.querySelector('[nav-controller]');
            ctrlEl.setAttribute('nav-controller', {
              active: true,
              destination: e.detail.intersection.point
            });
          });
          // When hovering on the nav mesh, show a green cursor.
          el.addEventListener('mouseenter', () => {
            el.setAttribute('material', {color: 'green'});
          });
          el.addEventListener('mouseleave', () => {
            el.setAttribute('material', {color: 'crimson'})
          });

          // Refresh the raycaster after models load.
          el.sceneEl.addEventListener('object3dset', () => {
            this.el.components.raycaster.refreshObjects();
          });
        }
      });
    </script>

    <a-scene stats antialias="true">
      <a-entity id="camera"
        camera="userHeight: 1.6"
        position="0 0 0"
        look-controls>
        <a-cursor nav-pointer
          raycaster="objects: [nav-mesh]">
        </a-cursor>
      </a-entity>

      <a-entity light="type: ambient; color: #fff"></a-entity>
      <a-sky color="#191970"></a-sky>

      <!-- Particle System -->
      <a-entity id="snow" particle-system="preset: snow; color: #eee; particleCount: 5000"></a-entity>

      <!-- Scene -->
      <a-entity gltf-model="scene.gltf"></a-entity>
      <!-- Nav Mesh -->
      <a-entity gltf-model="navmesh.gltf" nav-mesh></a-entity>

      <a-entity mmd="">
        <a-entity id="korokoro"
          mmd-model="model: コロコロ/コロコロ.pmx;"
          nav-controller="speed: 1.5"
          position="0 5 -5" scale="0.1 0.1 0.1">
        </a-entity>
      </a-entity>
    </a-scene>
  </body>
</html>
	<!DOCTYPE HTML>
	<html>
	<head>
	<meta charset="utf-8">
	<meta http-equiv="Content-Language" content="ja">
	<title>NavMesh</title>
	<script src="https://aframe.io/releases/0.7.1/aframe.min.js"></script>
	<script src="https://cdn.rawgit.com/donmccurdy/aframe-extras/v3.12.4/dist/aframe-extras.min.js"></script>
	<script src="https://unpkg.com/aframe-particle-system-component@1.0.x/dist/aframe-particle-system-component.min.js"></script>
	<script src="https://cdn.rawgit.com/kripken/ammo.js/dcab07bf0e7f2b4b64c01dc45da846344c8f50be/builds/ammo.js"></script>
	<script src="https://cdn.rawgit.com/takahirox/aframe-outline/v1.1.1/build/aframe-outline.min.js"></script>
	<script src="https://cdn.rawgit.com/takahirox/a-mmd/v1.0.3/build/a-mmd.min.js"></script>
	</head>
	<body>
	<script "text/javascript">
	AFRAME.registerComponent('nav-pointer', {
	init: function () {
	const el = this.el;
	// On click, send the NPC to the target location.
	el.addEventListener('click', (e) => {
	const ctrlEl = el.sceneEl.querySelector('[nav-controller]');
	ctrlEl.setAttribute('nav-controller', {
	active: true,
	destination: e.detail.intersection.point
	});
	});
	// When hovering on the nav mesh, show a green cursor.
	el.addEventListener('mouseenter', () => {
	el.setAttribute('material', {color: 'green'});
	});
	el.addEventListener('mouseleave', () => {
	el.setAttribute('material', {color: 'crimson'})
	});

	// Refresh the raycaster after models load.
	el.sceneEl.addEventListener('object3dset', () => {
	this.el.components.raycaster.refreshObjects();
	});
	}
	});
	</script>

	<a-scene stats antialias="true">
	<a-entity id="camera"
	camera="userHeight: 1.6"
	position="0 0 0"
	look-controls>
	<a-cursor nav-pointer
	raycaster="objects: [nav-mesh]">
	</a-cursor>
	</a-entity>

	<a-entity light="type: ambient; color: #fff"></a-entity>
	<a-sky color="#191970"></a-sky>

	<!-- Particle System -->
	<a-entity id="snow" particle-system="preset: snow; color: #eee; particleCount: 5000"></a-entity>

	<!-- Scene -->
	<a-entity gltf-model="scene.gltf"></a-entity>
	<!-- Nav Mesh -->
	<a-entity gltf-model="navmesh.gltf" nav-mesh></a-entity>

	<a-entity mmd="">
	<a-entity id="korokoro"
	mmd-model="model: コロコロ/コロコロ.pmx;"
	nav-controller="speed: 1.5"
	position="0 5 -5" scale="0.1 0.1 0.1">
	</a-entity>
	</a-entity>
	</a-scene>
	</body>
	</html>