jyuko/physics.html

## physics.html
<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="Content-Language" content="ja">
    <title>Physics</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">
      var _shot = function () {
        var camera = document.getElementById('camera');
        var rotation = camera.getAttribute('rotation');
        var position = camera.getAttribute('position');
        var velocity = new THREE.Vector3();
        var speed = 50;
        velocity.x = Math.sin(rotation.y * Math.PI / 180) * Math.cos(rotation.x * Math.PI / 180) * -speed;
        velocity.y = Math.sin(rotation.x * Math.PI / 180) * speed;
        velocity.z = Math.cos(rotation.y * Math.PI / 180) * Math.cos(rotation.x * Math.PI / 180) * -speed;

        var ball = document.createElement('a-entity');
        ball.setAttribute('id', 'ball');
        ball.setAttribute('velocity', velocity);
        ball.setAttribute('position', position);
        ball.setAttribute('geometry', 'primitive: sphere; radius: 0.5');
        ball.setAttribute('dynamic-body', 'mass: 1');

        var scene = document.querySelector('a-scene');
        scene.appendChild(ball);
      };

      var _init = function () {
        var targetElement = document.getElementById('コロコロ');
        targetElement.addEventListener('collide', function (e) {
          if (e.detail.body.el.id === 'ball'){
            var effect = document.createElement('a-entity');
            var position = e.detail.body.el.getAttribute('position');
            effect.setAttribute('position', position);
            effect.setAttribute('particle-system', 'color: #EF0000,#44CC00; particleCount: 500; duration: 0.2;');

            var scene = document.querySelector('a-scene');
            scene.appendChild(effect);
          };
        });
      };

      document.addEventListener('DOMContentLoaded', _init);
      document.addEventListener('keydown', _shot);
    </script>

    <a-scene stats antialias="true" physics="debug: false;">
      <a-entity id="camera"
        camera="userHeight: 1.6"
        position="0 0 0"
        look-controls>
      </a-entity>

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

      <a-ocean depth="100" width="100" density="50" speed="5" position="0 -5 0"></a-ocean>
      <a-entity id="board"
        geometry="primitive: box; depth: 10; height: 0.5; width: 40" material="color: #deb887"
        static-body
        position="0 0 -20">
      </a-entity>

      <a-entity mmd="">
        <a-entity id="コロコロ"
          mmd-model="model: コロコロ/コロコロ.pmx;"
          dynamic-body="shape: box; mass: 10"
          position="0 5 -20" scale="0.5 0.5 0.5">
        </a-entity>
        <a-entity id="シルシル"
          mmd-model="model: シルシル/シルシル.pmx;"
          dynamic-body="shape: box; mass: 10"
          position="-10 5 -20" scale="0.5 0.5 0.5">
        </a-entity>
        <a-entity id="ピクピク"
          mmd-model="model: ピクピク/ピクピク.pmx;"
          dynamic-body="shape: box; mass: 10"
          position="10 5 -20" scale="0.5 0.5 0.5">
        </a-entity>
      </a-entity>
    </a-scene>
  </body>
</html>
	<!DOCTYPE HTML>
	<html>
	<head>
	<meta charset="utf-8">
	<meta http-equiv="Content-Language" content="ja">
	<title>Physics</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">
	var _shot = function () {
	var camera = document.getElementById('camera');
	var rotation = camera.getAttribute('rotation');
	var position = camera.getAttribute('position');
	var velocity = new THREE.Vector3();
	var speed = 50;
	velocity.x = Math.sin(rotation.y * Math.PI / 180) * Math.cos(rotation.x * Math.PI / 180) * -speed;
	velocity.y = Math.sin(rotation.x * Math.PI / 180) * speed;
	velocity.z = Math.cos(rotation.y * Math.PI / 180) * Math.cos(rotation.x * Math.PI / 180) * -speed;

	var ball = document.createElement('a-entity');
	ball.setAttribute('id', 'ball');
	ball.setAttribute('velocity', velocity);
	ball.setAttribute('position', position);
	ball.setAttribute('geometry', 'primitive: sphere; radius: 0.5');
	ball.setAttribute('dynamic-body', 'mass: 1');

	var scene = document.querySelector('a-scene');
	scene.appendChild(ball);
	};

	var _init = function () {
	var targetElement = document.getElementById('コロコロ');
	targetElement.addEventListener('collide', function (e) {
	if (e.detail.body.el.id === 'ball'){
	var effect = document.createElement('a-entity');
	var position = e.detail.body.el.getAttribute('position');
	effect.setAttribute('position', position);
	effect.setAttribute('particle-system', 'color: #EF0000,#44CC00; particleCount: 500; duration: 0.2;');

	var scene = document.querySelector('a-scene');
	scene.appendChild(effect);
	};
	});
	};

	document.addEventListener('DOMContentLoaded', _init);
	document.addEventListener('keydown', _shot);
	</script>

	<a-scene stats antialias="true" physics="debug: false;">
	<a-entity id="camera"
	camera="userHeight: 1.6"
	position="0 0 0"
	look-controls>
	</a-entity>

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

	<a-ocean depth="100" width="100" density="50" speed="5" position="0 -5 0"></a-ocean>
	<a-entity id="board"
	geometry="primitive: box; depth: 10; height: 0.5; width: 40" material="color: #deb887"
	static-body
	position="0 0 -20">
	</a-entity>

	<a-entity mmd="">
	<a-entity id="コロコロ"
	mmd-model="model: コロコロ/コロコロ.pmx;"
	dynamic-body="shape: box; mass: 10"
	position="0 5 -20" scale="0.5 0.5 0.5">
	</a-entity>
	<a-entity id="シルシル"
	mmd-model="model: シルシル/シルシル.pmx;"
	dynamic-body="shape: box; mass: 10"
	position="-10 5 -20" scale="0.5 0.5 0.5">
	</a-entity>
	<a-entity id="ピクピク"
	mmd-model="model: ピクピク/ピクピク.pmx;"
	dynamic-body="shape: box; mass: 10"
	position="10 5 -20" scale="0.5 0.5 0.5">
	</a-entity>
	</a-entity>
	</a-scene>
	</body>
	</html>