├── repos ├── core │ ├── _envsNext.js │ ├── package.json │ ├── index.js │ └── constants.js ├── web │ ├── public │ │ └── images │ │ │ ├── grid.png │ │ │ └── scene.jpg │ ├── pages │ │ └── index.js │ ├── components │ │ └── Preload.js │ ├── package.json │ ├── babel.config.js │ └── next.config.js └── client │ ├── utils │ ├── index.js │ ├── __tests__ │ │ └── coords.spec.js │ └── coords.js │ ├── package.json │ ├── index.js │ ├── views │ └── SceneView.js │ └── babylon.js ├── config ├── jest │ └── cssTransform.js └── index.js ├── setupTests.js ├── jest.config.js ├── LICENSE ├── package.json ├── babel.config.js ├── README.md └── .gitignore /repos/core/_envsNext.js: -------------------------------------------------------------------------------- 1 | import config from 'next/config' 2 | 3 | module.exports = config().publicRuntimeConfig 4 | -------------------------------------------------------------------------------- /repos/web/public/images/grid.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ecoinomist/babylon-next/HEAD/repos/web/public/images/grid.png -------------------------------------------------------------------------------- /repos/web/public/images/scene.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ecoinomist/babylon-next/HEAD/repos/web/public/images/scene.jpg -------------------------------------------------------------------------------- /config/jest/cssTransform.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | process () { 3 | return 'module.exports = {};' 4 | }, 5 | getCacheKey () { 6 | return 'cssTransform' 7 | }, 8 | } 9 | -------------------------------------------------------------------------------- /repos/core/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "core", 3 | "version": "0.0.0", 4 | "private": true, 5 | "dependencies": { 6 | "react": "16.13.1", 7 | "react-dom": "16.13.1" 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /repos/client/utils/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * COMMON BABYLON HELPERS ===================================================== 3 | * ============================================================================= 4 | */ 5 | export * from './coords' 6 | -------------------------------------------------------------------------------- /setupTests.js: -------------------------------------------------------------------------------- 1 | // optional: configure or set up a testing framework before each test 2 | // if you delete this file, remove `setupFilesAfterEnv` from `jest.config.js` 3 | // learn more: https://github.com/testing-library/jest-dom 4 | import '@testing-library/jest-dom/extend-expect' 5 | -------------------------------------------------------------------------------- /repos/client/utils/__tests__/coords.spec.js: -------------------------------------------------------------------------------- 1 | import { Vector3 } from '../../babylon' 2 | import { v3 } from '../coords' 3 | 4 | describe(`${v3.name}`, () => { 5 | it(`returns correct Vector3 for left handed system with y axis up`, () => { 6 | expect(v3([0, 0, 1])).toEqual(new Vector3(0, 1, 0)) 7 | }) 8 | }) 9 | -------------------------------------------------------------------------------- /repos/core/index.js: -------------------------------------------------------------------------------- 1 | export * from './constants' 2 | 3 | /** 4 | * EXPORTS ===================================================================== 5 | * Modules' Exposing API - to enable consistent and maintainable app integration 6 | * ============================================================================= 7 | */ 8 | 9 | /* Activated Modules */ 10 | const coreModules = [ 11 | ] 12 | 13 | export default coreModules 14 | -------------------------------------------------------------------------------- /repos/client/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "client", 3 | "version": "0.0.0", 4 | "private": true, 5 | "dependencies": { 6 | "@babylonjs/core": "5.0.0-beta.2", 7 | "@babylonjs/gui": "5.0.0-beta.2", 8 | "@babylonjs/inspector": "5.0.0-beta.2", 9 | "@babylonjs/loaders": "5.0.0-beta.2", 10 | "@babylonjs/materials": "5.0.0-beta.2", 11 | "core": "*", 12 | "earcut": "2.2.3" 13 | }, 14 | "peerDependencies": { 15 | "react": "*" 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /repos/client/utils/coords.js: -------------------------------------------------------------------------------- 1 | import { Vector3 } from '../babylon' 2 | 3 | /** 4 | * Get Vector3 for Babylon.js from right handed system with z-up vector floats 5 | * 6 | * @param {Number[]|Array|Array} vector3 array from right handed system with z-up - [x, y, z] 7 | * @returns {Vector3} vector3 - for left handed system and y-up (i.e. Babylon.js) 8 | */ 9 | export function v3 ([x = 0, y = 0, z = 0] = []) { 10 | return new Vector3(x, z, y) 11 | } 12 | 13 | -------------------------------------------------------------------------------- /repos/client/index.js: -------------------------------------------------------------------------------- 1 | import * as core from 'core' // init core first 2 | 3 | /** 4 | * EXPORTS ===================================================================== 5 | * Modules' Exposing API - to enable consistent and maintainable app integration 6 | * ============================================================================= 7 | */ 8 | const sideEffects = {core} // prevent webpack tree shaking in prod 9 | 10 | /* Activated Modules */ 11 | const clientModules = [ 12 | ] 13 | 14 | export default clientModules 15 | -------------------------------------------------------------------------------- /repos/web/pages/index.js: -------------------------------------------------------------------------------- 1 | import Head from 'next/head' 2 | import React, { useEffect, useState } from 'react' 3 | import dynamic from 'next/dynamic' 4 | 5 | // Load Scene View on Demand 6 | const SceneView = dynamic(() => import(`../../client/views/SceneView`), {ssr: false}) 7 | 8 | export default function HomePage (props) { 9 | const [loaded, setLoaded] = useState(false) 10 | useEffect(() => setLoaded(true)) 11 | return <> 12 | 13 | Babylon + Next.js Setup Successful! 14 | 15 | {loaded && } 16 | 17 | } 18 | -------------------------------------------------------------------------------- /repos/web/components/Preload.js: -------------------------------------------------------------------------------- 1 | import NextLink from 'next/link' 2 | 3 | /** 4 | * Preload Script for given Route without rendering (only works in Next.js production) 5 | * @param {String} to - pathname of the route to preload scripts for 6 | * @param {Object} [props] - other next Link options 7 | */ 8 | export default function Preload ({to, ...props}) { 9 | // Next Link expects a native element with ref, and it has to render as HTML element to trigger preload 10 | return 11 | } 12 | 13 | const style = { 14 | position: 'absolute', 15 | width: 0, 16 | height: 0, 17 | } 18 | -------------------------------------------------------------------------------- /config/index.js: -------------------------------------------------------------------------------- 1 | console.log(`⚡ Compiling in '${process.env.NODE_ENV}' mode...`) 2 | const __TEST__ = process.env.NODE_ENV === 'test' 3 | const modulesToTranspile = [ 4 | 'core', 5 | 'client', 6 | // 'validator', // importing ES6 code for tree shaking 7 | ] 8 | 9 | /** 10 | * Babylon js is only needed in frontend. 11 | * next@10.2.3 with next-transpile-modules@7.3.0 must have this disabled 12 | * use dynamic import instead to avoid rendering Babylon server side and slowing down development. 13 | */ 14 | if (__TEST__) modulesToTranspile.push('@babylonjs') // required for Jest test 15 | 16 | module.exports = { 17 | modulesToTranspile 18 | } 19 | -------------------------------------------------------------------------------- /repos/core/constants.js: -------------------------------------------------------------------------------- 1 | /* Environment Variables */ 2 | export let ENV = typeof process !== 'undefined' ? process.env : {} 3 | if (!Object.keys(ENV).length) { 4 | // Must create dynamic require using process.env as condition to avoid error in CRA 5 | ENV = require('./_envsNext') || {} 6 | } 7 | export const NODE_ENV = ENV.NODE_ENV // @Note: Next.js does not automatically add NODE_ENV, set inside next.config.js 8 | export const __PROD__ = NODE_ENV === 'production' 9 | export const __TEST__ = NODE_ENV === 'test' 10 | export const __DEV__ = NODE_ENV === 'development' 11 | export const __CLIENT__ = typeof window !== 'undefined' 12 | export const __BACKEND__ = !__CLIENT__ 13 | -------------------------------------------------------------------------------- /repos/web/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "web", 3 | "version": "0.0.0", 4 | "private": true, 5 | "scripts": { 6 | "build": "ANALYZE=true next build", 7 | "dev": "yarn cache clean && yarn delete .next && next dev", 8 | "delete": "rimraf", 9 | "start": "next start", 10 | "restart": "yarn build && yarn start" 11 | }, 12 | "dependencies": { 13 | "client": "*", 14 | "core": "*", 15 | "next": "10.2.3" 16 | }, 17 | "peerDependencies": { 18 | "react": "*" 19 | }, 20 | "devDependencies": { 21 | "@babel/plugin-proposal-decorators": "7.12.12", 22 | "@next/bundle-analyzer": "10.2.3", 23 | "next-compose-plugins": "2.2.1", 24 | "next-transpile-modules": "7.3.0" 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /repos/web/babel.config.js: -------------------------------------------------------------------------------- 1 | const {modulesToTranspile} = require('../../config') 2 | module.exports = (api) => { 3 | // @Note: Next.js only loads .babelrc for its local repo. 4 | // Use 'babel.config.js' so Next.js will load it for sibling repos using Yarn workspace. 5 | 6 | api.cache(false) // set cache as true/false 7 | 8 | return { 9 | plugins: [ 10 | [ 11 | '@babel/plugin-proposal-decorators', 12 | { 13 | 'legacy': true 14 | } 15 | ], 16 | 'lodash', 17 | ], 18 | presets: [ 19 | 'next/babel' 20 | ], 21 | ignore: [ 22 | // this duplicated declaration from next.config.js produces slightly smaller bundle 23 | new RegExp(`node_modules/(?!(${modulesToTranspile.join('|')})/)`) 24 | ], 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /jest.config.js: -------------------------------------------------------------------------------- 1 | const {modulesToTranspile} = require('./config') 2 | module.exports = { 3 | collectCoverageFrom: [ 4 | '**/*.{js,jsx,ts,tsx}', 5 | '!**/*.d.ts', 6 | '!**/node_modules/**', 7 | ], 8 | setupFilesAfterEnv: ['/setupTests.js'], 9 | // testPathIgnorePatterns: ['node_modules/', '.next/'], 10 | transform: { 11 | '^.+\\.(js|jsx|ts|tsx)$': '/node_modules/babel-jest', 12 | '^.+\\.(graphql|gql)$': 'jest-transform-graphql', 13 | '^.+\\.css$': '/config/jest/cssTransform.js', 14 | }, 15 | // @Note: `ignore` patterns set inside babel.config.js will not be used by Jest 16 | transformIgnorePatterns: [ 17 | `node_modules/(?!(${modulesToTranspile.join('|')})/)`, 18 | '^.+\\.module\\.(css|sass|scss)$', 19 | ], 20 | moduleNameMapper: { 21 | '^.+\\.css$': '/config/jest/cssTransform.js', 22 | '^.+\\.module\\.(css|sass|scss)$': 'identity-obj-proxy', 23 | }, 24 | } 25 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2022 Ecoinomist 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "BabylonNext", 3 | "version": "0.0.0", 4 | "private": true, 5 | "workspaces": { 6 | "packages": [ 7 | "repos/*" 8 | ], 9 | "nohoist": [] 10 | }, 11 | "scripts": { 12 | "dev": "yarn workspace web dev", 13 | "web": "yarn workspace web dev", 14 | "build": "yarn workspace web build", 15 | "start": "yarn workspace web start", 16 | "scan": "./node_modules/.bin/madge --circular repos --exclude 'node_modules/'", 17 | "test": "yarn scan && jest", 18 | "reset": "yarn clear && yarn cache clean && yarn", 19 | "clear": "yarn delete yarn.lock node_modules repos/core/node_modules repos/web/node_modules", 20 | "delete": "rimraf" 21 | }, 22 | "devDependencies": { 23 | "@testing-library/jest-dom": "5.11.0", 24 | "@testing-library/react": "10.4.3", 25 | "babel-jest": "26.1.0", 26 | "babel-plugin-import-graphql": "2.8.1", 27 | "babel-plugin-lodash": "3.3.4", 28 | "concurrently": "5.2.0", 29 | "identity-obj-proxy": "3.0.0", 30 | "jest": "26.1.0", 31 | "jest-transform-graphql": "2.1.0", 32 | "madge": "3.9.2", 33 | "react-test-renderer": "16.13.1", 34 | "rimraf": "3.0.2" 35 | } 36 | } 37 | -------------------------------------------------------------------------------- /babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = (api) => { 2 | // @Note: Next.js only loads its local repo '.babelrc' or 'babel.config.js'. 3 | // This 'babel.config.js' is loaded by global Jest test automatically. 4 | 5 | api.cache(false) 6 | 7 | return { 8 | presets: [ 9 | 'next/babel' 10 | ], 11 | plugins: [ 12 | [ 13 | '@babel/plugin-proposal-decorators', 14 | { 15 | 'legacy': true 16 | } 17 | ], 18 | /** 19 | * GraphQL import 20 | * for Next.js - configure inside next.config.js 21 | */ 22 | // 'import-graphql', // for CRA - requires 'graphql' and 'babel-plugin-import-graphql' packages 23 | ], 24 | babelrcRoots: [ 25 | // Keep the root as a root 26 | '.', 27 | 28 | // Also consider monorepo packages "root" and load their .babelrc files. 29 | './repos/*' 30 | ], 31 | 32 | // May be required for babel to transform packages outside of current working directory (for each repo) 33 | // @Note: commented out because: 34 | // - Jest test uses `transformIgnorePatterns` inside jest.config.js 35 | // - Next.js uses its own next.config.js to exclude ignore node_modules 36 | // - Nodemon for GQL server uses local babel.config.js with custom ignore patterns: 37 | // new RegExp(`node_modules/(?!(${modulesToTranspile.join('|')})/)`) 38 | // ignore: [ 39 | // /node_modules\/(?!(package-name1|package-name2)\/)/ 40 | // ], 41 | } 42 | } 43 | -------------------------------------------------------------------------------- /repos/client/views/SceneView.js: -------------------------------------------------------------------------------- 1 | import React, { PureComponent } from 'react' 2 | import {ArcRotateCamera, MeshBuilder, Scene, Engine, HemisphericLight, StandardMaterial, Texture, Vector3} from '../babylon' 3 | import Head from 'next/head' 4 | 5 | /** 6 | * Babylon 3D Scene View 7 | */ 8 | export default class SceneView extends PureComponent { 9 | componentDidMount () { 10 | this.setup(this.canvas) 11 | } 12 | 13 | setup = (canvas) => { 14 | const engine = this.createEngine(canvas) 15 | const scene = new Scene(engine) 16 | const camera = new ArcRotateCamera("Camera", -Math.PI / 3, Math.PI / 3, 10, Vector3.Zero(), scene); 17 | camera.attachControl(); 18 | camera.radius = 3 19 | const light = new HemisphericLight("Light", new Vector3(0.33, 1, -0.67), scene); 20 | light.intensity = 0.9; 21 | const texture = new Texture(`/images/grid.png`, scene) 22 | const mat = new StandardMaterial('Material', scene) 23 | mat.diffuseTexture = texture 24 | const box = new MeshBuilder.CreateBox('box', {size: 1}, scene) 25 | box.material = mat 26 | engine.runRenderLoop(engine.renderLoop) 27 | } 28 | 29 | createEngine = (canvas) => { 30 | const engine = new Engine(canvas) 31 | engine.renderLoop = () => engine.scenes.forEach(scene => { 32 | if (scene.activeCamera) scene.render() 33 | }) 34 | return engine 35 | } 36 | 37 | id = 'Babylon' 38 | 39 | onMount = (canvas) => this.canvas = canvas 40 | 41 | render () { 42 | // noinspection HtmlUnknownAttribute,HtmlRequiredTitleElement,JSUnresolvedLibraryURL 43 | return <> 44 | }/> 45 | 46 | 47 | } 48 | } 49 | 50 | const style = {width: '100%', height: '100%'} 51 | -------------------------------------------------------------------------------- /repos/web/next.config.js: -------------------------------------------------------------------------------- 1 | // @Note: next.config.js gets loaded once at the start, then babel.config.js (loaded repeatedly) 2 | const {withPlugins, optional} = require('next-compose-plugins') 3 | const {PHASE_PRODUCTION_SERVER} = require('next/constants') 4 | let {modulesToTranspile} = require('../../config') 5 | modulesToTranspile = modulesToTranspile.filter(v => v !== '@babylonjs') 6 | const clientEnvs = {} 7 | for (const key in process.env) { 8 | if (key.indexOf('REACT_APP_') === 0) clientEnvs[key] = process.env[key] 9 | } 10 | 11 | /** Tested with Next.js v10.2.3 Webpack v4.4.1 */ 12 | module.exports = withPlugins( 13 | /** IMPORTANT: the order of plugins matter! */ 14 | [ 15 | /* Must be the first plugin (to work with decorator {legacy: true}) */ 16 | [optional(() => require('@next/bundle-analyzer')({ 17 | enabled: process.env.ANALYZE === 'true', 18 | })({})), {}, ['!', PHASE_PRODUCTION_SERVER]], 19 | 20 | /* Webpack configuration must go here */ 21 | [optional(() => require('next-transpile-modules')(modulesToTranspile)), { 22 | /** 23 | * The webpack function is executed twice, once for the server and once for the client. 24 | * @see https://nextjs.org/docs/api-reference/next.config.js/custom-webpack-config 25 | */ 26 | // webpack: (config, {buildId, dev, isServer, defaultLoaders, webpack}) => { 27 | // config.module.rules.push({ 28 | // test: /\.(graphql|gql)$/, 29 | // loader: 'graphql-tag/loader', // works with fragment #import 30 | // }) 31 | // return config 32 | // }, 33 | }, ['!', PHASE_PRODUCTION_SERVER]], 34 | ], 35 | 36 | /** next.config.js configuration */ 37 | { 38 | // @note: 'next-compose-plugins' has a bug and does not call webpack(config) here 39 | // @see: https://github.com/cyrilwanner/next-compose-plugins/issues/41 40 | /** 41 | * Next.js does not automatically reload .env variables, changes require restart. 42 | * For Security reasons, Next.js does not export process.env to client side. 43 | * Manually export all envs starting with `REACT_APP_*` to sync with CRA best practices 44 | */ 45 | publicRuntimeConfig: { 46 | NODE_ENV: process.env.NODE_ENV, 47 | ...clientEnvs, 48 | }, 49 | /** 50 | * @see: https://nextjs.org/docs/advanced-features/i18n-routing 51 | */ 52 | // i18n: { 53 | // locales: ['en', 'fr', 'ru'], 54 | // defaultLocale: 'en', 55 | // }, 56 | /** 57 | * @see: https://nextjs.org/docs/api-reference/next.config.js/rewrites 58 | */ 59 | // // Not needed 60 | // async rewrites () { 61 | // return { 62 | // // These rewrites are checked after both pages/public files 63 | // // and dynamic routes are checked 64 | // fallback: [ 65 | // { // Rewrite everything else to use `pages/spa.js` Single Page Application 66 | // source: '/:path*', 67 | // destination: '/spa', 68 | // }, 69 | // ] 70 | // } 71 | // }, 72 | } 73 | ) 74 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ## Babylon + Next.js Starter Template 2 | 3 | This is a production ready mono-repository setup for [Babylon.js](https://www.babylonjs.com/) using [Next.js](https://nextjs.org/) server side rendering. 4 | 5 | It is suitable for small projects, and scales to large apps without suffering performance or ease of use. 6 | 7 | For more details, please read this guide on how to optimize your 8 | [Babylon + Next.js production build for SEO and Blazing Fast Page Load Speed](https://3designer.app/best/babylon-nextjs-setup) 9 | . 10 | 11 | ![ui](./repos/web/public/images/scene.jpg) 12 | 13 | ### Key Features: 14 | 15 | 1. SEO Friendly 16 | 2. Load Fast to achieve “A” Grade Page Speed score 17 | 3. Async Load Babylon.js to improve UX (user experience) 18 | 4. Code Splitting with Tree Shaking to reduce bundle size 19 | 5. An option to write in pure Javascript or Typescript (or mixing both) 20 | 6. Intuitive developer experience with HMR (Hot Module Reload) 21 | 7. [Jest Test](https://jestjs.io/) working setup 22 | 8. Modular Architecture for a flexible, maintainable and scalable app 23 | 9. Production ready with detailed bundle analyzer. 24 | 25 | ### Installation & Use 26 | 27 | This is a platform-agnostic monorepository minimum setup boilerplate. 28 | 29 | It has been tested and works with Node.js v12.22.1. 30 | 31 | The setup uses [Yarn Workspaces](https://classic.yarnpkg.com/lang/en/docs/workspaces/) to easily scale to different 32 | clients (React Native for iOS, Android, Electron) or server (Node.js). 33 | 34 | This way, you can maximize code reuse between platforms to enforce **best programming practices**. 35 | 36 | 1. Install packages 37 | 38 | ```shell 39 | yarn 40 | ``` 41 | 42 | 2. Run the app 43 | 44 | ```shell 45 | yarn dev 46 | ``` 47 | 48 | 3. Run Tests 49 | 50 | ```shell 51 | yarn test 52 | ``` 53 | 54 | 4. Build production bundle 55 | 56 | ```shell 57 | yarn build 58 | ``` 59 | 60 | 5. Run Production build locally 61 | 62 | ```shell 63 | yarn start 64 | ``` 65 | 66 | ### Beginner's Installation Guide for Mac 67 | 68 | 1. Install [Brew](https://brew.sh/) (it may ask you to install Xcode dev tools - do that first) 69 | 2. Install frontend tools 70 | 71 | ```shell 72 | # Install Node version manager 73 | brew install nvm 74 | 75 | # Install latest Node.js version 12 76 | nvm install 12 77 | 78 | # Set Node 12 as the default version 79 | nvm alias default 12 80 | 81 | # Install Yarn package manager 82 | brew install yarn 83 | 84 | # Install Babylon Project 85 | git clone https://github.com/ecoinomist/babylon-next.git 86 | cd babylon-next 87 | yarn 88 | yarn dev 89 | ``` 90 | 91 | If `nvm` command isn’t working, you may need to add this in `.bash_profile`: 92 | 93 | ``` 94 | # Node Package Manager 95 | export NVM_DIR="$HOME/.nvm" 96 | source $(brew --prefix nvm)/nvm.sh 97 | ``` 98 | 99 | Then in terminal: 100 | 101 | ```shell 102 | source ~/.bash_profile 103 | ``` 104 | 105 | ### Windows Notes 106 | 107 | Windows users should install this template using `yarn`, not `npm` because it will probably produce errors with npm. 108 | 109 | If you haven’t installed yarn, do this first: 110 | 111 | ```shell 112 | # it doesnt work if using npm install --global yarn (according to some people) 113 | npm i yarn 114 | ``` 115 | 116 | ### Folder Structure 117 | 118 | - **/repos/core**: common code to be shared across platforms (web, iOS, Android, Desktop, backend API, devOPs, etc.) 119 | - **/repos/client**: common frontend code to be shared across platforms (i.e. if you create a reusable Babylon Camera 120 | React component, put it here, because Camera, and most Babylon rendering, will likely to be used in client side only) 121 | - **/repos/web**: specific client release for the ‘browser’ using Next.js. In a similar fashion, you can create a 122 | sibling `ios` or `android` folder using [React Native](https://reactnative.dev/), and they each only contain code related to that release. 123 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # ============================================================================== 2 | # Repo specific 3 | # ============================================================================== 4 | /dist 5 | /**/public/static/**/*.css 6 | /unity 7 | repos/server/uploads 8 | repos/web/public/uploads 9 | 10 | # ============================================================================== 11 | # Development Files 12 | # ============================================================================== 13 | *.env 14 | *.ppk 15 | *.pub 16 | *.map 17 | *.env.prod 18 | 19 | # -------------------------------------- 20 | # DATA FILES 21 | # -------------------------------------- 22 | 23 | /db 24 | !src/web/modules/config/db 25 | /data 26 | /dbbackup 27 | /localStorage 28 | .node-persist 29 | log/ 30 | /static 31 | !static/robots.txt 32 | src/modules/exchange/modules/__data__/ 33 | 34 | # -------------------------------------- 35 | # CERTIFICATES 36 | # -------------------------------------- 37 | 38 | *.crt 39 | *.csr 40 | *.key 41 | *.pem 42 | !src/web/modules/config/certs/docker.crt 43 | !src/web/modules/config/certs/localhost.crt 44 | !docker.csr 45 | !localhost.csr 46 | !src/web/modules/config/certs/docker.key 47 | !src/web/modules/config/certs/localhost.key 48 | !docker.pem 49 | !localhost.pem 50 | *certs/*.zip 51 | 52 | 53 | # -------------------------------------- 54 | # EDITORS 55 | # -------------------------------------- 56 | 57 | # Intellij IDEA 58 | .idea/* 59 | !.idea/dictionaries 60 | 61 | # Vim 62 | .ropeproject 63 | 64 | # VSCode 65 | .vscode 66 | 67 | 68 | # -------------------------------------- 69 | # FRONT END 70 | # -------------------------------------- 71 | 72 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 73 | 74 | # dependencies 75 | node_modules 76 | /.pnp 77 | .pnp.js 78 | 79 | # testing 80 | /coverage 81 | 82 | # misc 83 | .env.local 84 | .env.development.local 85 | .env.test.local 86 | .env.production.local 87 | 88 | npm-debug.log* 89 | yarn-debug.log* 90 | yarn-error.log* 91 | 92 | # React Native 93 | node_modules/**/* 94 | .expo/* 95 | npm-debug.* 96 | *.jks 97 | *.p12 98 | *.mobileprovision 99 | 100 | 101 | # -------------------------------------- 102 | # BACK END 103 | # -------------------------------------- 104 | 105 | # Byte-compiled / optimized / DLL files 106 | __pycache__/ 107 | *.py[cod] 108 | 109 | # C extensions 110 | *.so 111 | 112 | # Distribution / packaging 113 | .Python 114 | env/ 115 | develop-eggs/ 116 | downloads/ 117 | eggs/ 118 | lib64/ 119 | parts/ 120 | sdist/ 121 | var/ 122 | *.egg-info/ 123 | .installed.cfg 124 | *.egg 125 | 126 | # PyInstaller 127 | # Usually these files are written by a python script from a template 128 | # before PyInstaller builds the exe, so as to inject date/other infos into it. 129 | *.manifest 130 | *.spec 131 | 132 | # PyBuilder 133 | target/ 134 | 135 | # Installer logs 136 | pip-log.txt 137 | pip-delete-this-directory.txt 138 | 139 | # Django stuff: 140 | *.log 141 | 142 | # Translations 143 | *.mo 144 | *.pot 145 | 146 | # Sphinx documentation 147 | docs/_build/ 148 | 149 | # Unit test / coverage reports 150 | htmlcov/ 151 | .tox/ 152 | .coverage 153 | .cache 154 | nosetests.xml 155 | coverage.xml 156 | 157 | # -------------------------------------- 158 | # Temporary Migration Files in Dev Mode 159 | # -------------------------------------- 160 | # migrations 161 | 162 | 163 | # ============================================================================== 164 | # Operating System Files 165 | # ============================================================================== 166 | 167 | # -------------------------------------- 168 | # WINDOWS 169 | # -------------------------------------- 170 | 171 | # Windows image file caches 172 | Thumbs.db 173 | ehthumbs.db 174 | 175 | # Folder config file 176 | Desktop.ini 177 | 178 | # Recycle Bin used on file shares 179 | $RECYCLE.BIN/ 180 | 181 | # Windows Installer files 182 | *.cab 183 | *.msi 184 | *.msm 185 | *.msp 186 | 187 | # Windows shortcuts 188 | *.lnk 189 | 190 | 191 | # -------------------------------------- 192 | # OSX 193 | # -------------------------------------- 194 | 195 | # System 196 | .DS_Store 197 | .AppleDouble 198 | .LSOverride 199 | 200 | # Xcode 201 | Source/Application.h 202 | *.xcodeproj/* 203 | !*.xcodeproj/project.pbxproj 204 | !*.xcodeproj/xcshareddata 205 | 206 | # Thumbnails 207 | ._* 208 | 209 | # Files that might appear in the root of a volume 210 | .DocumentRevisions-V100 211 | .fseventsd 212 | .Spotlight-V100 213 | .TemporaryItems 214 | .Trashes 215 | .VolumeIcon.icns 216 | 217 | # Directories potentially created on remote AFP share 218 | .AppleDB 219 | .AppleDesktop 220 | Network Trash Folder 221 | Temporary Items 222 | .apdisk 223 | 224 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 225 | 226 | # dependencies 227 | /node_modules 228 | 229 | # next.js 230 | .next 231 | /out/ 232 | 233 | # production 234 | /build 235 | -------------------------------------------------------------------------------- /repos/client/babylon.js: -------------------------------------------------------------------------------- 1 | /** 2 | * BABYLON.JS IMPORT PROXY ===================================================== 3 | * @note: Comment out imports that you do not need to reduce production bundle size. 4 | * @reference: https://forum.babylonjs.com/t/es6-tree-shaking-build-large-bundle-size/21084 5 | * @see: https://doc.babylonjs.com/features/es6_support#tree-shaking 6 | * - Importing components directly reduces bundle size and compile time. 7 | * => at the moment of writing, optimisation yielded 355 KB gzipped bundle. 8 | * - babylonjs/core library adds 741 KB gzipped to total bundle size. 9 | * ============================================================================= 10 | */ 11 | 12 | // Use console log so jest tests will help show which files are loading babylon package 13 | // console.log('⚡ ➤-----------BABYLON------------➤ ⚡') 14 | 15 | /* Required Dependencies */ 16 | export {} from '@babylonjs/core/Engines/Extensions/engine.views' // for registerView() 17 | export {} from '@babylonjs/core/Rendering/boundingBoxRenderer' // for rendering bounding box 18 | 19 | /* Core */ 20 | export { Engine, } from '@babylonjs/core/Engines/engine' 21 | export { Scene } from '@babylonjs/core/scene' 22 | export { ArcRotateCamera, } from '@babylonjs/core/Cameras/arcRotateCamera' 23 | export { Camera, } from '@babylonjs/core/Cameras/camera' 24 | 25 | /* File Loaders */ 26 | export {} from '@babylonjs/core/Loading/loadingScreen' // required 27 | export {} from '@babylonjs/loaders/glTF' // enable gltf/glb file support 28 | export { SceneLoader } from '@babylonjs/core/Loading/sceneLoader' 29 | export {} from '@babylonjs/core/Rendering/edgesRenderer' 30 | 31 | /* Maths */ 32 | export { Color3, Color4, } from '@babylonjs/core/Maths/math.color' 33 | export { Plane, } from '@babylonjs/core/Maths/math.plane' 34 | export { Path3D, } from '@babylonjs/core/Maths/math.path' 35 | export { Matrix, Vector2, Vector3, Vector4, Quaternion, } from '@babylonjs/core/Maths/math.vector' 36 | export { HemisphericLight, } from '@babylonjs/core/Lights/hemisphericLight' 37 | export { Viewport, } from '@babylonjs/core/Maths/math.viewport' 38 | 39 | /* Meshes */ 40 | export { Mesh, } from '@babylonjs/core/Meshes/mesh' 41 | export { MeshBuilder } from '@babylonjs/core/Meshes/meshBuilder' 42 | export { SubMesh } from '@babylonjs/core/Meshes/subMesh' 43 | export { VertexBuffer } from '@babylonjs/core/Meshes/buffer' 44 | export { TransformNode, } from '@babylonjs/core/Meshes/transformNode' 45 | export { CSG, } from '@babylonjs/core/Meshes/csg' 46 | 47 | /* Events */ 48 | export { ActionManager, } from '@babylonjs/core/Actions/actionManager' 49 | export { Animation, } from '@babylonjs/core/Animations' 50 | export { PredicateCondition, } from '@babylonjs/core/Actions/condition' 51 | export { SetValueAction, ExecuteCodeAction, } from '@babylonjs/core/Actions/directActions' 52 | export { KeyboardEventTypes, } from '@babylonjs/core/Events/keyboardEvents' 53 | export { PointerEventTypes, } from '@babylonjs/core/Events/pointerEvents' 54 | export { PointerDragBehavior, } from '@babylonjs/core/Behaviors/Meshes/pointerDragBehavior' 55 | 56 | /* Gizmos */ 57 | export { GizmoManager, } from '@babylonjs/core/Gizmos/gizmoManager' 58 | export { PlaneRotationGizmo, } from '@babylonjs/core/Gizmos/planeRotationGizmo' 59 | export { PositionGizmo, } from '@babylonjs/core/Gizmos/positionGizmo' 60 | export { RotationGizmo, } from '@babylonjs/core/Gizmos/rotationGizmo' 61 | export { ScaleGizmo, } from '@babylonjs/core/Gizmos/scaleGizmo' 62 | export { EngineStore, } from '@babylonjs/core/Engines/engineStore' 63 | export { UtilityLayerRenderer, } from '@babylonjs/core/Rendering/utilityLayerRenderer' 64 | 65 | /* Materials */ 66 | export { Material, } from '@babylonjs/core/Materials/material' 67 | export { BackgroundMaterial, } from '@babylonjs/core/Materials/Background/backgroundMaterial' 68 | export { PBRMaterial, } from '@babylonjs/core/Materials/PBR/pbrMaterial' 69 | export { StandardMaterial, } from '@babylonjs/core/Materials/standardMaterial' 70 | export { MultiMaterial, } from '@babylonjs/core/Materials/multiMaterial' 71 | export { DynamicTexture, } from '@babylonjs/core/Materials/Textures/dynamicTexture' 72 | export { Texture, } from '@babylonjs/core/Materials/Textures/texture' 73 | export { CubeTexture, } from '@babylonjs/core/Materials/Textures/cubeTexture' 74 | 75 | /* Materials */ 76 | export { GridMaterial } from '@babylonjs/materials/grid/gridMaterial' 77 | 78 | /* Effects */ 79 | export {} from '@babylonjs/core/Rendering/outlineRenderer' 80 | export { GlowLayer, } from '@babylonjs/core/Layers/glowLayer' 81 | export { HighlightLayer, } from '@babylonjs/core/Layers/highlightLayer' 82 | 83 | /* GUI */ 84 | export { AdvancedDynamicTexture, } from '@babylonjs/gui/2D/advancedDynamicTexture' 85 | export { Image, } from '@babylonjs/gui/2D/controls/image' 86 | export { MultiLine, } from '@babylonjs/gui/2D/controls/multiLine' 87 | export { Ellipse, } from '@babylonjs/gui/2D/controls/ellipse' 88 | export { Rectangle, } from '@babylonjs/gui/2D/controls/rectangle' 89 | export { TextBlock, } from '@babylonjs/gui/2D/controls/textBlock' 90 | export { Line, } from '@babylonjs/gui/2D/controls/line' 91 | 92 | /* Tools */ 93 | // Required to use Tools.CreateScreenshot for side effects 94 | export { ScreenshotTools } from '@babylonjs/core/Misc/screenshotTools' // => this imports Tools anyway 95 | export { Tools, } from '@babylonjs/core/Misc/tools' // adds 0 KB to bundle size (seems to be imported by other modules) 96 | --------------------------------------------------------------------------------