├── src ├── style.css ├── favicon.png └── index.js ├── images └── box.gif ├── webpack ├── webpack.prod.js ├── webpack.dev.js └── webpack.common.js ├── README.md ├── LICENSE ├── package.json └── .gitignore /src/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | overflow-y: hidden; 4 | } 5 | -------------------------------------------------------------------------------- /images/box.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/playcanvas/playcanvas-webpack/HEAD/images/box.gif -------------------------------------------------------------------------------- /src/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/playcanvas/playcanvas-webpack/HEAD/src/favicon.png -------------------------------------------------------------------------------- /webpack/webpack.prod.js: -------------------------------------------------------------------------------- 1 | import { merge } from 'webpack-merge' 2 | import commonConfiguration from './webpack.common.js' 3 | 4 | const configuration = merge( 5 | commonConfiguration, 6 | { 7 | mode: 'production' 8 | } 9 | ) 10 | 11 | export default configuration; -------------------------------------------------------------------------------- /webpack/webpack.dev.js: -------------------------------------------------------------------------------- 1 | import { merge } from 'webpack-merge' 2 | import commonConfiguration from './webpack.common.js' 3 | import portFinderSync from 'portfinder-sync' 4 | 5 | const configuration = merge( 6 | commonConfiguration, 7 | { 8 | mode: 'development', 9 | devServer: 10 | { 11 | host: 'localhost', 12 | port: portFinderSync.getPort(5000), 13 | open: true, 14 | https: false 15 | } 16 | } 17 | ) 18 | export default configuration; -------------------------------------------------------------------------------- /webpack/webpack.common.js: -------------------------------------------------------------------------------- 1 | import HtmlWebpackPlugin from 'html-webpack-plugin' 2 | 3 | const webpackCommon = { 4 | plugins: 5 | [ 6 | new HtmlWebpackPlugin({ 7 | favicon: 'src/favicon.png', 8 | meta: { 9 | 'viewport': 'width=device-width, user-scalable=no, minimum-scale=1, maximum-scale=1' 10 | }, 11 | title: 'PlayCanvas Webpack Example', 12 | minify: true 13 | }) 14 | ], 15 | module: 16 | { 17 | rules: 18 | [ 19 | { 20 | test: /\.css$/, 21 | use: ['style-loader', 'css-loader'] 22 | } 23 | ] 24 | } 25 | } 26 | 27 | export default webpackCommon; 28 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # PlayCanvas Webpack Template 2 | 3 | There are lots of options for building a PlayCanvas app. One is to use [Webpack](https://webpack.js.org/), a popular JavaScript bundler. 4 | 5 | This project doesn't load the PlayCanvas engine via a script tag. Instead, it imports the engine as an [NPM package](https://www.npmjs.com/package/playcanvas) (see the repo's `package.json` file). The `src/index.js` script then imports the PlayCanvas (`pc`) API with the following statement: 6 | 7 | ``` 8 | import * as pc from 'playcanvas'; 9 | ``` 10 | 11 | ## How to Build 12 | 13 | Run: 14 | 15 | ``` 16 | npm install 17 | npm run build 18 | ``` 19 | 20 | This will output the built PlayCanvas app to the `dist` folder. 21 | 22 | ## How to Run 23 | 24 | Run: 25 | 26 | ``` 27 | npm run dev 28 | ``` 29 | 30 | Open `http://localhost:5000/` in your browser of choice. You should see a spinning cube: 31 | 32 | ![](images/box.gif) 33 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2020 PlayCanvas 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": "playcanvas-webpack", 3 | "version": "1.0.0", 4 | "author": "PlayCanvas ", 5 | "homepage": "https://playcanvas.com", 6 | "description": "Demonstration of building a PlayCanvas app with Webpack", 7 | "keywords": [ 8 | "webpack", 9 | "playcanvas" 10 | ], 11 | "license": "MIT", 12 | "bugs": { 13 | "url": "https://github.com/playcanvas/playcanvas-webpack/issues" 14 | }, 15 | "repository": { 16 | "type": "git", 17 | "url": "https://github.com/playcanvas/playcanvas-webpack.git" 18 | }, 19 | "private": true, 20 | "scripts": { 21 | "test": "echo \"Error: no test specified\" && exit 1", 22 | "build": "webpack --config ./webpack/webpack.prod.js", 23 | "dev": "webpack serve --config ./webpack/webpack.dev.js" 24 | }, 25 | "type": "module", 26 | "devDependencies": { 27 | "css-loader": "^6.5.1", 28 | "html-webpack-plugin": "^5.5.0", 29 | "portfinder-sync": "^0.0.2", 30 | "style-loader": "^3.3.1", 31 | "webpack": "^5.70.0", 32 | "webpack-cli": "^4.9.2", 33 | "webpack-dev-server": "^4.7.4" 34 | }, 35 | "dependencies": { 36 | "playcanvas": "^1.51.5" 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import './style.css'; 2 | 3 | import * as pc from 'playcanvas'; 4 | 5 | // create a PlayCanvas application 6 | const canvas = document.createElement('canvas'); 7 | document.body.appendChild(canvas); 8 | 9 | const app = new pc.Application(canvas); 10 | 11 | // fill the available space at full resolution 12 | app.setCanvasFillMode(pc.FILLMODE_FILL_WINDOW); 13 | app.setCanvasResolution(pc.RESOLUTION_AUTO); 14 | 15 | // ensure canvas is resized when window changes size 16 | window.addEventListener('resize', () => app.resizeCanvas()); 17 | 18 | const Rotate = pc.createScript('rotate'); 19 | Rotate.prototype.update = function (dt) { 20 | this.entity.rotate(10 * dt, 20 * dt, 30 * dt); 21 | }; 22 | 23 | // create box entity 24 | const box = new pc.Entity('cube'); 25 | box.addComponent('model', { 26 | type: 'box' 27 | }); 28 | box.addComponent('script'); 29 | box.script.create('rotate'); 30 | app.root.addChild(box); 31 | 32 | // create camera entity 33 | const camera = new pc.Entity('camera'); 34 | camera.addComponent('camera', { 35 | clearColor: new pc.Color(0.1, 0.1, 0.1) 36 | }); 37 | app.root.addChild(camera); 38 | camera.setPosition(0, 0, 3); 39 | 40 | // create directional light entity 41 | const light = new pc.Entity('light'); 42 | light.addComponent('light'); 43 | app.root.addChild(light); 44 | light.setEulerAngles(45, 0, 0); 45 | 46 | app.start(); 47 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | lerna-debug.log* 8 | 9 | # Diagnostic reports (https://nodejs.org/api/report.html) 10 | report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json 11 | 12 | # Runtime data 13 | pids 14 | *.pid 15 | *.seed 16 | *.pid.lock 17 | 18 | # Directory for instrumented libs generated by jscoverage/JSCover 19 | lib-cov 20 | 21 | # Coverage directory used by tools like istanbul 22 | coverage 23 | *.lcov 24 | 25 | # nyc test coverage 26 | .nyc_output 27 | 28 | # Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files) 29 | .grunt 30 | 31 | # Bower dependency directory (https://bower.io/) 32 | bower_components 33 | 34 | # node-waf configuration 35 | .lock-wscript 36 | 37 | # Compiled binary addons (https://nodejs.org/api/addons.html) 38 | build/Release 39 | 40 | # Dependency directories 41 | node_modules/ 42 | jspm_packages/ 43 | 44 | # TypeScript v1 declaration files 45 | typings/ 46 | 47 | # TypeScript cache 48 | *.tsbuildinfo 49 | 50 | # Optional npm cache directory 51 | .npm 52 | 53 | # Optional eslint cache 54 | .eslintcache 55 | 56 | # Microbundle cache 57 | .rpt2_cache/ 58 | .rts2_cache_cjs/ 59 | .rts2_cache_es/ 60 | .rts2_cache_umd/ 61 | 62 | # Optional REPL history 63 | .node_repl_history 64 | 65 | # Output of 'npm pack' 66 | *.tgz 67 | 68 | # Yarn Integrity file 69 | .yarn-integrity 70 | 71 | # dotenv environment variables file 72 | .env 73 | .env.test 74 | 75 | # parcel-bundler cache (https://parceljs.org/) 76 | .cache 77 | 78 | # Next.js build output 79 | .next 80 | 81 | # Nuxt.js build / generate output 82 | .nuxt 83 | dist 84 | 85 | # Gatsby files 86 | .cache/ 87 | # Comment in the public line in if your project uses Gatsby and *not* Next.js 88 | # https://nextjs.org/blog/next-9-1#public-directory-support 89 | # public 90 | 91 | # vuepress build output 92 | .vuepress/dist 93 | 94 | # Serverless directories 95 | .serverless/ 96 | 97 | # FuseBox cache 98 | .fusebox/ 99 | 100 | # DynamoDB Local files 101 | .dynamodb/ 102 | 103 | # TernJS port file 104 | .tern-port 105 | --------------------------------------------------------------------------------