├── .eslintignore ├── .eslintrc.json ├── .gitignore ├── .prettierrc.json ├── LICENSE ├── README.md ├── bundler ├── webpack.common.js ├── webpack.dev.js └── webpack.prod.js ├── package-lock.json ├── package.json └── src ├── index.html ├── init.js ├── script.js └── style.css /.eslintignore: -------------------------------------------------------------------------------- 1 | bundler 2 | node_modules 3 | static -------------------------------------------------------------------------------- /.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": ["airbnb", "prettier"], 3 | "env": { 4 | "browser": true, 5 | "node": true, 6 | "jest": true 7 | }, 8 | "parserOptions": { 9 | "ecmaVersion": 11, 10 | "ecmaFeatures": { 11 | "experimentalObjectRestSpread": true, 12 | "impliedStrict": true, 13 | "classes": true 14 | } 15 | }, 16 | "plugins": [ 17 | "prettier" 18 | ], 19 | "rules": { 20 | "semi": [2, "always"], 21 | "prettier/prettier": "error" 22 | } 23 | } -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # ---- macOS ---- 2 | # General 3 | .DS_Store 4 | .AppleDouble 5 | .LSOverride 6 | .vscode 7 | 8 | # Icon must end with two \r 9 | Icon 10 | 11 | 12 | # Thumbnails 13 | ._* 14 | 15 | # Files that might appear in the root of a volume 16 | .DocumentRevisions-V100 17 | .fseventsd 18 | .Spotlight-V100 19 | .TemporaryItems 20 | .Trashes 21 | .VolumeIcon.icns 22 | .com.apple.timemachine.donotpresent 23 | 24 | # Directories potentially created on remote AFP share 25 | .AppleDB 26 | .AppleDesktop 27 | Network Trash Folder 28 | Temporary Items 29 | .apdisk 30 | 31 | # ---- Node ---- 32 | # Logs 33 | logs 34 | *.log 35 | npm-debug.log* 36 | yarn-debug.log* 37 | yarn-error.log* 38 | lerna-debug.log* 39 | .pnpm-debug.log* 40 | 41 | # Diagnostic reports (https://nodejs.org/api/report.html) 42 | report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json 43 | 44 | # Runtime data 45 | pids 46 | *.pid 47 | *.seed 48 | *.pid.lock 49 | 50 | # Directory for instrumented libs generated by jscoverage/JSCover 51 | lib-cov 52 | 53 | # Coverage directory used by tools like istanbul 54 | coverage 55 | *.lcov 56 | 57 | # nyc test coverage 58 | .nyc_output 59 | 60 | # Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files) 61 | .grunt 62 | 63 | # Bower dependency directory (https://bower.io/) 64 | bower_components 65 | 66 | # node-waf configuration 67 | .lock-wscript 68 | 69 | # Compiled binary addons (https://nodejs.org/api/addons.html) 70 | build/Release 71 | 72 | # Dependency directories 73 | node_modules/ 74 | jspm_packages/ 75 | 76 | # Snowpack dependency directory (https://snowpack.dev/) 77 | web_modules/ 78 | 79 | # TypeScript cache 80 | *.tsbuildinfo 81 | 82 | # Optional npm cache directory 83 | .npm 84 | 85 | # Optional eslint cache 86 | .eslintcache 87 | 88 | # Optional stylelint cache 89 | .stylelintcache 90 | 91 | # Microbundle cache 92 | .rpt2_cache/ 93 | .rts2_cache_cjs/ 94 | .rts2_cache_es/ 95 | .rts2_cache_umd/ 96 | 97 | # Optional REPL history 98 | .node_repl_history 99 | 100 | # Output of 'npm pack' 101 | *.tgz 102 | 103 | # Yarn Integrity file 104 | .yarn-integrity 105 | 106 | # dotenv environment variable files 107 | .env 108 | .env.development.local 109 | .env.test.local 110 | .env.production.local 111 | .env.local 112 | 113 | # parcel-bundler cache (https://parceljs.org/) 114 | .cache 115 | .parcel-cache 116 | 117 | # Next.js build output 118 | .next 119 | out 120 | 121 | # Nuxt.js build / generate output 122 | .nuxt 123 | dist 124 | 125 | # Gatsby files 126 | .cache/ 127 | # Comment in the public line in if your project uses Gatsby and not Next.js 128 | # https://nextjs.org/blog/next-9-1#public-directory-support 129 | # public 130 | 131 | # vuepress build output 132 | .vuepress/dist 133 | 134 | # vuepress v2.x temp and cache directory 135 | .temp 136 | .cache 137 | 138 | # Docusaurus cache and generated files 139 | .docusaurus 140 | 141 | # Serverless directories 142 | .serverless/ 143 | 144 | # FuseBox cache 145 | .fusebox/ 146 | 147 | # DynamoDB Local files 148 | .dynamodb/ 149 | 150 | # TernJS port file 151 | .tern-port 152 | 153 | # Stores VSCode versions used for testing VSCode extensions 154 | .vscode-test 155 | 156 | # yarn v2 157 | .yarn/cache 158 | .yarn/unplugged 159 | .yarn/build-state.yml 160 | .yarn/install-state.gz 161 | .pnp.* 162 | -------------------------------------------------------------------------------- /.prettierrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "singleQuote": true, 3 | "arrowParens": "always", 4 | "max-len": ["error", 140, 2], 5 | "tabWidth": 4, 6 | "useTabs": true 7 | } -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2023 Web Dev Sandbox 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 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Базовый шаблон для проекта с Three.js 2 | 3 | ## Описание 4 | 5 | В ходе освоения библиотеки Three.js на курсе, не редко встречается практика. Именно для этого, был создан шаблонный репозиторий, для быстрого старта очередного проекта. 6 | 7 | Внутри шаблона: 8 | 9 | - Настроенная Webpack сборка 10 | - Настроен eslint и prettier 11 | - Предустановленные библиотеки `three` и `gsap` 12 | - Есть стартовая инициализция `three.js` сцены 13 | 14 | ## Начало работы 15 | 16 | 1. Воспользоваться данным репозиторием как шаблонным и создать себе свой репозиторий 17 | 2. Клонировать себе свой репозиторий и установить зависимости: 18 | ```bash 19 | npm i 20 | ``` 21 | 3. Для запуска сервера разработки с hot realod: 22 | ```bash 23 | npm run dev 24 | ``` 25 | 4. Для сборки исходников: 26 | ```bash 27 | npm run build 28 | ``` 29 | 5. Для запуска `eslint` на коде проекта: 30 | ```bash 31 | npm run lint 32 | ``` 33 | 6. Для запуска `eslint` на коде проекта с возможными исправлениями: 34 | ```bash 35 | npm run lint:fix 36 | ``` 37 | -------------------------------------------------------------------------------- /bundler/webpack.common.js: -------------------------------------------------------------------------------- 1 | const CopyWebpackPlugin = require('copy-webpack-plugin'); 2 | const HtmlWebpackPlugin = require('html-webpack-plugin'); 3 | const MiniCSSExtractPlugin = require('mini-css-extract-plugin'); 4 | const path = require('path'); 5 | 6 | module.exports = { 7 | entry: path.resolve(__dirname, '../src/script.js'), 8 | output: { 9 | hashFunction: 'xxhash64', 10 | filename: 'bundle.[contenthash].js', 11 | path: path.resolve(__dirname, '../dist'), 12 | }, 13 | devtool: 'source-map', 14 | plugins: [ 15 | new CopyWebpackPlugin({ 16 | patterns: [ 17 | { 18 | from: path.resolve(__dirname, '../static'), 19 | noErrorOnMissing: true, 20 | }, 21 | ], 22 | }), 23 | new HtmlWebpackPlugin({ 24 | template: path.resolve(__dirname, '../src/index.html'), 25 | minify: true, 26 | }), 27 | new MiniCSSExtractPlugin(), 28 | ], 29 | module: { 30 | rules: [ 31 | { 32 | test: /\.(html)$/, 33 | use: ['html-loader'], 34 | }, 35 | { 36 | test: /\.js$/, 37 | exclude: /node_modules/, 38 | use: ['babel-loader'], 39 | }, 40 | { 41 | test: /\.css$/, 42 | use: [MiniCSSExtractPlugin.loader, 'css-loader'], 43 | }, 44 | { 45 | test: /\.(jpg|png|gif|svg)$/, 46 | type: 'asset/resource', 47 | generator: { 48 | filename: 'assets/images/[hash][ext]', 49 | }, 50 | }, 51 | { 52 | test: /\.(ttf|eot|woff|woff2)$/, 53 | type: 'asset/resource', 54 | generator: { 55 | filename: 'assets/fonts/[hash][ext]', 56 | }, 57 | }, 58 | ], 59 | }, 60 | }; 61 | -------------------------------------------------------------------------------- /bundler/webpack.dev.js: -------------------------------------------------------------------------------- 1 | const path = require('path'); 2 | const { merge } = require('webpack-merge'); 3 | const commonConfiguration = require('./webpack.common.js'); 4 | const ip = require('ip'); 5 | 6 | const infoColor = (message) => 7 | `\u001b[1m\u001b[34m${message}\u001b[39m\u001b[22m`; 8 | 9 | module.exports = merge(commonConfiguration, { 10 | stats: 'errors-warnings', 11 | mode: 'development', 12 | infrastructureLogging: { 13 | level: 'warn', 14 | }, 15 | devServer: { 16 | host: 'localhost', 17 | port: 3000, 18 | open: true, 19 | https: false, 20 | allowedHosts: 'all', 21 | hot: true, 22 | watchFiles: ['src/**', 'static/**'], 23 | static: { 24 | watch: true, 25 | directory: path.join(__dirname, '../static'), 26 | }, 27 | client: { 28 | logging: 'none', 29 | overlay: true, 30 | progress: false, 31 | }, 32 | onAfterSetupMiddleware: function (devServer) { 33 | const port = devServer.options.port; 34 | const https = devServer.options.https ? 's' : ''; 35 | const localIp = ip.address(); 36 | const domain1 = `http${https}://${localIp}:${port}`; 37 | const domain2 = `http${https}://localhost:${port}`; 38 | 39 | console.log( 40 | `Проект запущен на:\n - ${infoColor(domain1)}\n - ${infoColor( 41 | domain2 42 | )}` 43 | ); 44 | }, 45 | }, 46 | }); 47 | -------------------------------------------------------------------------------- /bundler/webpack.prod.js: -------------------------------------------------------------------------------- 1 | const { merge } = require('webpack-merge'); 2 | const commonConfiguration = require('./webpack.common.js'); 3 | const { CleanWebpackPlugin } = require('clean-webpack-plugin'); 4 | 5 | module.exports = merge(commonConfiguration, { 6 | mode: 'production', 7 | plugins: [new CleanWebpackPlugin()], 8 | }); 9 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "threejs_project_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 serve --config ./bundler/webpack.dev.js", 9 | "lint": "eslint src --ext .js", 10 | "lint:fix": "npm run lint -- --fix" 11 | }, 12 | "repository": { 13 | "type": "git", 14 | "url": "git+https://github.com/WebDev-Sandbox/threejs_project_template.git" 15 | }, 16 | "keywords": [], 17 | "author": "", 18 | "license": "ISC", 19 | "bugs": { 20 | "url": "https://github.com/WebDev-Sandbox/threejs_project_template/issues" 21 | }, 22 | "homepage": "https://github.com/WebDev-Sandbox/threejs_project_template#readme", 23 | "devDependencies": { 24 | "@babel/core": "^7.22.10", 25 | "@babel/preset-env": "^7.22.10", 26 | "babel-eslint": "^10.1.0", 27 | "babel-loader": "^9.1.3", 28 | "clean-webpack-plugin": "^4.0.0", 29 | "copy-webpack-plugin": "^11.0.0", 30 | "css-loader": "^6.8.1", 31 | "eslint": "^8.47.0", 32 | "eslint-config-airbnb": "^19.0.4", 33 | "eslint-config-prettier": "^9.0.0", 34 | "eslint-plugin-prettier": "^5.0.0", 35 | "file-loader": "^6.2.0", 36 | "html-loader": "^4.2.0", 37 | "html-webpack-plugin": "^5.5.3", 38 | "ip": "^1.1.8", 39 | "mini-css-extract-plugin": "^2.7.6", 40 | "portfinder-sync": "^0.0.2", 41 | "prettier": "3.0.2", 42 | "raw-loader": "^4.0.2", 43 | "style-loader": "^3.3.3", 44 | "webpack": "^5.88.2", 45 | "webpack-cli": "^5.1.4", 46 | "webpack-dev-server": "^4.15.1", 47 | "webpack-merge": "^5.9.0" 48 | }, 49 | "dependencies": { 50 | "three": "^0.155.0", 51 | "gsap": "^3.12.2" 52 | } 53 | } 54 | -------------------------------------------------------------------------------- /src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | ThreeJS Project Template 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /src/init.js: -------------------------------------------------------------------------------- 1 | import * as THREE from 'three'; 2 | import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'; 3 | 4 | const init = () => { 5 | const sizes = { 6 | width: window.innerWidth, 7 | height: window.innerHeight, 8 | }; 9 | 10 | const scene = new THREE.Scene(); 11 | const canvas = document.querySelector('.canvas'); 12 | const camera = new THREE.PerspectiveCamera(75, sizes.width / sizes.height); 13 | scene.add(camera); 14 | 15 | const controls = new OrbitControls(camera, canvas); 16 | controls.enableDamping = true; 17 | 18 | const renderer = new THREE.WebGLRenderer({ canvas }); 19 | renderer.setSize(sizes.width, sizes.height); 20 | renderer.render(scene, camera); 21 | 22 | return { sizes, scene, canvas, camera, renderer, controls }; 23 | }; 24 | 25 | export default init; 26 | -------------------------------------------------------------------------------- /src/script.js: -------------------------------------------------------------------------------- 1 | import * as THREE from 'three'; 2 | 3 | import init from './init'; 4 | 5 | import './style.css'; 6 | 7 | const { sizes, camera, scene, canvas, controls, renderer } = init(); 8 | 9 | camera.position.z = 3; 10 | 11 | const geometry = new THREE.BoxGeometry(1, 1, 1); 12 | const material = new THREE.MeshBasicMaterial({ 13 | color: 'gray', 14 | wireframe: true, 15 | }); 16 | const mesh = new THREE.Mesh(geometry, material); 17 | scene.add(mesh); 18 | 19 | const tick = () => { 20 | controls.update(); 21 | renderer.render(scene, camera); 22 | window.requestAnimationFrame(tick); 23 | }; 24 | tick(); 25 | 26 | /** Базовые обпаботчики событий длы поддержки ресайза */ 27 | window.addEventListener('resize', () => { 28 | // Обновляем размеры 29 | sizes.width = window.innerWidth; 30 | sizes.height = window.innerHeight; 31 | 32 | // Обновляем соотношение сторон камеры 33 | camera.aspect = sizes.width / sizes.height; 34 | camera.updateProjectionMatrix(); 35 | 36 | // Обновляем renderer 37 | renderer.setSize(sizes.width, sizes.height); 38 | renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2)); 39 | renderer.render(scene, camera); 40 | }); 41 | 42 | window.addEventListener('dblclick', () => { 43 | if (!document.fullscreenElement) { 44 | canvas.requestFullscreen(); 45 | } else { 46 | document.exitFullscreen(); 47 | } 48 | }); 49 | -------------------------------------------------------------------------------- /src/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | } 5 | 6 | html, 7 | body { 8 | overflow: hidden; 9 | } 10 | 11 | .canvas { 12 | position: fixed; 13 | top: 0; 14 | left: 0; 15 | outline: none; 16 | } 17 | --------------------------------------------------------------------------------