Removed unnecessary stuff from webpack config, threejs demo++

BrandonMorr · BrandonMorr · commit 897a24a2ae05 · 2020-05-26T23:20:12.000+10:00
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -15,5 +15,6 @@ module.exports = {
     },
     "rules": {
       "no-console": "off",
+      "no-unused-vars": 1
     }
 };
diff --git a/public/index.html b/public/index.html
@@ -3,6 +3,7 @@
   <head>
     <meta charset="UTF-8"/>
     <meta name="author" content="Brandon Morrissey"/>
+    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
 
     <title>Blam</title>
 
diff --git a/src/client/client.js b/src/client/client.js
@@ -1,38 +1,52 @@
 import * as THREE from 'three';
+import { FirstPersonControls } from 'three/examples/jsm/controls/FirstPersonControls';
 
+// The scene object.
 const scene = new THREE.Scene();
 
+// Used to track time deltas.
+const clock = new THREE.Clock();
+
+// Create a camera object.
 const camera = new THREE.PerspectiveCamera(90, window.innerWidth / window.innerHeight, 0.1, 1000);
 camera.position.z = 10;
 
+// Create a renderer, append it to the document body.
 const renderer = new THREE.WebGLRenderer({ antialias: true });
 renderer.setSize(window.innerWidth, window.innerHeight);
 renderer.setPixelRatio(window.devicePixelRatio);
 renderer.setClearColor(0x000000, 1);
 
-document.body.appendChild(renderer.domElement);
+document.body.appendChild(renderer.domElement)
+
+// First person camera controller.
+const controls = new FirstPersonControls(camera, renderer.domElement);
+controls.movementSpeed = 5;
+controls.lookSpeed = 0.5;
 
+// Create a cube mesh with a geometry (shape) + material (color), add to scene.
 const geometry = new THREE.BoxGeometry();
 const material = new THREE.MeshBasicMaterial({ color: 0x87E0FF });
 const cube = new THREE.Mesh(geometry, material);
 
-console.log(cube);
-
 scene.add(cube);
 
+// Adjust renderer, aspect ratio on resize.
+window.addEventListener('resize', () => {
+	renderer.setSize(window.innerWidth, window.innerHeight);
+  camera.aspect = window.innerWidth / window.innerHeight;
+  camera.updateProjectionMatrix();
+});
+
+// Core loop.
 function animate() {
 	requestAnimationFrame(animate);
+
+	controls.update(clock.getDelta());
 	renderer.render(scene, camera);
+
   cube.rotation.x += 0.01;
   cube.rotation.y += 0.01;
 }
 
 animate();
-
-function onWindowResize() {
-  renderer.setSize(window.innerWidth, window.innerHeight);
-  camera.aspect = window.innerWidth / window.innerHeight;
-  camera.updateProjectionMatrix();
-}
-
-window.addEventListener('resize', onWindowResize);
diff --git a/webpack.client.config.js b/webpack.client.config.js
@@ -1,20 +1,13 @@
 const path    = require('path');
-const webpack = require('webpack');
 
 const www         = path.join(__dirname, 'public');
 const nodeModules = path.join(__dirname, 'node_modules');
 const server      = path.join(__dirname, 'src/server');
 const client      = path.join(__dirname, 'src/client/client');
 
-const definePlugin = new webpack.DefinePlugin({
-  CANVAS_RENDERER: JSON.stringify(true),
-  WEBGL_RENDERER:  JSON.stringify(true)
-});
-
 module.exports = {
   mode: 'development',
   devtool: 'inline-source-map',
-  plugins: [ definePlugin ],
   entry: {
     app: client
   },

Original file line number	Diff line number	Diff line change
`@@ -15,5 +15,6 @@ module.exports = {`
`15`	`15`	`},`
`16`	`16`	`"rules": {`
`17`	`17`	`"no-console": "off",`
	`18`	`+ "no-unused-vars": 1`
`18`	`19`	`}`
`19`	`20`	`};`