├── .babelrc ├── .gitignore ├── LICENSE ├── README.md ├── package-lock.json ├── package.json ├── src ├── app │ └── application.ts ├── assets │ ├── box.jpg │ └── skybox │ │ ├── bk.png │ │ ├── dn.png │ │ ├── ft.png │ │ ├── lf.png │ │ ├── rt.png │ │ └── up.png ├── favicon.png ├── index.html ├── main.ts ├── polyfills.ts └── style.scss ├── tsconfig.json ├── webpack.common.js ├── webpack.dev.js └── webpack.prod.js /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | [ 4 | "env", 5 | { 6 | "targets": { 7 | "browsers": [ 8 | "last 2 versions", 9 | "safari >= 7", 10 | "ie >= 10" 11 | ] 12 | } 13 | } 14 | ] 15 | ] 16 | } 17 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | 8 | # Runtime data 9 | pids 10 | *.pid 11 | *.seed 12 | *.pid.lock 13 | 14 | # Directory for instrumented libs generated by jscoverage/JSCover 15 | lib-cov 16 | 17 | # Coverage directory used by tools like istanbul 18 | coverage 19 | 20 | # nyc test coverage 21 | .nyc_output 22 | 23 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 24 | .grunt 25 | 26 | # Bower dependency directory (https://bower.io/) 27 | bower_components 28 | 29 | # node-waf configuration 30 | .lock-wscript 31 | 32 | # Compiled binary addons (https://nodejs.org/api/addons.html) 33 | build/Release 34 | 35 | # Dependency directories 36 | node_modules/ 37 | jspm_packages/ 38 | dist/ 39 | 40 | # TypeScript v1 declaration files 41 | typings/ 42 | 43 | # Optional npm cache directory 44 | .npm 45 | 46 | # Optional eslint cache 47 | .eslintcache 48 | 49 | # Optional REPL history 50 | .node_repl_history 51 | 52 | # Output of 'npm pack' 53 | *.tgz 54 | 55 | # Yarn Integrity file 56 | .yarn-integrity 57 | 58 | # dotenv environment variables file 59 | .env 60 | 61 | # next.js build output 62 | .next 63 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2019 鸿则 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 | Webpack Typescript Starter 2 | ==== 3 | 4 | webpack starter for typescript 5 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "webpack-typescript-starter", 3 | "version": "0.0.1", 4 | "license": "MIT", 5 | "scripts": { 6 | "start": "webpack-dev-server --config webpack.dev.js --port=3100", 7 | "build": "webpack --config webpack.dev.js", 8 | "build:prod": "webpack --config webpack.prod.js" 9 | }, 10 | "devDependencies": { 11 | "@babel/core": "^7.6.4", 12 | "@babel/preset-env": "^7.6.3", 13 | "@types/stats.js": "^0.17.0", 14 | "babel-loader": "^8.0.6", 15 | "babel-preset-env": "^1.7.0", 16 | "clean-webpack-plugin": "^3.0.0", 17 | "copy-webpack-plugin": "^5.0.4", 18 | "css-loader": "^3.2.0", 19 | "html-webpack-plugin": "^3.2.0", 20 | "mini-css-extract-plugin": "^0.8.0", 21 | "node-sass": "^4.13.0", 22 | "sass-loader": "^8.0.0", 23 | "style-loader": "^1.0.0", 24 | "ts-loader": "^6.2.1", 25 | "typescript": "^3.6.4", 26 | "webpack": "^4.41.2", 27 | "webpack-cli": "^3.3.9", 28 | "webpack-merge": "^4.2.2" 29 | }, 30 | "dependencies": { 31 | "stats.js": "^0.17.0", 32 | "three": "^0.111.0" 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /src/app/application.ts: -------------------------------------------------------------------------------- 1 | import Stats from 'stats.js'; 2 | import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'; 3 | import { Scene, PerspectiveCamera, WebGLRenderer, BoxGeometry, MeshBasicMaterial, Mesh, TextureLoader, DoubleSide } from 'three'; 4 | 5 | export class Application { 6 | private scene: Scene; 7 | private camera: PerspectiveCamera; 8 | private renderer: WebGLRenderer; 9 | private stats: Stats; 10 | 11 | constructor() { 12 | this.scene = new Scene(); 13 | this.camera = new PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); 14 | this.renderer = new WebGLRenderer({ antialias: true }); 15 | this.renderer.setSize(window.innerWidth, window.innerHeight); 16 | document.body.appendChild(this.renderer.domElement); 17 | window.addEventListener('resize', () => this.onWindowResize()); 18 | 19 | const textureLoader = new TextureLoader(); 20 | 21 | const boxTexture = textureLoader.load('./assets/box.jpg'); 22 | 23 | const boxGeometry = new BoxGeometry(1, 1, 1); 24 | const meshBasicMaterial = new MeshBasicMaterial({ map: boxTexture, side: DoubleSide }); 25 | const mesh = new Mesh(boxGeometry, meshBasicMaterial); 26 | mesh.name = 'box'; 27 | 28 | const skyboxGeometry = new BoxGeometry(200, 200, 200); 29 | const skyboxMaterials = [ 30 | new MeshBasicMaterial({ map: textureLoader.load('./assets/skybox/rt.png'), side: DoubleSide }), 31 | new MeshBasicMaterial({ map: textureLoader.load('./assets/skybox/lf.png'), side: DoubleSide }), 32 | new MeshBasicMaterial({ map: textureLoader.load('./assets/skybox/up.png'), side: DoubleSide }), 33 | new MeshBasicMaterial({ map: textureLoader.load('./assets/skybox/dn.png'), side: DoubleSide }), 34 | new MeshBasicMaterial({ map: textureLoader.load('./assets/skybox/bk.png'), side: DoubleSide }), 35 | new MeshBasicMaterial({ map: textureLoader.load('./assets/skybox/ft.png'), side: DoubleSide }), 36 | ]; 37 | const skyboxMesh = new Mesh(skyboxGeometry, skyboxMaterials); 38 | skyboxMesh.name = 'skyboxMesh'; 39 | 40 | this.camera.position.set(0, 0, 5); 41 | 42 | this.scene.add(mesh); 43 | this.scene.add(skyboxMesh); 44 | 45 | this.stats = new Stats(); 46 | this.stats.showPanel(0); 47 | window.document.body.appendChild(this.stats.dom); 48 | 49 | new OrbitControls(this.camera, this.renderer.domElement); 50 | 51 | this.render(); 52 | } 53 | 54 | private render() { 55 | this.stats.begin(); 56 | window.requestAnimationFrame(() => this.render()); 57 | const skyboxMesh = this.scene.getObjectByName('skyboxMesh'); 58 | 59 | skyboxMesh.rotation.y += 0.001; 60 | 61 | this.renderer.render(this.scene, this.camera); 62 | this.stats.end(); 63 | } 64 | 65 | private onWindowResize() { 66 | this.renderer.setSize(window.innerWidth, window.innerHeight); 67 | this.camera.aspect = window.innerWidth / window.innerHeight; 68 | this.camera.updateProjectionMatrix(); 69 | } 70 | 71 | } 72 | -------------------------------------------------------------------------------- /src/assets/box.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hungtcs-lab/three-js-demo/d31708d4a5bc13348c6b3f36f368030560c37692/src/assets/box.jpg -------------------------------------------------------------------------------- /src/assets/skybox/bk.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hungtcs-lab/three-js-demo/d31708d4a5bc13348c6b3f36f368030560c37692/src/assets/skybox/bk.png -------------------------------------------------------------------------------- /src/assets/skybox/dn.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hungtcs-lab/three-js-demo/d31708d4a5bc13348c6b3f36f368030560c37692/src/assets/skybox/dn.png -------------------------------------------------------------------------------- /src/assets/skybox/ft.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hungtcs-lab/three-js-demo/d31708d4a5bc13348c6b3f36f368030560c37692/src/assets/skybox/ft.png -------------------------------------------------------------------------------- /src/assets/skybox/lf.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hungtcs-lab/three-js-demo/d31708d4a5bc13348c6b3f36f368030560c37692/src/assets/skybox/lf.png -------------------------------------------------------------------------------- /src/assets/skybox/rt.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hungtcs-lab/three-js-demo/d31708d4a5bc13348c6b3f36f368030560c37692/src/assets/skybox/rt.png -------------------------------------------------------------------------------- /src/assets/skybox/up.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hungtcs-lab/three-js-demo/d31708d4a5bc13348c6b3f36f368030560c37692/src/assets/skybox/up.png -------------------------------------------------------------------------------- /src/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hungtcs-lab/three-js-demo/d31708d4a5bc13348c6b3f36f368030560c37692/src/favicon.png -------------------------------------------------------------------------------- /src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 |
4 | 5 | 6 | 7 | 8 |