Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

add physics example #270

Draft
wants to merge 2 commits into
base: master
Choose a base branch
from
Draft

add physics example #270

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
bfcd7d9
add physics example
vincentfretin Apr 10, 2021
757c67d
use physics master, workaround for naf schemas, add enter-room-btn, r…
vincentfretin May 13, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
4 changes: 4 additions & 0 deletions examples/index.html
View file
Open in desktop
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
241 changes: 241 additions & 0 deletions examples/physics.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,241 @@
<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>
// see issue https://github.com/networked-aframe/networked-aframe/issues/267
NAF.schemas.getComponentsOriginal = NAF.schemas.getComponents;
NAF.schemas.getComponents = (template) => {
if (!NAF.schemas.hasTemplate("#avatar-template")) {
// 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'
}
]
});
}

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

const components = NAF.schemas.getComponentsOriginal(template);
return components;
}
</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@master/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;
}

#enter-room-btn {
position: absolute;
cursor: pointer;
bottom: 50%;
left:50%;
background: #fff;
height: 40px;
width: 100px;
border-radius: 30px;
}
</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>
</head>
<body>
<a-scene
physics="driver: ammo; debug: false"
networked-scene="
room: dev;
debug: true;
adapter: wseasyrtc;
connectOnLoad: false;
">
<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" color="#F00" position="0 1 0"
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.</p>
</div>
<button id="enter-room-btn" type="button">Enter Room</button>

<!-- 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>
// Called by Networked-Aframe when connected to server
function onConnect () {
console.log("onConnect", new Date());
}

document.addEventListener('DOMContentLoaded', () => {
const scene = document.querySelector('a-scene');
const enterRoomBtn = document.getElementById('enter-room-btn');
enterRoomBtn.addEventListener('click', () => {
scene.emit('connect');
enterRoomBtn.style.display = 'none';
});
});
</script>
</body>
</html>