Skip to content

Commit 62bbf1f

Browse files
JaimeTorrealbaJaimeTorrealba
authored
docs(app): 102 Add initial docs (#109)
* docs(app): 102 Add initial docs * docs: add rigid-body page
1 parent b06eea8 commit 62bbf1f

16 files changed

+5255
-6315
lines changed

‎docs/.eslintrc.json

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"extends": "@tresjs/eslint-config-vue"
3+
}

‎docs/.vitepress/config.ts

+110
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,110 @@
1+
import { defineConfig } from 'vitepress'
2+
import { resolve } from 'pathe'
3+
4+
const whitelist = ['TresCanvas', 'TresLeches', 'TresScene']
5+
6+
// https://vitepress.dev/reference/site-config
7+
export default defineConfig({
8+
title: 'Tres Rapier',
9+
description:
10+
'We`ll make you love physics again',
11+
head: [
12+
['link', { rel: 'icon', type: 'image/svg', href: '/favicon.svg' }],
13+
['meta', { name: 'theme-color', content: '#82DBC5' }],
14+
['meta', { name: 'twitter:card', content: 'summary_large_image' }],
15+
['meta', { name: 'twitter:site', content: '@tresjs_dev' }],
16+
['meta', { name: 'twitter:creator', content: '@tresjs_dev' }],
17+
['meta', { property: 'og:type', content: 'website' }],
18+
['meta', { property: 'og:site_name', content: 'rapier - TresJS' }],
19+
[
20+
'meta',
21+
{
22+
property: 'og:image',
23+
content:
24+
'https://repository-images.githubusercontent.com/571314349/10996566-7f70-473b-a8e5-4e56fc0ca850',
25+
},
26+
],
27+
[
28+
'meta',
29+
{
30+
property: 'twitter:image',
31+
content:
32+
'https://repository-images.githubusercontent.com/571314349/10996566-7f70-473b-a8e5-4e56fc0ca850',
33+
},
34+
],
35+
[
36+
'script',
37+
{
38+
'defer': 'true',
39+
'data-site': 'OWBUVCJK',
40+
'src': 'https://cdn.usefathom.com/script.js',
41+
},
42+
],
43+
],
44+
themeConfig: {
45+
logo: '/logo.svg',
46+
search: {
47+
provider: 'local',
48+
},
49+
// https://vitepress.dev/reference/default-theme-config
50+
nav: [
51+
{ text: 'Guide', link: '/guide/' },
52+
{ text: 'Examples', link: 'https://lab.tresjs.org/' },
53+
],
54+
55+
sidebar: [
56+
{
57+
text: 'Guide',
58+
items: [
59+
{ text: 'Introduction', link: '/guide/' },
60+
{ text: 'How does it work?', link: '/guide/how-does-it-work' },
61+
],
62+
},
63+
{
64+
text: 'Components',
65+
items: [
66+
{ text: 'Physics', link: '/components/physics' },
67+
{ text: 'RigidBody', link: '/components/rigid-body' },
68+
{ text: 'Collider', link: '/components/collider' },
69+
],
70+
},
71+
{
72+
text: 'Composables',
73+
items: [
74+
],
75+
},
76+
],
77+
78+
socialLinks: [
79+
{ icon: 'github', link: 'https://github.com/Tresjs/rapier' },
80+
{ icon: 'twitter', link: 'https://twitter.com/tresjs_dev' },
81+
{ icon: 'discord', link: 'https://discord.gg/UCr96AQmWn' },
82+
],
83+
},
84+
vite: {
85+
optimizeDeps: {
86+
exclude: ['vitepress'],
87+
include: ['three'],
88+
},
89+
server: {
90+
hmr: {
91+
overlay: false,
92+
},
93+
},
94+
resolve: {
95+
alias: {
96+
'@tresjs/rapier': resolve(__dirname, '../../dist/tresrapier.js'),
97+
},
98+
dedupe: ['three'],
99+
},
100+
},
101+
vue: {
102+
template: {
103+
compilerOptions: {
104+
isCustomElement: (tag: string) =>
105+
(tag.startsWith('Tres') && !whitelist.includes(tag))
106+
|| tag === 'primitive',
107+
},
108+
},
109+
},
110+
})

‎docs/.vitepress/theme/TresLayout.vue

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<script setup>
2+
import Theme from 'vitepress/theme'
3+
import LoveVueThreeJS from './components/LoveVueThreeJS.vue'
4+
5+
const { Layout } = Theme
6+
</script>
7+
8+
<template>
9+
<Layout>
10+
<template #home-hero-image>
11+
<LoveVueThreeJS />
12+
</template>
13+
</Layout>
14+
</template>

‎docs/.vitepress/theme/components/LoveVueThreeJS.vue

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
<script setup lang="ts">
2+
/// <reference types="vite-svg-loader" />
3+
</script>
4+
5+
<template>
6+
<div
7+
class="grid items-center w-full min-w-370px -translate-x-20px md:translate-x-20px h-full scale-75"
8+
>
9+
<div class="grid grid-cols-3 gap-8 overflow-hidden h-93px">
10+
<!-- <Triangle ref="triangleRef" />
11+
<SecondRow ref="secondRowRef" />
12+
<ThirdRow ref="thirdRowRef" /> -->
13+
</div>
14+
</div>
15+
</template>

‎docs/.vitepress/theme/index.ts

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
// https://vitepress.dev/guide/custom-theme
2+
import 'uno.css'
3+
import Theme from 'vitepress/theme'
4+
import './style.css'
5+
6+
import TresLayout from './TresLayout.vue'
7+
8+
export default {
9+
...Theme,
10+
Layout: TresLayout,
11+
enhanceApp(ctx) {
12+
Theme.enhanceApp(ctx)
13+
/* ctx.app.use(plausible) */
14+
},
15+
}

‎docs/.vitepress/theme/style.css

+72
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
:root {
2+
--vp-home-hero-name-color: #82dbc5;
3+
--vp-c-brand: #82dbc5;
4+
--vp-c-dark: #1f1f1e;
5+
}
6+
7+
/**
8+
* Component: Button
9+
* -------------------------------------------------------------------------- */
10+
11+
:root {
12+
--vp-button-brand-border: var(--vp-c-brand-light);
13+
--vp-button-brand-text: var(--vp-c-text-dark-1);
14+
--vp-button-brand-text: var(--vp-c-dark);
15+
--vp-button-brand-bg: var(--vp-c-brand);
16+
--vp-button-brand-hover-border: var(--vp-c-brand-light);
17+
--vp-button-brand-hover-text: var(--vp-c-text-dark-1);
18+
--vp-button-brand-hover-text: var(--vp-c-dark);
19+
--vp-button-brand-hover-bg: var(--vp-c-brand-light);
20+
--vp-button-brand-active-border: var(--vp-c-brand-light);
21+
--vp-button-brand-active-text: var(--vp-c-text-dark-1);
22+
--vp-button-brand-active-text: var(--vp-c-dark);
23+
--vp-button-brand-active-bg: var(--vp-button-brand-bg);
24+
25+
--vp-button-alt-border: var(--vp-c-gray-light-3);
26+
--vp-button-alt-text: var(--vp-c-text-light-1);
27+
--vp-button-alt-bg: var(--vp-c-gray-light-5);
28+
--vp-button-alt-hover-border: var(--vp-c-gray-light-3);
29+
--vp-button-alt-hover-text: var(--vp-c-text-light-1);
30+
--vp-button-alt-hover-bg: var(--vp-c-gray-light-4);
31+
--vp-button-alt-active-border: var(--vp-c-gray-light-3);
32+
--vp-button-alt-active-text: var(--vp-c-text-light-1);
33+
--vp-button-alt-active-bg: var(--vp-c-gray-light-3);
34+
--vp-button-alt-border: var(--vp-c-border);
35+
--vp-button-alt-text: var(--vp-c-neutral);
36+
--vp-button-alt-bg: var(--vp-c-mute);
37+
--vp-button-alt-hover-border: var(--vp-c-border);
38+
--vp-button-alt-hover-text: var(--vp-c-neutral);
39+
--vp-button-alt-hover-bg: var(--vp-c-mute-dark);
40+
--vp-button-alt-active-border: var(--vp-c-border);
41+
--vp-button-alt-active-text: var(--vp-c-neutral);
42+
--vp-button-alt-active-bg: var(--vp-c-mute-darker);
43+
44+
--vp-button-sponsor-border: var(--vp-c-gray-light-3);
45+
--vp-button-sponsor-text: var(--vp-c-text-light-2);
46+
}
47+
48+
.VPSidebar .link.active span {
49+
font-weight: bold;
50+
}
51+
52+
.vp-doc a {
53+
text-decoration: dashed;
54+
font-weight: bold;
55+
}
56+
57+
.VPButton.medium.brand {
58+
color: var(--vp-button-brand-text);
59+
}
60+
.VPButton.medium.alt {
61+
border-color: var(--vp-button-alt-border);
62+
color: var(--vp-button-alt-text);
63+
background-color: var(--vp-button-alt-bg);
64+
}
65+
66+
.demo-scene {
67+
height: auto;
68+
margin: 2rem 0;
69+
overflow: hidden;
70+
aspect-ratio: 16/9;
71+
border-radius: 8px;
72+
}

‎docs/components/collider.md

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
# Collider

‎docs/components/physics.md

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
# Physics

‎docs/components/rigid-body.md

+73
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
# RigidBody
2+
3+
:::info
4+
The information in this page is a summary of the RigidBody instance, please check the [complete documentation](https://rapier.rs/docs/user_guides/javascript/rigid_bodies) for more info
5+
:::
6+
7+
The real-time simulation of rigid-bodies subjected to forces and contacts is the main feature of a physics engine for video-games, robotics, or animation.
8+
9+
`@tresjs/rapier` provides a `RigidBody` component compatible with the `Tresjs` ecosystem, with the advantage of making the "bound" between the two worlds (physic world and our 3D scene).
10+
11+
## Basic usage
12+
13+
To use a `RigidBody` component, the best case is to import it from `@tresjs/rapier` and then pass as [slot](https://vuejs.org/guide/components/slots.html#scoped-slots) the element that you want to attach.
14+
15+
```html
16+
<RigidBody>
17+
<TresMesh :position="[0, 8, 0]">
18+
<TresTorusGeometry />
19+
<TresMeshNormalMaterial />
20+
</TresMesh>
21+
</RigidBody>
22+
```
23+
24+
## Types
25+
26+
We can specify what kind of `RigidBody` [type](https://rapier.rs/docs/user_guides/javascript/rigid_bodies#rigid-body-type). `Dynamic` is the default.
27+
28+
A basic floor example with type fixed:
29+
```html
30+
<RigidBody type="fixed">
31+
<TresMesh :position="[0, 0, 0]">
32+
<TresPlaneGeometry :args="[20, 20, 20]" :rotate-x="-Math.PI / 2" />
33+
<TresMeshBasicMaterial color="#f4f4f4" />
34+
</TresMesh>
35+
</RigidBody>
36+
```
37+
38+
## Inner Colliders
39+
40+
In addition to the [Colliders components](/components/collider), you can specify a set of pre-defined colliders in order to fit the mesh with the best shape possible.
41+
42+
A basic example, a ball falling down:
43+
```html
44+
<RigidBody collider="ball">
45+
<TresMesh :position="[0,7, 0]">
46+
<TresSphereGeometry />
47+
<TresMeshNormalMaterial />
48+
</TresMesh>
49+
</RigidBody>
50+
```
51+
52+
## InstanceMesh
53+
54+
You can use `RigidBody` with `TresInstancedMesh` too.
55+
56+
A basic example, with TresInstancedMesh:
57+
```html
58+
<RigidBody instanced collider="hull">
59+
<TresInstancedMesh ref="torusInstancedMesh" :args="[torusKnots, torusKnotsMaterial, 3]" />
60+
</RigidBody>
61+
```
62+
63+
## Applying forces
64+
65+
SOON
66+
67+
## Collisions
68+
69+
SOON
70+
71+
## Events
72+
73+
SOON

‎docs/guide/how-does-it-work.md

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
# How does it work?

‎docs/guide/index.md

+66
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
# Introduction
2+
3+
This library is based on [Rapier](https://rapier.rs/), which is a Rust library ported to JavaScript using WASM, [Rapier.js](https://github.com/dimforge/rapier.js/).
4+
5+
## Installation
6+
7+
::: code-group
8+
9+
```bash [pnpm]
10+
pnpm add @tresjs/rapier
11+
```
12+
13+
```bash [npm]
14+
npm install @tresjs/rapier
15+
16+
```
17+
18+
```bash [yarn]
19+
yarn add @tresjs/rapier
20+
```
21+
22+
:::
23+
24+
## Basic Usage
25+
26+
We need mainly 3 elements
27+
28+
1. An existing scene
29+
2. The `Physics` component who act as a wrapper
30+
3. At least one `RigidBody`
31+
32+
```vue{4,13-26}
33+
<script setup lang="ts" >
34+
import { TresCanvas } from '@tresjs/core'
35+
import { OrbitControls } from '@tresjs/cientos'
36+
import { Physics, RigidBody } from '@tresjs/rapier'
37+
</script>
38+
39+
<template>
40+
<TresCanvas v-bind="gl" window-size>
41+
<TresPerspectiveCamera :position="[11, 11, 11]" :look-at="[0, 0, 0]" />
42+
<OrbitControls />
43+
44+
<Suspense>
45+
<Physics>
46+
<RigidBody>
47+
<TresMesh :position="[0, 8, 0]">
48+
<TresTorusGeometry />
49+
<TresMeshNormalMaterial />
50+
</TresMesh>
51+
</RigidBody>
52+
<RigidBody type="fixed">
53+
<TresMesh :position="[0, 0, 0]">
54+
<TresPlaneGeometry :args="[20, 20, 20]" :rotate-x="-Math.PI / 2" />
55+
<TresMeshBasicMaterial color="#f4f4f4" />
56+
</TresMesh>
57+
</RigidBody>
58+
</Physics>
59+
</Suspense>
60+
</TresCanvas>
61+
</template>
62+
```
63+
64+
Under the hood the `Physics` components is creating a new world (the one the physics exist). Please check the [Physics docs](/components/physics) for more info.
65+
66+
Then we use the `RigidBody` for creating and "bound" our existing mesh into the two worlds (the physics world and our 3D world) after this applied the corresponded force. Please check the [RigidBody docs](/components/rigid-body) for more info.

0 commit comments

Comments
 (0)