{"id":20345788,"url":"https://github.com/izzypt/threejs_fundamentals","last_synced_at":"2026-02-14T06:32:39.966Z","repository":{"id":190728817,"uuid":"683239886","full_name":"izzypt/ThreeJS_Fundamentals","owner":"izzypt","description":"This repo is all about three JS and grasping the fundamentals.","archived":false,"fork":false,"pushed_at":"2023-08-27T20:31:59.000Z","size":8,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-10-03T15:40:36.993Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":null,"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/izzypt.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":"2023-08-26T00:25:04.000Z","updated_at":"2023-08-26T00:25:05.000Z","dependencies_parsed_at":null,"dependency_job_id":"3ea75fd4-8aa6-4846-b6c1-ae5b0a0ec036","html_url":"https://github.com/izzypt/ThreeJS_Fundamentals","commit_stats":null,"previous_names":["izzypt/threejs_fundamentals"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/izzypt/ThreeJS_Fundamentals","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/izzypt%2FThreeJS_Fundamentals","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/izzypt%2FThreeJS_Fundamentals/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/izzypt%2FThreeJS_Fundamentals/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/izzypt%2FThreeJS_Fundamentals/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/izzypt","download_url":"https://codeload.github.com/izzypt/ThreeJS_Fundamentals/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/izzypt%2FThreeJS_Fundamentals/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29438772,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-14T05:24:35.651Z","status":"ssl_error","status_checked_at":"2026-02-14T05:24:34.830Z","response_time":53,"last_error":"SSL_read: 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":[],"created_at":"2024-11-14T22:09:47.656Z","updated_at":"2026-02-14T06:32:39.950Z","avatar_url":"https://github.com/izzypt.png","language":null,"funding_links":[],"categories":[],"sub_categories":[],"readme":"# ThreeJS_Fundamentals\n\nThis README is used as a personal guide to take notes on what I found important. \n\nMore detailed explanations are on the official docs : https://threejs.org/docs/index.html#manual/en/introduction/Installation\n\n# The basic structure of threeJS app\n\n![image](https://github.com/izzypt/ThreeJS_Fundamentals/assets/73948790/9dc68d16-30fd-4650-94dc-6ca78e9130fa)\n\n\n### The elements:\n\n- ***Renderer***\n  - This is arguably the main object of three.js.\n  - You pass a Scene and a Camera to a Renderer and it renders (draws) the portion of the 3D scene that is inside the frustum of the camera as a 2D image to a canvas.\n- ***SceneGraph***\n  -  It's a tree like structure, consisting of various objects like a Scene object, multiple Mesh objects, Light objects, Group, Object3D, and Camera objects.\n  -  A ***Scene*** object defines the root of the scenegraph and contains properties like the background color and fog.\n  -  These objects define a hierarchical parent/child tree like structure and represent where objects appear and how they are oriented.\n  -  Children are positioned and oriented relative to their parent.\n  -  For example the wheels on a car might be children of the car so that moving and orienting the car's object automatically moves the wheels.\n- ***Camera***\n  -  In three.js, unlike the other objects, a Camera does not have to be in the scenegraph to function.\n  -  Just like other objects, a Camera, as a child of some other object, will move and orient relative to its parent object.\n- ***Mesh***\n  -   Represent drawing a specific ***Geometry*** with a specific ***Material***.\n  - Both ***Material*** objects and ***Geometry*** objects can be used by multiple Mesh objects.\n  - For example to draw two blue cubes in different locations we could need two Mesh objects to represent the position and orientation of each cube.\n- ***Geometry***\n  -  Represent the vertex data of some piece of geometry like a sphere, cube, plane, dog, cat, human, tree, building, etc...\n  -  Three.js provides many kinds of built in geometry primitives. You can also create custom geometry as well as load geometry from files.\n- ***Material***\n  -  Represent the surface properties used to draw geometry including things like the color to use and how shiny it is.\n  -  A Material can also reference one or more Texture objects which can be used, for example, to wrap an image onto the surface of a geometry.\n- ***Texture***     \n  -  Objects generally represent images either loaded from image files, generated from a canvas or rendered from another scene.\n\n# Creating a small scene ( from official docs - rendering a cube )\n\n To actually be able to display anything with three.js, we need three things: \n - scene\n - camera\n - renderer\n\n### Project structure\n\nBefore setting up the scene , the camera and the renderer make sure you have at least 2 files : a ```index.html``` and a ```main.js```.\n\n- Index. html\n```\n\u003c!DOCTYPE html\u003e\n\u003chtml lang=\"en\"\u003e\n\t\u003chead\u003e\n\t\t\u003cmeta charset=\"utf-8\"\u003e\n\t\t\u003ctitle\u003eMy first three.js app\u003c/title\u003e\n\t\t\u003cstyle\u003e\n\t\t\tbody { margin: 0; }\n\t\t\u003c/style\u003e\n\t\u003c/head\u003e\n\t\u003cbody\u003e\n\t\t\u003cscript type=\"module\" src=\"/main.js\"\u003e\u003c/script\u003e\n\t\u003c/body\u003e\n\u003c/html\u003e\n````\n- main.js\n\n```import * as THREE from 'three';```\n\n### Setting up the elements\n\n- Instatiating the scene :\n\n```js\nconst scene = new THREE.Scene();\n```\n\n- Instatiating the camera :\n\n```js\nconst camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );\n```\nThere are a few different cameras in three.js. For now, let's use a PerspectiveCamera.\n- The first attribute is the field of view.\n  - FOV is the extent of the scene that is seen on the display at any given moment. \n  - The value is in degrees.\n\n- The second one is the aspect ratio.\n  - You almost always want to use the width of the element divided by the height\n  - Unless you want the image the image to look squished.\n\n- The next two attributes are the near and far clipping plane.\n  - The objects further away from the camera than the value of far or closer than near won't be rendered.  \n    \n- Instatiating the renderer : \n\n```js\nconst renderer = new THREE.WebGLRenderer();\nrenderer.setSize( window.innerWidth, window.innerHeight );\ndocument.body.appendChild( renderer.domElement );\n```\n-  We set the size at which we want it to render our app.\n  -  It's a good idea to use the width and height of the area we want to fill with our app - in this case, the width and height of the browser window.\n  -  For performance intensive apps, you can also give setSize smaller values, like window.innerWidth/2 and window.innerHeight/2.\n- We add the renderer element to our HTML document.\n  - This is a \u003ccanvas\u003e element the renderer uses to display the scene to us.\n\n### Creating the cube\n\n```js\nconst geometry = new THREE.BoxGeometry( 1, 1, 1 );\nconst material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );\nconst cube = new THREE.Mesh( geometry, material );\nscene.add( cube );\n\ncamera.position.z = 5;\n```\n\n- To create a cube, we need a ```BoxGeometry```.\n  - This is an object that contains all the points (vertices) and fill (faces) of the cube.\n - In addition to the geometry, we need a material to color it. Three.js comes with several materials, but we'll stick to the ```MeshBasicMaterial``` for now.\n -  The third thing we need is a ```Mesh```.\n    -  A mesh is an object that takes a geometry, and applies a material to it, which we then can insert to our scene, and move freely around.\n\n### Animating the cube\n\nIf you insert all the code above into the file you created before we began, you should see a green box. Let's make it all a little more interesting by rotating it.\n\nAdd the following code right above the renderer.render call in your animate function:\n\n```js\ncube.rotation.x += 0.01;\ncube.rotation.y += 0.01;\n```\n\n- This will be run every frame (normally 60 times per second), and give the cube a nice rotation animation. \n- Basically, anything you want to move or change while the app is running has to go through the animate loop. \n- You can of course call other functions from there, so that you don't end up with an animate function that's hundreds of lines.\n\n### Final Result\n\n- index.html\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml\u003e\n\t\u003chead lang=\"en\"\u003e\n\t\t\u003cmeta charset=\"utf-8\"\u003e\n\t\t\u003ctitle\u003eMy first three.js app\u003c/title\u003e\n\t\t\u003cstyle\u003e\n\t\t\tbody { margin: 0; }\n\t\t\u003c/style\u003e\n\t\u003c/head\u003e\n\t\u003cbody\u003e\n\t\t\u003cscript type=\"module\" src=\"/main.js\"\u003e\u003c/script\u003e\n\t\u003c/body\u003e\n\u003c/html\u003e\n```\n- main.js\n\n```js\nimport * as THREE from 'three';\n\nconst scene = new THREE.Scene();\nconst camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );\n\nconst renderer = new THREE.WebGLRenderer();\nrenderer.setSize( window.innerWidth, window.innerHeight );\ndocument.body.appendChild( renderer.domElement );\n\nconst geometry = new THREE.BoxGeometry( 1, 1, 1 );\nconst material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );\nconst cube = new THREE.Mesh( geometry, material );\nscene.add( cube );\n\ncamera.position.z = 5;\n\nfunction animate() {\n\trequestAnimationFrame( animate );\n\n\tcube.rotation.x += 0.01;\n\tcube.rotation.y += 0.01;\n\n\trenderer.render( scene, camera );\n}\n\nanimate();\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fizzypt%2Fthreejs_fundamentals","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fizzypt%2Fthreejs_fundamentals","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fizzypt%2Fthreejs_fundamentals/lists"}