cannon-es-control
Version:
A lightweight 3D physics engine written in JavaScript with control system tools
229 lines (200 loc) • 5.65 kB
HTML
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" />
<title>cannon-es</title>
<meta name="description" content="A lightweight 3D physics engine written in JavaScript." />
<meta name="keywords" content="javascript,three.js,physics,ammo.js,engine,cannon-es,cannon" />
<meta name="author" content="Stefan Hedman (schteppe)" />
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700" rel="stylesheet" />
<style type="text/css">
body {
margin: 0;
padding: 0;
font-family: 'Open Sans', monospace;
color: #111;
}
h1 {
font-size: 4rem;
margin: 0.75rem 0;
}
h2 {
font-size: 2rem;
margin: 0.75rem 0;
}
a {
color: #351fad;
}
a:hover {
color: #0366d6;
}
.title .github {
display: inline-block;
margin-left: 1.5rem;
width: 2.3rem;
height: 2.3rem;
}
@media (max-width: 480px) {
h1 {
font-size: 2.2rem;
}
.title .github {
margin-left: 0.5rem;
width: 1.3rem;
height: 1.3rem;
}
}
.description {
margin-bottom: 4rem;
}
.container {
margin: 0 auto;
max-width: 64rem;
padding: 1rem 1rem 5rem;
}
.examples {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
grid-gap: 2rem;
}
.image {
display: block;
}
.image:hover {
opacity: 0.9;
}
.image img {
width: 100%;
border-radius: 3px;
}
.caption {
display: flex;
align-items: flex-end;
justify-content: space-between;
margin-top: 0.3rem;
}
.caption .name {
display: inline-block;
font-size: 1.1rem;
line-height: 1;
text-decoration: none;
}
.caption .name:hover {
text-decoration: underline;
}
.caption .name::first-letter {
text-transform: capitalize;
}
.caption .github {
width: 1.3rem;
height: 1.3rem;
}
.github img {
width: 100%;
}
</style>
<script type="module">
const examples = [
'threejs_cloth',
'threejs_fps',
'threejs_mousepick',
'threejs_voxel_fps',
'threejs',
'worker',
'worker_sharedarraybuffer',
'body_types',
'bounce',
'bunny',
'callbacks',
'canvas_interpolation',
'collision_filter',
'collisions',
'compound',
'constraints',
'container',
'convex',
'events',
'fixed_rotation',
'friction',
'heightfield',
'hinge',
'impulses',
'jenga',
'pile',
'performance',
'ragdoll',
'raycast_vehicle',
'rigid_vehicle',
'shapes',
'simple_friction',
'single_body_on_plane',
'sleep',
'sph',
'split_solver',
'spring',
'stacks',
'tear',
'trigger',
'trimesh',
'tween',
]
function exampleTemplate(name) {
const readableName = replaceAll(name, '_', ' ')
.replace('threejs', 'three.js')
.replace('sharedarraybuffer', 'SharedArrayBuffer')
return `
<div class="example">
<a href="examples/${name}" class="image"><img src="screenshots/${name}.png" /></a>
<div class="caption">
<a href="examples/${name}" class="name">${readableName}</a>
<a
href="https://github.com/react-spring/cannon-es/blob/master/examples/${name}.html"
target="_blank"
class="github"
title="View source code on GitHub"
><img src="examples/icons/github.svg" alt="GitHub"
/></a>
</div>
</div>
`
}
// generate and add the examples to the DOM
const examplesContainer = document.querySelector('.examples')
examples.forEach((example) => {
const exampleNode = createElementFromHTML(exampleTemplate(example))
examplesContainer.appendChild(exampleNode)
})
function createElementFromHTML(htmlString) {
const div = document.createElement('div')
div.innerHTML = htmlString.trim()
return div.firstChild
}
function replaceAll(string, find, replace) {
return string.split(find).join(replace)
}
</script>
</head>
<body>
<div class="container">
<h1 class="title">
cannon-es
<a
href="https://github.com/react-spring/cannon-es"
target="_blank"
class="github"
title="View source code for cannon-es on GitHub"
>
<img src="examples/icons/github.svg" alt="GitHub" />
</a>
</h1>
<div class="description">A lightweight and simple 3D physics engine for the web.</div>
<h2>
<a href="docs/index.html">Documentation</a>
</h2>
<br />
<h2>Examples</h2>
<div class="examples"></div>
</div>
</body>
</html>