{"id":17036052,"url":"https://github.com/phucbm/threejs-journey","last_synced_at":"2025-04-28T11:16:31.958Z","repository":{"id":46206705,"uuid":"387086116","full_name":"phucbm/threejs-journey","owner":"phucbm","description":"Exercises and recaps while learning Three.js","archived":false,"fork":false,"pushed_at":"2023-02-17T03:24:58.000Z","size":45638,"stargazers_count":5,"open_issues_count":0,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-28T11:16:19.331Z","etag":null,"topics":["gsap","threejs","webgl"],"latest_commit_sha":null,"homepage":"https://three-js-journey.netlify.app","language":"Vue","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/phucbm.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":"2021-07-18T04:02:45.000Z","updated_at":"2025-04-05T05:00:48.000Z","dependencies_parsed_at":"2024-11-29T14:47:21.279Z","dependency_job_id":null,"html_url":"https://github.com/phucbm/threejs-journey","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/phucbm%2Fthreejs-journey","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/phucbm%2Fthreejs-journey/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/phucbm%2Fthreejs-journey/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/phucbm%2Fthreejs-journey/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/phucbm","download_url":"https://codeload.github.com/phucbm/threejs-journey/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251302782,"owners_count":21567601,"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":["gsap","threejs","webgl"],"created_at":"2024-10-14T08:49:03.796Z","updated_at":"2025-04-28T11:16:31.939Z","avatar_url":"https://github.com/phucbm.png","language":"Vue","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Three.js Journey\n\n[![Netlify Status](https://api.netlify.com/api/v1/badges/c47c5f67-3da3-4e99-b6cc-23d1fa909f5e/deploy-status)](https://app.netlify.com/sites/three-js-journey/deploys)\n\n\u003e Demo: https://three-js-journey.netlify.app\n\n---\n\nLesson recap and exercises.\n\n## Chapter 01 - Basics\n\n### 01. Webpack\n\n- An 3D object is also called a Mesh.\n- A Mesh needs a Geometry and a Material.\n- Use Camera to adjust the POV of the scene.\n- Perspective is the default camera.\n- A Camera needs an aspect ratio and an FOV (degree).\n- A Renderer need width/height, where to render into, a camera to see and a scene with every mesh's in it.\n\n### 02. Transform objects\n\n- Use Group to control multiple Mesh at once.\n- Position, Scale and Rotation is Vector3, so they can be assigned using `.set(x, y, z)`.\n- The order of axes when doing rotation is IMPORTANT!\n- Messy order could cause \"gimbal lock\", use `mesh.rotation.reorder('YXZ')` to set the correct order before doing any rotation changing.\n- Quaternion \u003c=\u003e Rotation\n- Use `AxesHelper` to show axes.\n- Use `camera.lookAt(position)` to set focus on a position.\n\n### 03. Animations\n\n- Use `requestAnimationFrame` to update value =\u003e create animations.\n- Different framerate on different devices could lead to **inconsistent animation's duration**.\n- Workaround #1: create a deltaTime with `Date.now()`. **Delta time is the amount of milliseconds that elapsed since the previous tick**.\n- Workaround #2: use `clock.getElapsedTime()`.\n- Workaround #3: use GSAP.\n- We can also use GSAP to perform the render process.\n\n### 04. Cameras\n\n- FOV: vertical height of the camera\n- Near \u0026 Far: how close and how far the camera can see\n- Do not use extreme value like 0.0001 and 99999 for near \u0026 far to prevent **z-fighting**\n- Controlling camera with `mousemove` event or OrbitControls\n\n### 05. Fullscreen and resizing\n\n- Resize canvas:\n    - Use CSS to set the canvas size\n    - Use window `resize` event to update camera (aspect \u0026 updateProjectionMatrix) and renderer (size and pixel ratio).\n- Stair effect issue: limit the `devicePixelRatio` using `renderer.setPixelRatio()` to gain a better and consistent performance.\n- Pixel ratio: 2 is enough (retina), 3 is maximum.\n- Fullscreen mode: using `canvas.requestFullscreen()` and `document.exitFullscreen()`, safari need webkit prefix.\n\n### 06. Geometries\n\n- Vertices (coordinates)\n- Use `Float32Array`: to gain a better performance with custom geometries\n- `THREE.BufferGeometry()`\n\n### 07. Debug UI\n\n- dat.GUI [github](https://github.com/dataarts/dat.gui) [examples](https://jsfiddle.net/ikatyang/182ztwao/)\n- Each item in the debug panel is also called a \"tweak\"\n\n### 08. Textures\n\n- Load textures (images) using `THREE.TextureLoader()`\n- If texture could be changed after init, set `texture.needsUpdate` to `true`\n- Get UV coordinates at `geometry.attributes.uv`\n- Texture filter\n- Texture optimization\n- Texture resources: [poliigon.com](poliigon.com), [3dtextures.me](3dtextures.me), [arroway-textures.ch](arroway-textures.ch)\n\n### 09. Materials\n\n- `material.opacity`, `material.alphaMap` need `material.transparent = true`\n- `material.side = THREE.DoubleSide;` could slow down the performance\n- `THREE.MeshNormalMaterial()`, `flatShading`\n- `THREE.MeshStandardMaterial()`, `aoMap`, `uv2`\n\n### 10. 3D Text\n\n- `THREE.FontLoader()`, convert font face to json with [Facetype.js](http://gero3.github.io/facetype.js/)\n- `THREE.TextGeometry`, `textGeometry.center()`\n- [Matcaps repository](https://github.com/nidorx/matcaps)\n- `console.time()` and `console.timeEnd()`\n\n\n---\n\n## Chapter 02 - Classic techniques\n\n### 11. Lights\n\n- Lights\n- Bake: create lights from textures\n- Light helpers, rectAreaLightHelper is not a part of THREE\n\n### 12. Shadows\n\n- Lights that support shadows: PointLight, DirectionalLight, SpotLight\n- Baking shadow: use textures to simulate the shadows, but shadows created by this way will be static\n\n### 13. The haunted house\n\n### 14. Particles\n\n- `THREE.PointsMaterial()`, `THREE.Points()`\n\n### 15. Galaxy generator\n\n- `geometry.dispose()`, `material.dispose()`, `scene.remove(mesh)`\n\n### 16. Raycaster\n\n- `THREE.Raycaster()`: create hover, click events\n\n---\n\n## Playground\n\nJust pulling some crazy ideas out of my sweaty brain.\n\n### The mess\n\n- Milestone: lesson #10\n- Things in this mess: `gsap`, `OrbitControls`, `object.geometry.setDrawRange()`, `THREE.BufferGeometry()`\n\n### Infinite Minecraft Blocks\n\n- Milestone: lesson #13\n- Keywords: `gsap/ScrollTrigger`, `THREE.FontLoader()`, `THREE.TextGeometry()`, `THREE.MeshBasicMaterial()`\n  , `THREE.TextureLoader()`\n\n---\n\n## Deployment\n\n```shell\n# Install package\nnpm i\n\n# Start dev server\nnpm run dev\n\n# Generate static site\nnuxt generate\n```","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fphucbm%2Fthreejs-journey","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fphucbm%2Fthreejs-journey","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fphucbm%2Fthreejs-journey/lists"}