Skip to content

Commit

Permalink
add physics example
Browse files Browse the repository at this point in the history
  • Loading branch information
@vincentfretin
vincentfretin committed May 13, 2021
1 parent 747dfa4 commit bfcd7d9
Show file tree
Hide file tree
Showing 2 changed files with 213 additions and 0 deletions.
4 changes: 4 additions & 0 deletions examples/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -69,6 +69,10 @@ <h1>Networked-Aframe Examples</h1>
<a href="ownership-transfer.html">Ownership Transfer</a>
<span>Demonstrates transfering ownership of entities</span>
</div>
<div>
<a href="physics.html">Physics (modified version of "Ownership Transfer" with physics)</a>
<span>Demonstrates use of physics</span>
</div>
<div>
<a href="adapter-test/">Adapter Test</a>
<span>Use this page to test new network adapters</span>
Expand Down
209 changes: 209 additions & 0 deletions examples/physics.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,209 @@
<html>
<head>
<meta charset="utf-8">
<title>Dev Example — Networked-Aframe</title>
<meta name="description" content="Dev Example — Networked-Aframe">

<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.3.0/socket.io.slim.js"></script>
<script src="/easyrtc/easyrtc.js"></script>
<script src="/dist/networked-aframe.js"></script>
<script src="https://mixedreality.mozilla.org/ammo.js/builds/ammo.wasm.js"></script>
<script src="https://cdn.jsdelivr.net/gh/n5ro/aframe-physics-system@v4.0.1/dist/aframe-physics-system.js"></script>
<!--
This example is a modified version of ownership-transfer.html
You can compare the two files to easily see what changes you need to do to add physics.
See ammo driver documentation at https://github.com/n5ro/aframe-physics-system/blob/master/AmmoDriver.md
To use with super-hands, you currently need the fork https://github.com/diarmidmackenzie/aframe-super-hands-component
and use on your hand (see tracked-controllers.html example)
ammo-body="type: kinematic; emitCollisionEvents: true; disableCollision: true"
ammo-shape="fit: manual; type:sphere; sphereRadius: 0.02"
super-hands="colliderEvent: collidestart;
colliderEventProperty: targetEl;
colliderEndEvent: collideend;
colliderEndEventProperty: targetEl"
-->

<style>
.controls {
position: absolute;
width: 100%;
display: flex;
flex: 1;
justify-content: center;
flex-direction: row;
top: 0;
}

.controls p {
font-family: monospace;
color: white;
}
</style>

<script src="https://unpkg.com/aframe-randomizer-components@^3.0.1/dist/aframe-randomizer-components.min.js"></script>
<!--<script src="https://unpkg.com/aframe-particle-system-component@1.0.5/dist/aframe-particle-system-component.min.js"></script>-->
<script src="https://cdn.jsdelivr.net/gh/oneWaveAdrian/aframe-particle-system-component@aframe-1.2.0-upgrade/dist/aframe-particle-system-component.min.js"></script>
<script src="/js/spawn-in-circle.component.js"></script>
<script src="/js/spawner.component.js"></script>
<script src="/js/toggle-ownership.component.js"></script>
</head>
<body>
<a-scene
physics="driver: ammo; debug: false"
networked-scene="
room: dev;
debug: true;
adapter: wseasyrtc;
">
<a-assets>

<img id="grid" src="https://img.gs/bbdkhfbzkk/stretch/https://i.imgur.com/25P1geh.png" crossorigin="anonymous">
<img id="sky" src="https://i.imgur.com/WqlqEkq.jpg" crossorigin="anonymous" />

<!-- Templates -->

<!-- Avatar -->
<template id="avatar-template">
<a-entity class="avatar">
<a-sphere class="head"
scale="0.45 0.5 0.4"
></a-sphere>
<a-entity class="face"
position="0 0.05 0"
>
<a-sphere class="eye"
color="#efefef"
position="0.16 0.1 -0.35"
scale="0.12 0.12 0.12"
>
<a-sphere class="pupil"
color="#000"
position="0 0 -1"
scale="0.2 0.2 0.2"
></a-sphere>
</a-sphere>
<a-sphere class="eye"
color="#efefef"
position="-0.16 0.1 -0.35"
scale="0.12 0.12 0.12"
>
<a-sphere class="pupil"
color="#000"
position="0 0 -1"
scale="0.2 0.2 0.2"
></a-sphere>
</a-sphere>
</a-entity>
</a-entity>
</template>

<template id="cube-template">
<a-entity>
<a-box class="cube" toggle-ownership color="#F00"
ammo-body="type: dynamic" ammo-shape="type: box"
></a-box>
</a-entity>
</template>

<!-- /Templates -->
</a-assets>

<a-entity id="player"
networked="template:#avatar-template;attachTemplateToLocal:false;"
camera
position="0 1.6 0"
spawn-in-circle="radius:3"
spawner="template:#cube-template"
wasd-controls look-controls
>
<a-box class="arm" rotation="-10 10 0" position="0.3 -0.3 0" width="0.1" height="0.1" depth="1.5" color="#F00"
ammo-body="type: kinematic"
ammo-shape="type: box"
></a-box>
<a-sphere class="head"
visible="false"
random-color
></a-sphere>
</a-entity>

<a-box ammo-body="type: static" ammo-shape="type: box" material="color:#774411" height="0.1" width="10" depth="10" position="0 0.1 0"></a-box>
<a-box ammo-body="type: static" ammo-shape="type: box" material="color:#774411" height="3" width="10" depth="0.1" position="0 1.5 5"></a-box>
<a-entity position="0 0 0"
geometry="primitive: plane; width: 10000; height: 10000;" rotation="-90 0 0"
material="src: #grid; repeat: 10000 10000; transparent: true; metalness:0.6; roughness: 0.4; sphericalEnvMap: #sky;"></a-entity>

<a-entity light="color: #ccccff; intensity: 1; type: ambient;" visible=""></a-entity>
<a-entity light="color: #ffaaff; intensity: 1.5" position="5 5 5"></a-entity>

<a-sky src="#sky" rotation="0 -90 0"></a-sky>
<a-entity id="particles" particle-system="preset: snow"></a-entity>
</a-scene>

<div class="controls">
<p>Press space to spawn a cube. Press enter to take ownership of all cubes.</p>
</div>

<!-- GitHub Corner. -->
<a href="https://github.com/networked-aframe/networked-aframe" class="github-corner">
<svg width="80" height="80" viewBox="0 0 250 250" style="fill:#222; color:#fff; position: absolute; top: 0; border: 0; right: 0;">
<path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path>
</svg>
</a>
<style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}
</style>

<script>
// On mobile remove elements that are resource heavy
var isMobile = AFRAME.utils.device.isMobile();

if (isMobile) {
var particles = document.getElementById('particles');
particles.parentNode.removeChild(particles);
}
</script>

<script>
// Define custom schema for syncing avatar color, set by random-color
NAF.schemas.add({
template: '#avatar-template',
components: [
'position',
'rotation',
{
selector: '.head',
component: 'material',
property: 'color'
}
]
});

NAF.schemas.add({
template: '#cube-template',
components: [
"position",
{
selector: '.cube',
component: 'rotation'
},
{
selector: '.cube',
component: 'material',
property: 'color'
},
{
selector: '.cube',
component: 'toggle-ownership',
property: 'direction'
}
]
});

// Called by Networked-Aframe when connected to server
function onConnect () {
console.log("onConnect", new Date());
}
</script>
</body>
</html>

0 comments on commit bfcd7d9

Please sign in to comment.