├── static └── .gitkeep ├── .gitignore ├── src ├── style │ └── main.css ├── index.html └── index.js ├── readme.md ├── bundler ├── webpack.prod.js ├── webpack.dev.js └── webpack.common.js └── package.json /static/.gitkeep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | /dist 4 | .cache 5 | 6 | # Editor directories and files 7 | .idea 8 | .vscode 9 | *.suo 10 | *.ntvs* 11 | *.njsproj 12 | *.sln 13 | *.sw? 14 | -------------------------------------------------------------------------------- /src/style/main.css: -------------------------------------------------------------------------------- 1 | * 2 | { 3 | padding: 0; 4 | margin: 0; 5 | } 6 | 7 | body, 8 | html 9 | { 10 | overflow: hidden; 11 | } 12 | 13 | .webgl 14 | { 15 | position: fixed; 16 | top: 0; 17 | left: 0; 18 | width: 100%; 19 | height: 100%; 20 | background: #000000; 21 | } 22 | -------------------------------------------------------------------------------- /readme.md: -------------------------------------------------------------------------------- 1 | # Webpack THREE.js Template 2 | 3 | ## Setup 4 | Download [Node.js](https://nodejs.org/en/download/). 5 | Run this followed commands: 6 | 7 | ``` bash 8 | # Install dependencies (only for first time) 9 | npm i 10 | 11 | # Serve at localhost:8080 12 | npm run dev 13 | 14 | # Build for production in the dist/ directory 15 | npm run build 16 | ``` 17 | -------------------------------------------------------------------------------- /src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Webpack THREE.js Template 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /bundler/webpack.prod.js: -------------------------------------------------------------------------------- 1 | const webpackMerge = require('webpack-merge') 2 | const commonConfiguration = require('./webpack.common.js') 3 | const { CleanWebpackPlugin } = require('clean-webpack-plugin') 4 | 5 | module.exports = webpackMerge( 6 | commonConfiguration, 7 | { 8 | mode: 'production', 9 | plugins: 10 | [ 11 | new CleanWebpackPlugin() 12 | ] 13 | } 14 | ) 15 | -------------------------------------------------------------------------------- /bundler/webpack.dev.js: -------------------------------------------------------------------------------- 1 | const webpackMerge = require('webpack-merge') 2 | const commonConfiguration = require('./webpack.common.js') 3 | 4 | module.exports = webpackMerge( 5 | commonConfiguration, 6 | { 7 | mode: 'development', 8 | devServer: 9 | { 10 | host: '0.0.0.0', 11 | contentBase: './dist', 12 | open: true, 13 | https: false, 14 | useLocalIp: true 15 | } 16 | } 17 | ) 18 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "webpack-three-js-template", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "build": "webpack --config ./bundler/webpack.prod.js", 8 | "dev": "webpack-dev-server --config ./bundler/webpack.dev.js" 9 | }, 10 | "repository": { 11 | "type": "git", 12 | "url": "git+https://github.com/brunosimon/webpack-three-js-template.git" 13 | }, 14 | "keywords": [], 15 | "author": "", 16 | "license": "ISC", 17 | "bugs": { 18 | "url": "https://github.com/brunosimon/webpack-three-js-template/issues" 19 | }, 20 | "homepage": "https://github.com/brunosimon/webpack-three-js-template#readme", 21 | "devDependencies": { 22 | "@babel/core": "^7.9.6", 23 | "@babel/preset-env": "^7.9.6", 24 | "babel-loader": "^8.1.0", 25 | "clean-webpack-plugin": "^3.0.0", 26 | "copy-webpack-plugin": "^5.1.1", 27 | "css-loader": "^3.5.3", 28 | "file-loader": "^6.0.0", 29 | "glslify-loader": "^2.0.0", 30 | "html-loader": "^1.1.0", 31 | "html-webpack-plugin": "^4.3.0", 32 | "raw-loader": "^4.0.1", 33 | "style-loader": "^1.2.1", 34 | "three": "^0.116.1", 35 | "webpack": "^4.43.0", 36 | "webpack-cli": "^3.3.11", 37 | "webpack-dev-server": "^3.11.0", 38 | "webpack-merge": "^4.2.2" 39 | } 40 | } 41 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import './style/main.css' 2 | import * as THREE from 'three' 3 | 4 | /** 5 | * Sizes 6 | */ 7 | const sizes = {} 8 | sizes.width = window.innerWidth 9 | sizes.height = window.innerHeight 10 | 11 | window.addEventListener('resize', () => 12 | { 13 | // Save sizes 14 | sizes.width = window.innerWidth 15 | sizes.height = window.innerHeight 16 | 17 | // Update camera 18 | camera.aspect = sizes.width / sizes.height 19 | camera.updateProjectionMatrix() 20 | 21 | // Update renderer 22 | renderer.setSize(sizes.width, sizes.height) 23 | }) 24 | 25 | /** 26 | * Environnements 27 | */ 28 | // Scene 29 | const scene = new THREE.Scene() 30 | 31 | // Camera 32 | const camera = new THREE.PerspectiveCamera(75, sizes.width / sizes.height, 0.1, 100) 33 | camera.position.z = 3 34 | scene.add(camera) 35 | 36 | // Test 37 | const cube = new THREE.Mesh(new THREE.BoxBufferGeometry(1, 1, 1), new THREE.MeshNormalMaterial()) 38 | scene.add(cube) 39 | 40 | // Renderer 41 | const renderer = new THREE.WebGLRenderer({ 42 | canvas: document.querySelector('.webgl') 43 | }) 44 | renderer.setPixelRatio(window.devicePixelRatio) 45 | renderer.setSize(sizes.width, sizes.height) 46 | 47 | /** 48 | * Loop 49 | */ 50 | const loop = () => 51 | { 52 | // Update 53 | cube.rotation.y += 0.01 54 | 55 | // Render 56 | renderer.render(scene, camera) 57 | 58 | // Keep looping 59 | window.requestAnimationFrame(loop) 60 | } 61 | loop() -------------------------------------------------------------------------------- /bundler/webpack.common.js: -------------------------------------------------------------------------------- 1 | const CopyWebpackPlugin = require('copy-webpack-plugin') 2 | const HtmlWebpackPlugin = require('html-webpack-plugin') 3 | const path = require('path') 4 | 5 | module.exports = { 6 | entry: path.resolve(__dirname, '../src/index.js'), 7 | output: 8 | { 9 | filename: 'bundle.[hash].js', 10 | path: path.resolve(__dirname, '../dist') 11 | }, 12 | devtool: 'source-map', 13 | plugins: 14 | [ 15 | new CopyWebpackPlugin([ { from: path.resolve(__dirname, '../static') } ]), 16 | new HtmlWebpackPlugin({ 17 | template: path.resolve(__dirname, '../src/index.html'), 18 | minify: true 19 | }) 20 | ], 21 | module: 22 | { 23 | rules: 24 | [ 25 | // HTML 26 | { 27 | test: /\.(html)$/, 28 | use: ['html-loader'] 29 | }, 30 | 31 | // JS 32 | { 33 | test: /\.js$/, 34 | exclude: /node_modules/, 35 | use: 36 | [ 37 | 'babel-loader' 38 | ] 39 | }, 40 | 41 | // CSS 42 | { 43 | test: /\.css$/, 44 | use: 45 | [ 46 | 'style-loader', 47 | 'css-loader' 48 | ] 49 | }, 50 | 51 | // Images 52 | { 53 | test: /\.(jpg|png|gif|svg)$/, 54 | use: 55 | [ 56 | { 57 | loader: 'file-loader', 58 | options: 59 | { 60 | outputPath: 'assets/images/' 61 | } 62 | } 63 | ] 64 | }, 65 | 66 | // Shaders 67 | { 68 | test: /\.(glsl|vs|fs|vert|frag)$/, 69 | exclude: /node_modules/, 70 | use: [ 71 | 'raw-loader', 72 | 'glslify-loader' 73 | ] 74 | } 75 | ] 76 | } 77 | } 78 | --------------------------------------------------------------------------------