Skip to content

Commit 8e95c7c

Browse files
brianzinnbrianzinn
committed
CRA v3 + react-babylonjs v2 (using new declarative physics)
1 parent b839cad commit 8e95c7c

27 files changed

+421
-605
lines changed

‎babylonjs-site/.gitignore‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,9 @@
1-
# See https://help.github.com/ignore-files/ for more about ignoring files.
1+
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
22

33
# dependencies
44
/node_modules
5+
/.pnp
6+
.pnp.js
57

68
# testing
79
/coverage

‎babylonjs-site/README.md‎

Lines changed: 24 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,25 @@
1-
This is a Create React App site modified to include TypeScript and BabylonJS.
1+
This project was bootstrapped with Create React App (CRA) v3 site and then BabylonJS was added.
2+
For TypeScript
3+
```bash
4+
npx create-react-app babylonjs-app --typescript
5+
```
26

3-
This project was bootstrapped with [Create React App](https://github.com/facebookincubator/create-react-app).
7+
BabylonJS was added using 'react-babylonjs'
8+
```bash
9+
yarn add react-babylonjs
10+
yarn add @babylonjs/core
11+
yarn add @babylonjs/gui
12+
yarn add @babylonjs/loaders
13+
```
14+
15+
All of the code for the site is in `/src/App.tsx`
16+
17+
In the project directory, you can run:
18+
19+
### `npm start` / `yarn start`
20+
21+
Runs the app in the development mode.<br>
22+
Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
23+
24+
The page will reload if you make edits.<br>
25+
You will also see any lint errors in the console.

‎babylonjs-site/package.json‎

Lines changed: 38 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -1,47 +1,49 @@
11
{
22
"name": "babylonjs-site",
3-
"version": "0.1.0",
43
"homepage": "https://brianzinn.github.io/create-react-app-typescript-babylonjs",
4+
"version": "0.1.0",
55
"private": true,
66
"dependencies": {
7-
"babylonjs": "3.3.0-beta.1",
8-
"babylonjs-gui": "3.3.0-beta.1",
9-
"bootstrap": "^4.1.3",
7+
"@babylonjs/core": "^4.0.3",
8+
"@babylonjs/gui": "^4.0.3",
9+
"@babylonjs/loaders": "^4.0.3",
1010
"cannon": "^0.6.2",
11-
"gh-pages": "^1.0.0",
12-
"react": "^15.6.1",
13-
"react-babylonjs": "^0.1.3",
14-
"react-dom": "^15.6.1",
15-
"react-hot-loader": "^1.3.1",
16-
"react-redux": "^5.0.7",
17-
"react-router-dom": "^4.2.2",
18-
"react-router-redux": "5.0.0-alpha.9",
19-
"react-scripts-ts": "^2.17.0",
20-
"reactstrap": "^6.3.1",
21-
"redux": "^3.7.2",
22-
"redux-saga": "^0.15.6",
23-
"todomvc-app-css": "^2.1.0",
24-
"typescript": "2.9.2"
11+
"react": "^16.9.0",
12+
"react-babylonjs": "^2.0.1",
13+
"react-dom": "^16.9.0",
14+
"react-reconciler": "^0.22.2",
15+
"react-scripts": "3.1.1",
16+
"typescript": "3.6.3"
17+
},
18+
"devDependencies": {
19+
"@types/cannon": "^0.1.4",
20+
"@types/jest": "24.0.18",
21+
"@types/node": "12.7.5",
22+
"@types/react": "16.9.2",
23+
"@types/react-dom": "16.9.0",
24+
"gh-pages": "^2.1.1"
2525
},
2626
"scripts": {
27-
"predeploy": "npm run build",
28-
"deploy": "gh-pages -d build",
29-
"start": "react-scripts-ts start",
30-
"build": "react-scripts-ts build",
31-
"test": "react-scripts-ts test --env=jsdom",
32-
"eject": "react-scripts-ts eject"
27+
"start": "react-scripts start",
28+
"build": "react-scripts build",
29+
"test": "react-scripts test",
30+
"eject": "react-scripts eject",
31+
"predeploy": "yarn build",
32+
"deploy": "gh-pages -d build"
3333
},
34-
"devDependencies": {
35-
"@types/cannon": "^0.1.0",
36-
"@types/classnames": "^2.2.3",
37-
"@types/jest": "^21.1.0",
38-
"@types/node": "^8.0.30",
39-
"@types/react": "^16.0.5",
40-
"@types/react-dom": "^15.5.4",
41-
"@types/react-hot-loader": "^3.0.4",
42-
"@types/react-redux": "^6.0.6",
43-
"@types/react-router-dom": "^4.3.0",
44-
"@types/react-router-redux": "^5.0.15",
45-
"@types/reactstrap": "^6.0.2"
34+
"eslintConfig": {
35+
"extends": "react-app"
36+
},
37+
"browserslist": {
38+
"production": [
39+
">0.2%",
40+
"not dead",
41+
"not op_mini all"
42+
],
43+
"development": [
44+
"last 1 chrome version",
45+
"last 1 firefox version",
46+
"last 1 safari version"
47+
]
4648
}
4749
}

‎babylonjs-site/public/index.html‎

Lines changed: 18 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,23 @@
1-
<!doctype html>
1+
<!DOCTYPE html>
22
<html lang="en">
33
<head>
4-
<meta charset="utf-8">
5-
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
6-
<meta name="theme-color" content="#000000">
4+
<meta charset="utf-8" />
5+
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1" />
7+
<meta name="theme-color" content="#000000" />
8+
<meta
9+
name="description"
10+
content="Web site created using create-react-app"
11+
/>
12+
<link rel="apple-touch-icon" href="logo192.png" />
713
<!--
8-
manifest.json provides metadata used when your web app is added to the
9-
homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
14+
manifest.json provides metadata used when your web app is installed on a
15+
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
1016
-->
11-
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
12-
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
17+
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
18+
<style type="text/css">
19+
@import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css);
20+
</style>
1321
<!--
1422
Notice the use of %PUBLIC_URL% in the tags above.
1523
It will be replaced with the URL of the `public` folder during the build.
@@ -19,12 +27,10 @@
1927
work correctly both with client-side routing and a non-root public URL.
2028
Learn how to configure a non-root public URL by running `npm run build`.
2129
-->
22-
<title>React App</title>
30+
<title>'react-babylonjs' + TypeScript</title>
2331
</head>
2432
<body>
25-
<noscript>
26-
You need to enable JavaScript to run this app.
27-
</noscript>
33+
<noscript>You need to enable JavaScript to run this app.</noscript>
2834
<div id="root"></div>
2935
<!--
3036
This HTML file is a template.

‎babylonjs-site/public/logo192.png‎

5.22 KB
Loading

‎babylonjs-site/public/logo512.png‎

9.44 KB
Loading

‎babylonjs-site/public/manifest.json‎

Lines changed: 14 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,11 +4,21 @@
44
"icons": [
55
{
66
"src": "favicon.ico",
7-
"sizes": "192x192",
8-
"type": "image/png"
9-
}
7+
"sizes": "64x64 32x32 24x24 16x16",
8+
"type": "image/x-icon"
9+
},
10+
{
11+
"src": "logo192.png",
12+
"type": "image/png",
13+
"sizes": "192x192"
14+
},
15+
{
16+
"src": "logo512.png",
17+
"type": "image/png",
18+
"sizes": "512x512"
19+
}
1020
],
11-
"start_url": "./index.html",
21+
"start_url": ".",
1222
"display": "standalone",
1323
"theme_color": "#000000",
1424
"background_color": "#ffffff"

‎babylonjs-site/public/robots.txt‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
# https://www.robotstxt.org/robotstxt.html
2+
User-agent: *

‎babylonjs-site/src/App.css‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
.App {
2+
text-align: center;
3+
}
4+
5+
.App-logo {
6+
animation: App-logo-spin infinite 20s linear;
7+
height: 40vmin;
8+
pointer-events: none;
9+
}
10+
11+
.App-header {
12+
background-color: #282c34;
13+
min-height: 100vh;
14+
display: flex;
15+
flex-direction: column;
16+
align-items: center;
17+
justify-content: center;
18+
font-size: calc(10px + 2vmin);
19+
color: white;
20+
}
21+
22+
.App-link {
23+
color: #61dafb;
24+
}
25+
26+
#sample-canvas {
27+
width: 50%;
28+
}
29+
30+
@keyframes App-logo-spin {
31+
from {
32+
transform: rotate(0deg);
33+
}
34+
to {
35+
transform: rotate(360deg);
36+
}
37+
}

‎babylonjs-site/src/App.test.tsx‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import React from 'react';
2+
import ReactDOM from 'react-dom';
3+
import App from './App';
4+
5+
it('renders without crashing', () => {
6+
const div = document.createElement('div');
7+
ReactDOM.render(<App />, div);
8+
ReactDOM.unmountComponentAtNode(div);
9+
});

0 commit comments

Comments
 (0)