{"id":16147406,"url":"https://github.com/edap/udk-3d-web-fundamentals","last_synced_at":"2025-04-23T17:43:33.649Z","repository":{"id":200207971,"uuid":"704545792","full_name":"edap/udk-3d-web-fundamentals","owner":"edap","description":null,"archived":false,"fork":false,"pushed_at":"2024-02-05T11:00:56.000Z","size":2381,"stargazers_count":2,"open_issues_count":0,"forks_count":2,"subscribers_count":4,"default_branch":"main","last_synced_at":"2025-03-30T02:03:02.171Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/edap.png","metadata":{"files":{"readme":"Readme.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null}},"created_at":"2023-10-13T13:42:36.000Z","updated_at":"2024-11-24T20:38:21.000Z","dependencies_parsed_at":"2023-11-08T04:11:25.885Z","dependency_job_id":"7f7229ed-06c1-47aa-8449-5180b2d83855","html_url":"https://github.com/edap/udk-3d-web-fundamentals","commit_stats":null,"previous_names":["edap/udk-3d-web-fundamentals"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/edap%2Fudk-3d-web-fundamentals","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/edap%2Fudk-3d-web-fundamentals/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/edap%2Fudk-3d-web-fundamentals/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/edap%2Fudk-3d-web-fundamentals/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/edap","download_url":"https://codeload.github.com/edap/udk-3d-web-fundamentals/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250483193,"owners_count":21438001,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-10-10T00:25:12.549Z","updated_at":"2025-04-23T17:43:33.628Z","avatar_url":"https://github.com/edap.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"## Fundamentals of 3D animation for the web\n\n\nThe goal of the course is to give students the tools to create a video-game, an open space or a 3D animation that runs in the browser, can be self-hosted without the need of a social media platform, and can be shared with a link. Each student will develop its own game/animation, with the only constrain to create a link to the game/animation of another classmate.\n\nWe will only use open source tools such as Three.js and Blender. \n\nThe course is aimed at beginners, some familiarity with variables, loops and arrays is recommended but not mandatory.\n\n\n![example](cover.jpg)\n*Image from the three.js website*\n\n\n\n\n### 01\n\n- Examples of 3D in the browser\n- The theater example\n- Offline rendering VS realtime rendering. The Monitor and the HZ\n- How is the course structured\n- How is the code structured\n\n\n### 02\n\n- Add light. Add more lights.\n- Intro to exadecimal colors.\n- Intro to transformation.\n- Move things with sin(time) and cos(time) and the property `position`. Unit Circle, wave, amplitude and frequence.\n- Check the [documentation](https://threejs.org/docs/#api/en/core/Object3D) for `scale`, `rotation`, apply the cos(time) or sine(time) to those two properties.\n- Intro to matrices order multiplication.\n- Exercise in class. Take inspiration from one the abstract art of the beginning of the '900 and try to make a 3D composition.\n- Exercise in class. Use the function `camera.lookAt(mesh.position)` to have the camera always following an object.\n- Install [node.js LTS](https://nodejs.org/en/). Close your terminal (called Command Prompt on Windows) and open it again. Write in the terminal the command 'node -v'. You can open a small window with a terminal directly into Visual Studio Code by pressing 'CTRL + J'(Win) or 'CMD + J' (Mac). Download the folder `02`. `cd` into that folder, run `npm install`.\n\n\n### 03\n- Moving things around. Animations that are not bounded to the frame rate. Why is that important?\n- Getting mouse events.\n- Exercise:Can you map the position of your mouse in the screen from -1 to +1 ?\n- Exercise: Which other event can you log? (https://www.w3schools.com/jsref/met_document_addeventlistener.asp)\n\n```\nlet time = Date.now()\n\nconst tick = () =\u003e\n{\n    const currentTime = Date.now()\n    const deltaTime = currentTime - time\n    time = currentTime\n\n    // Update objects\n    mesh.position.y += 0.05 * deltaTime\n}\n```\n\n- Intro to the scene Graph.\n- Exercise. Use `Group` to move/scale/rotate groups objects.\n- Exercise. Use `Group` to create something that resembles the solar system, with planets rotating around the scene.\n\n\n```\nconst group = new THREE.Group()\ngroup.scale.x = 3\ngroup.rotation.x = 0.8\nscene.add(group)\n```\n\n### 04\n\nFullscreen (app 02-b), pack your website and publish it to neocities.org\n\n### 05\n\nOrbitControls (03). \n\nIntro to GIT\n\nLoad a texture\n\nLoad HDR\n\n\n### 06\n\nRound of presentation\n\nIntro to PBR\n\nMatcap materials\n\nIntro to Blender\n\n### 07\n\n\n\nExport to .gltf file format.\n\nIntro to bones and armature.\n\nIntro to keyframe animation.\n\nIntro to the animation workspace.\n\nIntro to loop animations.\n\ncreate a small animation. \n\nExport again to .gltf format\n\nLoad a GLTF Model. Make your own or download it from [here](https://github.com/KhronosGroup/glTF-Sample-Models) \n\n\n\n\n\n### 08\n\nVincent intro to UV mapping\n\nFire events animation [07, 07b, 07c].\n\nWhat is light backing\n[How to bake lights in Blender](https://twitter.com/arturitu/status/966257367871606784)\n\nMesh optimizer. Use draco or [this](https://github.com/zeux/meshoptimizer#gltfpack)\nExercise: Works with one of these 2 optimizer, reach the point where too much compression creates issues with your mesh.\n\n### 09\n\nAdding text to [threejs](https://threejs.org/docs/#manual/en/introduction/Creating-text) sketch.\n\n\n## Documentation\n\n- [threejs docs](https://threejs.org/manual/#en/fundamentals)\n- [making a game in threejs](https://threejs.org/manual/#en/game)\n- [Class Notes](https://write.udk-berlin.de/p/Fundamentals_of_3D_animation_for_the_web)\n\n#### Working with the terminal.\n\nWindows, Mac and Linux have a terminal. On Mac and Linux, look for \"terminal\" in your applications. On Windows look for PowerShell, avoid the Command Prompt.\n\nThe navigation commands that you need to move around in your directories using the terminal are:\n\n- `pwd`. It means \"print working directory\" and it simply print on screen the path on which you are at the moment.\n- `ls`. It means \"list\", it lists all the files and directory in the folder where you currently are.\n- `cd`, followed by the name of the folder you want to open. It means \"change directory\", and it is the equivalent of double clicking on a folder.\n- `cd ..`. It means move back of one level\n\n\n\n\n#### NPM\n - `npm install`. Install all the dependencies listed in `package.json`\n - `npm run dev`. Run a server\n - `npm run build`. Pack all our sources into static\n\n\n#### Performance Tips\n\n[Discover Three.js](https://discoverthreejs.com/tips-and-tricks/)\n[Mr. Doob's list]()\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fedap%2Fudk-3d-web-fundamentals","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fedap%2Fudk-3d-web-fundamentals","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fedap%2Fudk-3d-web-fundamentals/lists"}