render basic cube lol

Author: tibordp

package.json

@@ -8,10 +8,15 @@
   },
   "devDependencies": {
     "clean-webpack-plugin": "^3.0.0",
+    "css-loader": "^5.0.0",
     "file-loader": "^6.1.1",
     "html-webpack-plugin": "^4.5.0",
+    "style-loader": "^2.0.0",
     "webpack": "^5.2.0",
     "webpack-cli": "^4.1.0",
     "webpack-dev-server": "^3.11.0"
+  },
+  "dependencies": {
+    "three": "^0.121.1"
   }
 }

src/index.css

@@ -0,0 +1,2 @@
+body { margin: 0; }
+canvas { display: block; }

src/index.js

@@ -11,19 +11,87 @@
  * limitations under the License.
  */
 
-import rubiks from './rubiks.js';
-import rubiksModule from './rubiks.wasm';
+import rubiks from "./rubiks.js";
+import rubiksModule from "./rubiks.wasm";
+import * as THREE from "three";
+import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';
+
+import "./index.css";
 
 const promise = rubiks({
   locateFile(path) {
-    if(path.endsWith('.wasm')) {
+    if (path.endsWith(".wasm")) {
       return rubiksModule;
     }
     return path;
-  }
+  },
 });
 
-promise.then(module => {
+promise.then((module) => {
   console.log(module);
   console.log(JSON.stringify(module._fib(12)));
 });
+
+function init() {
+  var scene = new THREE.Scene();
+  var camera = new THREE.PerspectiveCamera(
+    75,
+    window.innerWidth / window.innerHeight,
+    0.1,
+    1000
+  );
+
+  var renderer = new THREE.WebGLRenderer();
+  renderer.setSize(window.innerWidth, window.innerHeight);
+  document.body.appendChild(renderer.domElement);
+
+  const makeCube = (color) => {
+    var geometry = new THREE.BoxGeometry();
+    var material = new THREE.MeshBasicMaterial({ color });
+    return new THREE.Mesh(geometry, material);
+  };
+
+  const cube = new THREE.Group()
+  for (var i = 0; i < 3; ++i) {
+    for (var j = 0; j < 3; ++j) {
+      for (var k = 0; k < 3; ++k) {
+        const cube1 = makeCube( ((((i + 1) * 50) * 255) + ((j + 1) * 50)) * 255 + ((k + 1) * 50));
+        cube1.position.set((i-1)*1.05, (j-1)*1.05, (k-1)*1.05)
+        cube.add(cube1);
+      }
+    }
+  }
+
+  scene.add(cube);
+
+  const controls = new OrbitControls(camera, renderer.domElement);
+  controls.enableDamping = true
+  controls.dampingFactor = 0.25
+  controls.enableZoom = false
+
+  camera.position.z = 6;
+
+  
+  const onWindowResize = () => {    
+    camera.aspect = window.innerWidth / window.innerHeight;
+    camera.updateProjectionMatrix();
+    renderer.setSize( window.innerWidth, window.innerHeight );
+  }
+  
+  window.addEventListener( 'resize', onWindowResize, false );
+
+  var animate = function () {
+    requestAnimationFrame(animate);
+
+    cube.rotation.x += 0.01;
+    cube.rotation.y += 0.01;
+
+    renderer.render(scene, camera);
+  };
+
+  animate();
+}
+
+
+
+init();

webpack.config.js

@@ -13,34 +13,47 @@
 
 const webpack = require("webpack");
 const path = require("path");
-const HtmlWebpackPlugin = require('html-webpack-plugin');
-const { CleanWebpackPlugin } = require('clean-webpack-plugin');
+const HtmlWebpackPlugin = require("html-webpack-plugin");
+const { CleanWebpackPlugin } = require("clean-webpack-plugin");
 
 module.exports = {
   context: path.resolve(__dirname, "."),
   entry: "./src/index.js",
   output: {
     path: path.resolve(__dirname, "dist"),
-    filename: "bundle.js"
+    filename: '[name].[contenthash:8].js',
   },
   plugins: [
     new CleanWebpackPlugin(),
-     new HtmlWebpackPlugin({
-       title: 'Output Management',
-     }),
-   ],  
+    new HtmlWebpackPlugin({
+      title: "Output Management",
+    }),
+  ],
+  optimization: {
+    runtimeChunk: 'single',
+     splitChunks: {
+       cacheGroups: {
+         vendor: {
+           test: /[\\/]node_modules[\\/]/,
+           name: 'vendors',
+           chunks: 'all',
+         },
+       },
+     },
+  },
   module: {
     rules: [
       // wasm files should not be processed but just be emitted and we want
       // to have their public URL.
       {
-        test: /rubiks\.wasm$/,
+        test: /\.wasm$/,
         type: "javascript/auto",
         loader: "file-loader",
-      }
-    ]
+      },
+      { test: /\.css$/, use: ["style-loader", "css-loader"] },
+    ],
   },
   devServer: {
-    contentBase: path.join(__dirname, 'dist')
-  }
+    contentBase: path.join(__dirname, "dist"),
+  },
 };