{"id":15204062,"url":"https://github.com/emilydaykin/three-js","last_synced_at":"2026-02-19T13:02:14.837Z","repository":{"id":256215317,"uuid":"854559072","full_name":"emilydaykin/three-js","owner":"emilydaykin","description":"Intro to ThreeJS \u0026 WebGL","archived":false,"fork":false,"pushed_at":"2024-09-09T15:59:17.000Z","size":796,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-10-30T11:13:29.073Z","etag":null,"topics":["three-js","web-gl"],"latest_commit_sha":null,"homepage":"","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/emilydaykin.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,"publiccode":null,"codemeta":null}},"created_at":"2024-09-09T11:49:16.000Z","updated_at":"2024-09-12T08:23:28.000Z","dependencies_parsed_at":null,"dependency_job_id":"46e07293-d4e3-432e-98fc-bcf5df7a3937","html_url":"https://github.com/emilydaykin/three-js","commit_stats":{"total_commits":5,"total_committers":1,"mean_commits":5.0,"dds":0.0,"last_synced_commit":"cb6f9e1728b2f197ac47883494a3ec63e5984cbc"},"previous_names":["emilydaykin/three-js"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/emilydaykin/three-js","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/emilydaykin%2Fthree-js","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/emilydaykin%2Fthree-js/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/emilydaykin%2Fthree-js/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/emilydaykin%2Fthree-js/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/emilydaykin","download_url":"https://codeload.github.com/emilydaykin/three-js/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/emilydaykin%2Fthree-js/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29614591,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-19T10:52:55.328Z","status":"ssl_error","status_checked_at":"2026-02-19T10:52:26.323Z","response_time":117,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":["three-js","web-gl"],"created_at":"2024-09-28T05:20:34.464Z","updated_at":"2026-02-19T13:02:14.820Z","avatar_url":"https://github.com/emilydaykin.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Three.js Learnings\n\nhttps://threejs.org/\n\n```\nnpm run dev\n```\n\n## Table of Contents  \n1. [Elements](#🧙-the-4-elements)  \n2. [Transformations](#🪄-transforming-objects)  \n3. [Animations](#🌀-animations)  \n\n  \n## 🧙 The 4 Elements\n#### Scenes\n* like a container we put objects, models, particles, lights etc in\n  ```javascript\n  const scene = new THREE.Scene()\n  ```\n\n#### Objects \n  * primitive geometrics, imported models, particles, lights etc \n  * to have an object, you need a **Mesh** = a visible object (a combination of a geometry - the shape - and a material - how it looks)\n    ```javascript\n    const geometric = new THREE.BoxGeometry(1, 1, 1) // width, height, depth of box\n    const material = new THREE.MeshBasicMaterial({ color: '#3cbbf5d' });\n  \n    const mesh = new THREE.Mesh(geometry, material);\n    ```\n  * An object won't show up unless you add it to a **scene**!\n    ```javascript\n    scene.add(mesh);\n    ```\n\n#### Camera\n* a theoretical point of view used when rendering\n* can have multiple but usually we only use one\n* many types and settings\n* PerspectiveCamera (if an object is close, it should be bigger; if further away, should be smaller)\n  ```javascript\n  // field of view (how large your vision angle is)\n  // aspect ratio (width divided by height)\n  const sizes = {\n    width: 800,\n    height: 600,\n  };\n\n  const fieldOfView = 75 // 75 is actually huge\n  const aspectRatio = sizes.width / sizes.height;\n\n  const camera = new THREE.PerspectiveCamera(fieldOfView, aspectRatio); \n  ```\n* Again, got to add it to the scene!\n  ```javascript\n  scene.add(camera);\n  ```\n* `lookAt` to tell the camera where to look\n  ```javascript\n  // camera.lookAt(new THREE.Vector3(-2, 0, 0)); // provide a vector 3 (coordinates) to look at\n  camera.lookAt(mesh.position); // look at the centre of my object (got to do `.position`! not just mesh)\n  ```\n\n#### Renderer\n* Will render the scene seen from the camera's POV\n* Result/stuff will be drawn/rendered INSIDE the canvas\n  ```html\n  \u003c!-- HTML --\u003e\n  \u003ccanvas class='webgl'\u003e\u003c/canvas\u003e\n  ```\n  ```javascript\n  // JavaScript\n  const canvas = document.querySelector('canvas.webgl');\n  ```\n* Default renderer: **WebGL Renderer**\n  ```javascript\n  const renderer = new THREE.WebGLRenderer({\n    canvas: canvas,\n  });\n  ```\n\n## 🪄 Transforming Objects\n\n* There are 4: **position**, **scale**, **rotation**, and **quarternion**\n* These properties (of a Mesh) 👆 will be compiled into *matrices*. Indivudually they're vectors (2D or 3D) or Eulers\n* Combining Transformations with those 4 can be done in any order\n* You can put objects inside groups and use the transformations on the group as a whole (so that you don't have to transform each individual object!!)\n\n\n#### Position\n* Lets you move objects\n* Has to be done BEFORE rendering\n* Inherits from (therefore is a) Vector3 (a class representing things in space)\n  ```javascript\n  // ---- //\n  mesh.position.x = 0.7;\n  mesh.position.y = -0.6;\n  mesh.position.z = 1;\n  // 👆 same same 👇\n  mesh.position.set(0.7, -0.6, 1);\n  // ---- //\n  ```\n\n#### Scale\n* Size of the object\n* The scale property (of a Mesh) is (an instance of) a Vector3 (ie. 3D vector)\n  ```javascript\n  mesh.scale.x = 2;\n  mesh.scale.y = 0.5;\n  mesh.scale.z = 0.5;\n  // 👆 same same 👇\n  mesh.scale.set(2, 0.5, 0.5);\n  ```\n\n#### Rotation\n* 2 ways of doing it (Rotation and Quaternion)\n* Rotation is an **Euler**, NOT a Vector3\n* Measurement is in radians! so 3.1416 = π = 180° = half a circle (`Math.PI`)\n* ORDER MATTERS: `y` is applied first (left right etc), THEN `x` (up, down etc)\n  ```\n  mesh.rotation.reorder('YXZ')\n  ```\n\n#### Quaternion\n* [Docs](https://threejs.org/docs/#api/en/math/Quaternion)\n* Makes rotations easier / more mathematical\n\n## 🌀 Animations\n* RequestAnimationFrame: a function to call the function provided on the ***NEXT*** frame, it isn't simply 'to do animations'\n* It's bascially an infinite loop 😅\n  ```javascript\n  const tick = () =\u003e {\n    window.requestAnimationFrame(tick)  // 60 ticks per second cus the computer's frame-per-second (FPS) is 60!\n  };\n\n  tick();\n  ```\n* Got to adapt to the **frame rate** (since some screens *don't* run at 60 FPS):\n  * Option 1: Using the time delta (in milliseconds)\n    ```javascript\n    let startTime = Date.now();\n\n    const tick = () =\u003e {\n      // Time\n      const currentTime = Date.now();\n      const delta = currentTime - startTime;\n      startTime = currentTime;\n\n      // Update objects\n      mesh.rotation.y += 0.002 * delta; \n      // 👆 now, we've made this rotate at the same rate regardless of the Frame Rate on whichever browser it's showing up on!\n    ```\n  * Option 2: using Clock (in seconds - easier to work with)\n    ```javascript\n    let startTime = Date.now();\n\n    const tick = () =\u003e {\n      // Time\n      const currentTime = Date.now();\n      const delta = currentTime - startTime;\n      startTime = currentTime;\n\n      // Update objects\n      mesh.rotation.y += 0.002 * delta; \n      // 👆 now, we've made this rotate at the same rate regardless of the Frame Rate on whichever browser it's showing up on!\n    ```\n* Can use a library to help with animations\n  * e.g. GSAP (`npm i --save gsap@3.5.1`)\n  * to have more control, create tweens, create timelines\n  ```javascript\n  gsap.to(mesh.position, { duration: 1, delay: 1, x: 2 });\n  ```","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Femilydaykin%2Fthree-js","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Femilydaykin%2Fthree-js","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Femilydaykin%2Fthree-js/lists"}