Initial implementation.

.gitignore

@@ -0,0 +1,3 @@
+.parcel-cache
+dist
+node_modules

.parcelrc

@@ -0,0 +1,9 @@
+{
+  "extends": [
+    "@parcel/config-default"
+  ],
+  "reporters": [
+    "...",
+    "parcel-reporter-static-files-copy"
+  ]
+}

README.md

@@ -0,0 +1,13 @@
+# Low-Poly Cottage in WebGL
+
+A scene of a low-poly cottage rendered in WebGL using [Three.js](https://threejs.org/).
+
+**http://cottage.mikemurry.com**
+
+![Screenshot of a low-poly 3d cottage.](./docs/cottage.jpg)
+
+## Making Of
+
+The 3d model was built in Blender, adapted from the ["Low Poly Landscapes"](https://www.gamedev.tv/courses/1462117) course on [GameDev.tv](https://www.gamedev.tv). A time-lapse of the creation of the model is available on YouTube: https://youtu.be/xQi_ulWv4iA
+
+[![](./docs/youtube.jpg)](https://youtu.be/xQi_ulWv4iA)

app.js

@@ -0,0 +1,65 @@
+import {
+  Scene,
+  PerspectiveCamera,
+  WebGLRenderer,
+  BoxGeometry,
+  MeshBasicMaterial,
+  Mesh,
+} from "three";
+import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader.js";
+
+const scene = new Scene();
+const camera = new PerspectiveCamera(
+  75,
+  window.innerWidth / window.innerHeight,
+  0.1,
+  1000
+);
+const renderer = new WebGLRenderer();
+const loader = new GLTFLoader();
+
+renderer.setSize(window.innerWidth, window.innerHeight);
+document.body.appendChild(renderer.domElement);
+
+const geometry = new BoxGeometry();
+const material = new MeshBasicMaterial({ color: 0x00ff00 });
+const cube = new Mesh(geometry, material);
+
+scene.add(cube);
+
+camera.position.z = 5;
+
+loader.load(
+  "cottage.gltf",
+  function (gltf) {
+    scene.add(gltf.scene);
+    console.log(gltf);
+
+    const objects = {};
+
+    console.log(gltf.scene.children);
+
+    gltf.scene.children.forEach((child) => {
+      if (child) {
+        objects[child.name] = child;
+      }
+    });
+
+    console.log(children);
+  },
+  function (xhr) {
+    console.log((xhr.loaded / xhr.total) * 100 + "% loaded");
+  },
+  function (error) {
+    console.error(error);
+  }
+);
+
+function animate() {
+  requestAnimationFrame(animate);
+  cube.rotation.x += 0.01;
+  cube.rotation.y += 0.01;
+  renderer.render(scene, camera);
+}
+
+animate();