Skip to content

Commit 5959766

Browse files
committed
Two first pages should be okay
1 parent bd1f67e commit 5959766

File tree

3 files changed

+208
-1
lines changed

3 files changed

+208
-1
lines changed

docs/.vitepress/config/fr.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -60,7 +60,7 @@ export const frConfig: LocaleSpecificConfig<DefaultTheme.Config> = {
6060
text: 'Exemples',
6161
collapsed: true,
6262
items: [
63-
{ text: 'Orbit Controls', link: '/fr/examples/orbit-controls' },
63+
{ text: 'Controles des orbites', link: '/fr/examples/orbit-controls' },
6464
{ text: 'Animations de base', link: '/fr/examples/basic-animations' },
6565
{ text: 'Groupes', link: '/fr/examples/groups' },
6666
{ text: 'Charger des textures', link: '/fr/examples/load-textures' },

docs/fr/guide/getting-started.md

+93
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,93 @@
1+
# Installation
2+
3+
Apprennez comment installer TresJS
4+
5+
::: code-group
6+
7+
```bash [pnpm]
8+
pnpm add three @tresjs/core
9+
```
10+
11+
```bash [npm]
12+
npm install three @tresjs/core
13+
```
14+
15+
```bash [yarn]
16+
yarn add three @tresjs/core
17+
```
18+
19+
:::
20+
21+
> Meilleur usage avec Vue 3.x et Composition API
22+
23+
## Typescript
24+
25+
TresJS est écrit en TypeScript et est entièrement typé. Si vous utilisez Typescript, vous pouvez obtenir tous les bénéfices du typage. Assurez vous seulement d'installer les types pour Three.
26+
27+
::: code-group
28+
29+
```bash [npm]
30+
npm install @types/three -D
31+
```
32+
33+
```bash [yarn]
34+
yarn add @types/three -D
35+
```
36+
37+
```bash [pnpm]
38+
pnpm add @types/three -D
39+
```
40+
41+
:::
42+
43+
## Commencer
44+
45+
Vous pouvez installer TresJS comme n'importe quel autre plugin Vue
46+
47+
```ts
48+
import { createApp } from 'vue'
49+
import Tres from '@tresjs/core'
50+
import App from './App.vue'
51+
52+
export const app = createApp(App)
53+
54+
app.use(Tres)
55+
app.mount('#app')
56+
```
57+
58+
Ou vous pouvez l'utilisez directement dans vos composants
59+
60+
```vue
61+
<script setup lang="ts">
62+
import { TresCanvas } from '@tresjs/core'
63+
</script>
64+
65+
<template>
66+
<TresCanvas>
67+
<!-- Votre scene ici -->
68+
</TresCanvas>
69+
</template>
70+
```
71+
72+
::: tip
73+
Ceci est recommandé pour des raisons de performances et de taille du projet. Le tree-shaking fonctionnera mieux et seuls les composants utilisé seront importés.
74+
:::
75+
76+
## Vite
77+
78+
Depuis que v2 es un moteur de rendu personnalisé, il nous faut informer le `vue-compiler` de votre application que les composants de Tres sont autorisés à être importé sans retourné l'erreur : `[Vue warn]: Failed to resolve component`.
79+
80+
Vous devez seulement ajouter ceci à votre `vite.config.ts` dans le plugin Vue:
81+
82+
```ts
83+
import { templateCompilerOptions } from '@tresjs/core'
84+
85+
export default defineConfig({
86+
plugins: [
87+
vue({
88+
// Other config
89+
...templateCompilerOptions
90+
}),
91+
]
92+
})
93+
```

docs/fr/guide/index.md

+114
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,114 @@
1+
# Introduction
2+
3+
<ClientOnly>
4+
<div style="aspect-ratio: 16/9; height: auto; margin: 2rem 0; border-radius: 8px; overflow:hidden;">
5+
<FirstScene />
6+
</div>
7+
</ClientOnly>
8+
9+
::: code-group
10+
11+
```bash [npm]
12+
npm install @tresjs/core three
13+
```
14+
15+
```bash [yarn]
16+
yarn add @tresjs/core three
17+
```
18+
19+
```bash [pnpm]
20+
pnpm add @tresjs/core three
21+
```
22+
23+
:::
24+
25+
## Typescript
26+
27+
TresJS est écrit en TypeScript et est entièrement typé. Si vous utilisez Typescript, vous pouvez obtenir tous les bénéfices du typage. Assurez vous seulement d'installer les types pour Three.
28+
29+
::: code-group
30+
31+
```bash [npm]
32+
npm install @types/three -D
33+
```
34+
35+
```bash [yarn]
36+
yarn add @types/three -D
37+
```
38+
39+
```bash [pnpm]
40+
pnpm add @types/three -D
41+
```
42+
43+
:::
44+
45+
## Vite
46+
47+
Si vous utilisez Vite, vous devez ajoutez ceci à votre `vite.config.ts`:
48+
49+
```ts
50+
import { templateCompilerOptions } from '@tresjs/core'
51+
52+
export default defineConfig({
53+
plugins: [
54+
vue({
55+
// Other config
56+
...templateCompilerOptions
57+
}),
58+
],
59+
}),
60+
```
61+
62+
Ceci est nécessaire afin que le compilateur de template fonctionne avec le moteur de rendu personnalisé et ne renvoi pas d'erreur dans la console. Pour plus d'informations, consultez [cet article](/guide/troubleshooting.html).
63+
64+
## Essayer en ligne
65+
66+
### Sandbox
67+
68+
Vous pouvez essayer TresJS en ligne en utilisant la [sandbox](https://play.tresjs.org/) officielle. Testez ici:
69+
70+
<iframe src="https://play.tresjs.org/" class="w-full rounded shadow-lg outline-none border-none aspect-4/3"></iframe>
71+
72+
### StackBlitz
73+
74+
Nous avons un nouveau starter [StackBlitz](https://stackblitz.com/) afin d'essayer TresJS en ligne. Testez ici:
75+
76+
![](/stackblitz-starter.png)
77+
78+
<StackBlitzEmbed projectId="tresjs-basic" />
79+
80+
## Playground
81+
82+
Nous avons aussi un playground où vous pouvez essayer TresJS en ligne. Testez [ici](https://playground.tresjs.org/).
83+
84+
![](/playground.png)
85+
86+
## Motivation
87+
88+
[ThreeJS](https://threejs.org/) est une bibliothèque merveilleuse pour faire de superbe site en 3D avec WebGL. C'est aussi une bibliothèque en perpétuelle évolution ce qui rend complèxe le maintien de wrapper comme [TroisJS](https://troisjs.github.io/) afin de le garder constamment à jour.
89+
90+
L'écosytème React possède un impréssionnant **moteur de rendu personnalisé** appellé [React-three-fiber](https://docs.pmnd.rs/react-three-fiber) qui permet de créer des scènes 3D, de manière déclarative, avec des composants réutilisables et autonomes qui réagissent aux états.
91+
92+
Dans ma recherche d'un outil similaire dans l'écosytème VueJS j'ai trouvé cette incroyable bibliothèque nommée [Lunchbox](https://github.com/breakfast-studio/lunchboxjs) qui fonctionne de la même manière que R3F, il propose un [moteur de rendu personnalisé Vue3](https://vuejs.org/api/custom-renderer.html). Je contribue aussi à améliorer cette bibliothèque afin qu'elle devienne aussi mature et complète que R3F.
93+
94+
Le seul problème est que mélanger les compilateurs et les moteurs de rendu en Vue3 est un sujet sur lequel la communauté Vue travail encore. Pour plus d'informations voir [ici](https://github.com/vuejs/vue-loader/pull/1645).
95+
96+
```ts
97+
// Example Vite setup
98+
import { createApp } from 'vue'
99+
import { createApp as createLunchboxApp } from 'lunchboxjs'
100+
import App from './App.vue'
101+
import LunchboxApp from './LunchboxApp.vue'
102+
103+
// html app
104+
const app = createApp(App)
105+
app.mount('#app')
106+
107+
// lunchbox app
108+
const lunchboxApp = createLunchboxApp(LunchboxApp)
109+
// assuming there's an element with ID `lunchbox` in your HTML app
110+
lunchboxApp.mount('#lunchbox')
111+
```
112+
113+
Ces deux bibliothèque m'ont donc inspiré pour créer un moteur de rendu personnalisé Vue pour ThreeJS. Il s'appel **TresJS v2**.
114+

0 commit comments

Comments
 (0)