From dab61a20262823557196774d94cb2e6eafc93e3e Mon Sep 17 00:00:00 2001 From: fdai7303 Date: Thu, 29 Jun 2023 08:01:02 +0200 Subject: [PATCH] added exercise 08 and 09 --- dist/threejssimple.html | 18 +++++++ src/09/setup-threejssimple.ts | 27 ++++++++++ src/09/threejssimple.ts | 95 +++++++++++++++++++++++++++++++++++ 3 files changed, 140 insertions(+) create mode 100644 dist/threejssimple.html create mode 100644 src/09/setup-threejssimple.ts create mode 100644 src/09/threejssimple.ts 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