diff --git a/dist/threejssimple.html b/dist/threejssimple.html
new file mode 100644
index 0000000..dc42fae
--- /dev/null
+++ b/dist/threejssimple.html
@@ -0,0 +1,18 @@
+
+
+
+
+ ThreeJS & TypeScript
+
+
+
+
+
+
+
+
+
+
diff --git a/src/09/setup-threejssimple.ts b/src/09/setup-threejssimple.ts
new file mode 100644
index 0000000..436d43a
--- /dev/null
+++ b/src/09/setup-threejssimple.ts
@@ -0,0 +1,27 @@
+import * as THREE from 'three';
+import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
+
+import { createScene } from './threejssimple'
+
+
+function init() {
+
+ const canvas = document.getElementById("app") as HTMLCanvasElement;
+ if (canvas === null)
+ return;
+
+ let [ renderer, scene, camera ] = createScene(window, canvas);
+
+ function animate() {
+ requestAnimationFrame(animate);
+ renderer.render(scene, camera);
+ }
+
+ animate();
+}
+
+
+window.addEventListener('load', evt => {
+
+ init();
+});
diff --git a/src/09/threejssimple.ts b/src/09/threejssimple.ts
new file mode 100644
index 0000000..bec1393
--- /dev/null
+++ b/src/09/threejssimple.ts
@@ -0,0 +1,95 @@
+import * as THREE from 'three';
+import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
+
+function vertexShaderPerFaceColors() {
+ return `
+ void main() {
+ vec4 modelViewPosition = modelViewMatrix * vec4(position, 1.0);
+ gl_Position = projectionMatrix * modelViewPosition;
+ }
+ `
+}
+
+function fragmentShaderPerFaceColors() {
+ return `
+ uniform vec3 col;
+
+ void main() {
+ gl_FragColor = vec4(col, 1.0);
+ }
+ `
+}
+
+function vertexShaderPerVertexColors() {
+ // TODO: Create a new vertex shader that receives a color vector as attribute 'col'
+ // TODO: and creates a varying 'vcol' from this color vector.
+}
+
+function fragmentShaderPerVertexColors() {
+ // TODO: Create a new fragment shader that receives a color vector as varying 'vcol'
+ // TODO: and sets the fragment color from this vector.
+}
+
+export function createScene(window: Window, canvas: HTMLCanvasElement): [ THREE.WebGLRenderer, THREE.Scene, THREE.Camera ] {
+
+ // Create a new scene
+ const scene = new THREE.Scene();
+
+ // Create a new camera
+ const camera = new THREE.PerspectiveCamera(90, window.innerWidth / window.innerHeight, 0.1, 1000);
+
+ // Create a WebGL renderer for the scene
+ const renderer = new THREE.WebGLRenderer({ canvas: canvas });
+
+ // Add mouse interaction
+ const controls = new OrbitControls(camera, renderer.domElement);
+
+ renderer.setSize(window.innerWidth, window.innerHeight);
+ document.body.appendChild(renderer.domElement);
+
+
+ // Create a new BufferGeometry {@link https://threejs.org/docs/#api/en/core/BufferGeometry}
+ // that contains the first triangle.
+ const geometry1 = new THREE.BufferGeometry();
+
+ const vertices1 = new Float32Array( [
+ // TODO: Create a linear array with three vertices:
+ // TODO: (-2, -3, 0); (2, -3, 0); (0, -1, 0)
+ ]);
+
+ geometry1.setAttribute('position', new THREE.BufferAttribute(vertices1, 3));
+
+ const colors1 = new Float32Array( [
+
+ // TODO: Create a linear array containing the color yellow
+ ])
+
+ let shaderMaterial1 = new THREE.ShaderMaterial({
+ uniforms: { col: { value: colors1 }},
+ fragmentShader: fragmentShaderPerFaceColors(),
+ vertexShader: vertexShaderPerFaceColors(),
+ });
+
+ // Create a THREE.Mesh {@link https://threejs.org/docs/#api/en/objects/Mesh}
+ // from the geometry and the shader material
+ const triangle1 = new THREE.Mesh(geometry1, shaderMaterial1);
+
+ // add it to the scene
+ scene.add(triangle1);
+
+ // TODO: Create a new THREE.BufferGeometry for the second triangle.
+ // TODO: Create a new linear Float32Array containing the vertices:
+ // TODO: (-2, 1, 0); (2, 1, 0); (0, 3, 0)
+ // TODO: Create a linear Float32Array containing vertex colors:
+ // TODO: yellow for the 1st vertex, blue for the 2nd vertex, orange for the 3rd vertex.
+ // TODO: Create a new Vertex-Shader, that receives per vertex colors in an
+ // TODO: attribute named 'col', and passes these on to a Fragment-Shader as a varying named 'vcol'.
+ // TODO: Create a new Fragment Shader, that receives the varying 'vcol' and sets the
+ // TODO: fragment color to this color vector.
+ // TODO: Create a new ShaderMaterial combining these new Vertex- and Fragment-Shaders.
+ // TODO: Set the 'position' and 'col' attributes in the BufferGeometry, and create
+ // TODO: a new Mesh combining the newly created BufferGeometry and ShaderMaterial.
+ // TODO: Add the mesh to the scene.
+ camera.position.z = 5;
+ return [ renderer, scene, camera ];
+}
\ No newline at end of file