init

.gitignore

@@ -0,0 +1,3 @@
+node_modules
+package-lock.json
+dist

package.json

@@ -0,0 +1,42 @@
+{
+    "name": "webdj.frontend",
+    "version": "1.0.0",
+    "description": "",
+    "private": "true",
+    "scripts": {
+        "build": "webpack",
+        "serve": "serve dist -p 8080",
+        "watch": "npm-watch",
+        "dev": "concurrently \"npm:serve\" \"npm:watch\""
+    },
+    "watch": {
+        "build": {
+            "patterns": [
+                "src"
+            ],
+            "extensions": "ts,scss",
+            "legacyWatch": true,
+            "delay": 2500
+        }
+    },
+    "author": "",
+    "license": "ISC",
+    "devDependencies": {
+        "@types/three": "^0.135.0",
+        "concurrently": "^6.4.0",
+        "css-loader": "^6.5.1",
+        "html-webpack-plugin": "^5.5.0",
+        "mini-css-extract-plugin": "^2.4.5",
+        "npm-watch": "^0.11.0",
+        "sass": "^1.44.0",
+        "sass-loader": "^12.4.0",
+        "serve": "^13.0.2",
+        "ts-loader": "^9.2.6",
+        "typescript": "^4.5.3",
+        "webpack": "^5.65.0",
+        "webpack-cli": "^4.9.1"
+    },
+    "dependencies": {
+        "three": "^0.135.0"
+    }
+}

src/index.scss

@@ -0,0 +1,3 @@
+body {
+    margin: 0;
+}

src/index.ts

@@ -0,0 +1,37 @@
+import * as THREE from 'three';
+import "./index.scss";
+
+let camera: THREE.PerspectiveCamera, scene: THREE.Scene, renderer: THREE.WebGLRenderer;
+let geometry: THREE.BoxGeometry, material: THREE.MeshNormalMaterial, mesh: THREE.Mesh<THREE.BoxGeometry, THREE.MeshNormalMaterial>
+;
+
+init();
+
+function init() {
+
+	camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 0.01, 10 );
+	camera.position.z = 1;
+
+	scene = new THREE.Scene();
+
+	geometry = new THREE.BoxGeometry( 0.2, 0.2, 0.2 );
+	material = new THREE.MeshNormalMaterial();
+
+	mesh = new THREE.Mesh( geometry, material );
+	scene.add( mesh );
+
+	renderer = new THREE.WebGLRenderer( { antialias: true } );
+	renderer.setSize( window.innerWidth, window.innerHeight );
+	renderer.setAnimationLoop( animation );
+	document.body.appendChild( renderer.domElement );
+
+}
+
+function animation( time: number ) {
+
+	mesh.rotation.x = time / 2000;
+	mesh.rotation.y = time / 1000;
+
+	renderer.render( scene, camera );
+
+}

tsconfig.json

@@ -0,0 +1,12 @@
+{
+  "compilerOptions": {
+    "outDir": "./dist/",
+    "sourceMap": true,
+    "noImplicitAny": true,
+    "module": "es6",
+    "target": "es5",
+    "jsx": "react",
+    "allowJs": true,
+    "moduleResolution": "node"
+  }
+}

webpack.config.js

@@ -0,0 +1,62 @@
+const path = require('path'),
+    HtmlWebpackPlugin = require('html-webpack-plugin'),
+    MiniCssExtractPlugin = require('mini-css-extract-plugin');
+
+
+module.exports = {
+    entry: './src/index.ts',
+    devtool: 'inline-source-map',
+    mode: 'development',
+    module: {
+        rules: [
+            {
+                test: /\.tsx?$/,
+                use: 'ts-loader',
+                exclude: /node_modules/,
+            },
+            {
+                test: /\.s[ac]ss$/i,
+                use: [
+                    MiniCssExtractPlugin.loader,
+                    "css-loader",
+                    "sass-loader",
+                ],
+            }
+        ],
+    },
+    resolve: {
+        extensions: ['.tsx', '.ts', '.js'],
+    },
+    output: {
+        filename: '[name].[contenthash].js',
+        path: path.resolve(__dirname, 'dist'),
+        clean: true,
+    },
+    optimization: {
+        runtimeChunk: 'single',
+        splitChunks: {
+            chunks: 'all',
+            maxInitialRequests: Infinity,
+            minSize: 0,
+            cacheGroups: {
+                vendor: {
+                    test: /[\\/]node_modules[\\/]/,
+                    name(module) {
+                        // get the name. E.g. node_modules/packageName/not/this/part.js
+                        // or node_modules/packageName
+                        const packageName = module.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/)[1];
+
+                        // npm package names are URL-safe, but some servers don't like @ symbols
+                        return `npm.${packageName.replace('@', '')}`;
+                    },
+                },
+            },
+        },
+    },
+    plugins: [
+        new HtmlWebpackPlugin({
+            title: 'webdj'
+        }),
+        new MiniCssExtractPlugin()
+    ],
+};