added exercise 08 and 09

1 year ago · dab61a2026
3 changed files with 140 additions and 0 deletions
--- a/dist/threejssimple.html
+++ b/dist/threejssimple.html
@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>ThreeJS & TypeScript</title>
+    <!-- loads some basic CSS resets and Styles -->
+    <style>
+        html, body, canvas {margin: 0;padding: 0;border: 0;}
+        canvas {display: block;}
+    </style>
+</head>
+<body>
+<!-- Application Canvas -->
+<canvas id="app"></canvas>
+<!-- this needs to be called here to ensure all elements are available -->
+<script src="threejssimple.bundle.js" type="text/javascript"></script>
+</body>
+</html>
--- a/src/09/setup-threejssimple.ts
+++ 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();
+});
--- a/src/09/threejssimple.ts
+++ 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 ];
+}