Skip to content

Commit de03d0a

Browse files
aranegaaranega
authored
Merge pull request #591 from MetaCell/feature/GEP-119
GEP-199 Create a new example project only for the new 3D canvas
2 parents ff36df6 + 37eac60 commit de03d0a

File tree

17 files changed

+3928
-0
lines changed

17 files changed

+3928
-0
lines changed

‎examples/vite-3DCanvas-react-app/.gitignore‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2+
3+
# dependencies
4+
/node_modules
5+
/.pnp
6+
.pnp.js
7+
8+
# testing
9+
/coverage
10+
11+
# production
12+
/build
13+
14+
# misc
15+
.DS_Store
16+
.env.local
17+
.env.development.local
18+
.env.test.local
19+
.env.production.local
20+
21+
npm-debug.log*
22+
yarn-debug.log*
23+
yarn-error.log*
24+
25+
# Logs
26+
logs
27+
*.log
28+
npm-debug.log*
29+
yarn-debug.log*
30+
yarn-error.log*
31+
pnpm-debug.log*
32+
lerna-debug.log*
33+
34+
node_modules
35+
dist
36+
dist-ssr
37+
*.local
38+
39+
# Editor directories and files
40+
.vscode/*
41+
!.vscode/extensions.json
42+
.idea
43+
.DS_Store
44+
*.suo
45+
*.ntvs*
46+
*.njsproj
47+
*.sln
48+
*.sw?

‎examples/vite-3DCanvas-react-app/README.md‎

Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
# React + TypeScript + Vite
2+
3+
This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
4+
5+
Currently, two official plugins are available:
6+
7+
- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) for Fast Refresh
8+
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
9+
10+
## React Compiler
11+
12+
The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see [this documentation](https://react.dev/learn/react-compiler/installation).
13+
14+
## Expanding the ESLint configuration
15+
16+
If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
17+
18+
```js
19+
export default defineConfig([
20+
globalIgnores(['dist']),
21+
{
22+
files: ['**/*.{ts,tsx}'],
23+
extends: [
24+
// Other configs...
25+
26+
// Remove tseslint.configs.recommended and replace with this
27+
tseslint.configs.recommendedTypeChecked,
28+
// Alternatively, use this for stricter rules
29+
tseslint.configs.strictTypeChecked,
30+
// Optionally, add this for stylistic rules
31+
tseslint.configs.stylisticTypeChecked,
32+
33+
// Other configs...
34+
],
35+
languageOptions: {
36+
parserOptions: {
37+
project: ['./tsconfig.node.json', './tsconfig.app.json'],
38+
tsconfigRootDir: import.meta.dirname,
39+
},
40+
// other options...
41+
},
42+
},
43+
])
44+
```
45+
46+
You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:
47+
48+
```js
49+
// eslint.config.js
50+
import reactX from 'eslint-plugin-react-x'
51+
import reactDom from 'eslint-plugin-react-dom'
52+
53+
export default defineConfig([
54+
globalIgnores(['dist']),
55+
{
56+
files: ['**/*.{ts,tsx}'],
57+
extends: [
58+
// Other configs...
59+
// Enable lint rules for React
60+
reactX.configs['recommended-typescript'],
61+
// Enable lint rules for React DOM
62+
reactDom.configs.recommended,
63+
],
64+
languageOptions: {
65+
parserOptions: {
66+
project: ['./tsconfig.node.json', './tsconfig.app.json'],
67+
tsconfigRootDir: import.meta.dirname,
68+
},
69+
// other options...
70+
},
71+
},
72+
])
73+
```

‎examples/vite-3DCanvas-react-app/eslint.config.js‎

Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
import js from '@eslint/js'
2+
import globals from 'globals'
3+
import reactHooks from 'eslint-plugin-react-hooks'
4+
import reactRefresh from 'eslint-plugin-react-refresh'
5+
import tseslint from 'typescript-eslint'
6+
import json from 'eslint-plugin-json'
7+
8+
9+
export default tseslint.config(
10+
{ ignores: [
11+
'dist',
12+
'node_modules',
13+
'.yalc',
14+
'src/rest/*' // do not lint generated code
15+
] },
16+
{
17+
extends: [js.configs.recommended, ...tseslint.configs.recommended],
18+
files: ['**/*.{ts,tsx,js,jsx}'],
19+
languageOptions: {
20+
ecmaVersion: "latest",
21+
globals: globals.browser,
22+
sourceType: "module"
23+
},
24+
plugins: {
25+
'react-hooks': reactHooks,
26+
'react-refresh': reactRefresh,
27+
},
28+
rules: {
29+
...reactHooks.configs.recommended.rules,
30+
'react-refresh/only-export-components': [
31+
'warn',
32+
{ allowConstantExport: true },
33+
],
34+
indent: ["error", 2, {
35+
SwitchCase: 1,
36+
}],
37+
curly: "error", // enforce braces for one-line blocks
38+
"no-tabs": "error", // enforce no tabs
39+
"no-console": ["warn", {
40+
allow: ["warn", "error", "debug"],
41+
}],
42+
"consistent-return": "warn", // https://eslint.org/docs/latest/rules/consistent-return
43+
"prefer-arrow-callback": ["warn"],
44+
"object-curly-spacing": ["warn", "always"], // enforce consistent spacing inside braces
45+
"func-style": "off", // function expressions or arrow functions are equally valid
46+
"no-unneeded-ternary": "warn", // disallow unnecessary ternary expressions
47+
// React rules: https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules
48+
"react/prop-types": "off", // PropTypes are not forced
49+
"react/forbid-prop-types": "off", // all PropTypes are allowed
50+
"react-hooks/rules-of-hooks": "error", // https://react.dev/reference/rules/rules-of-hooks
51+
"react-hooks/exhaustive-deps": "warn", // Hooks dependency array, sometimes it's better to ignore
52+
},
53+
},
54+
{ // Linting for tsconfig.json files allows comments
55+
files: ["tsconfig*.json"],
56+
plugins: { json },
57+
processor: "json/json",
58+
rules: {
59+
...json.configs["recommended-with-comments"].rules,
60+
}
61+
},
62+
{ // Linting for *.json files do now allow comments
63+
files: ["**/*.json"],
64+
ignores: ["tsconfig*.json"],
65+
plugins: { json },
66+
processor: "json/json",
67+
rules: {
68+
...json.configs.recommended.rules,
69+
}
70+
}
71+
)

‎examples/vite-3DCanvas-react-app/index.html‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>3D Canvas</title>
8+
</head>
9+
<body>
10+
<div id="root"></div>
11+
<script type="module" src="/src/main.tsx"></script>
12+
</body>
13+
</html>

‎examples/vite-3DCanvas-react-app/package.json‎

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
{
2+
"name": "vite-3dcanvas-react-app",
3+
"private": true,
4+
"version": "0.0.0",
5+
"type": "module",
6+
"scripts": {
7+
"prepare": "yarn link:yalc",
8+
"link:yalc": "yalc link @metacell/geppetto-meta-core && yalc link @metacell/geppetto-meta-ui && yalc link @metacell/geppetto-meta-client",
9+
"dev": "vite",
10+
"build": "tsc -b && vite build",
11+
"lint": "eslint .",
12+
"lint-fix": "eslint . --fix",
13+
"preview": "vite preview"
14+
},
15+
"dependencies": {
16+
"@emotion/react": "^11.13.3",
17+
"@emotion/styled": "^11.13.0",
18+
"@material-ui/core": "^4.12.4",
19+
"@metacell/geppetto-meta-client": "^3.0.0-alpha.8",
20+
"@metacell/geppetto-meta-core": "^3.0.0-alpha.8",
21+
"@metacell/geppetto-meta-ui": "^3.0.0-alpha.8",
22+
"@mui/material": "^6.1.1",
23+
"@react-three/drei": "^10.0.0",
24+
"@react-three/fiber": "^8.17.14",
25+
"@types/three": "^0.173.0",
26+
"patch-package": "^8.0.0",
27+
"react": "^18.3.1",
28+
"react-color": "^2.19.3",
29+
"react-dom": "^18.3.1",
30+
"react-resize-detector": "^9.0.0",
31+
"three": "^0.173.0",
32+
"three-legacy": "npm:three@^0.118.0"
33+
},
34+
"devDependencies": {
35+
"@eslint/js": "^9.9.0",
36+
"@types/react": "^18.3.3",
37+
"@types/react-dom": "^18.3.0",
38+
"@vitejs/plugin-react": "^4.3.1",
39+
"eslint": "^9.9.0",
40+
"eslint-plugin-json": "^4.0.1",
41+
"eslint-plugin-react-hooks": "^5.1.0-rc.0",
42+
"eslint-plugin-react-refresh": "^0.4.9",
43+
"globals": "^15.9.0",
44+
"less": "^4.2.0",
45+
"sass": "^1.32.12",
46+
"typescript": "^5.5.4",
47+
"typescript-eslint": "^8.4.0",
48+
"vite": "^5.4.3",
49+
"vite-plugin-commonjs": "^0.10.4",
50+
"yalc": "^1.0.0-pre.53"
51+
},
52+
"browserslist": {
53+
"production": [
54+
">0.2%",
55+
"not dead",
56+
"not op_mini all"
57+
],
58+
"development": [
59+
"last 1 chrome version",
60+
"last 1 firefox version",
61+
"last 1 safari version"
62+
]
63+
},
64+
"resolutions": {
65+
"bezier-js": "4.0.3"
66+
}
67+
}

‎examples/vite-3DCanvas-react-app/setup.bash‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
#!/usr/bin/env bash
2+
3+
# Trick to have folder relative to the script, not CWD
4+
PARENT_PATH=$( cd "$(dirname "${BASH_SOURCE[0]}")" ; pwd -P )
5+
cd "${PARENT_PATH}"
6+
7+
# Install the libraries (if not already installed)
8+
GEPPETTO_JS="../../geppetto.js"
9+
10+
(bash "${GEPPETTO_JS}/dev-install.bash")
11+
12+
yarn install

‎examples/vite-3DCanvas-react-app/src/App.tsx‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
import { ThemeProvider, createTheme } from '@mui/material/styles';
2+
import CssBaseline from '@mui/material/CssBaseline';
3+
import { Box } from '@mui/material';
4+
import Canvas3DExample from "./components/viewers/Canvas3DExample";
5+
6+
const lightTheme = createTheme({
7+
palette: {
8+
mode: 'light',
9+
},
10+
});
11+
12+
function App() {
13+
return (
14+
<ThemeProvider theme={lightTheme}>
15+
<CssBaseline />
16+
<Box
17+
sx={{
18+
display: "flex",
19+
position: "relative",
20+
width: "100vw",
21+
height: "100vh",
22+
padding: 0,
23+
margin: 0,
24+
}}
25+
>
26+
<Canvas3DExample />
27+
</Box>
28+
</ThemeProvider>
29+
);
30+
}
31+
32+
export default App;

‎examples/vite-3DCanvas-react-app/src/components/viewers/Canvas3DExample.tsx‎

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
import React, { useRef, useState } from "react";
2+
import { Canvas3D } from "@metacell/geppetto-meta-ui/3d-canvas/Canvas3D";
3+
import { Box } from "@mui/material";
4+
import { useFrame } from "@react-three/fiber";
5+
import { Mesh } from "three";
6+
import * as THREE from "three";
7+
8+
console.log("three.js for 3D view", THREE.REVISION);
9+
10+
const classes = {
11+
container: {
12+
height: "100%",
13+
width: "100%",
14+
display: "flex",
15+
alignItems: "stretch",
16+
},
17+
};
18+
19+
function MyRotatingBox() {
20+
const myMesh = useRef<Mesh>();
21+
const [active, setActive] = useState(false);
22+
23+
useFrame(({ clock }) => {
24+
const a = clock.getElapsedTime();
25+
myMesh.current.rotation.x = a;
26+
});
27+
28+
return (
29+
<mesh
30+
scale={active ? 1.5 : 1}
31+
onClick={() => setActive(!active)}
32+
ref={myMesh}
33+
>
34+
<boxGeometry />
35+
<meshPhongMaterial color="royalblue" />
36+
</mesh>
37+
);
38+
}
39+
40+
const Canvas3DExample: React.FC = () => {
41+
return (
42+
<Box className={classes.container} style={classes.container}>
43+
<Canvas3D frameloop={"always"}>
44+
<MyRotatingBox />
45+
</Canvas3D>
46+
</Box>
47+
);
48+
};
49+
50+
export default Canvas3DExample;

0 commit comments

Comments
 (0)