> For the complete documentation index, see [llms.txt](https://bimwhale.gitbook.io/ifc-js/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://bimwhale.gitbook.io/ifc-js/optimization/three.js-basics.md).
# Three.js Basics
Welcome to the Three.js ~~Fundamentals~~ basics. Now that we understand the basics of 3D grpahics, let's move onto Three.js.
## Example Scene
Let's take a look at the [example scene](https://threejs.org/docs/index.html#manual/en/introduction/Creating-a-scene).
```markup
My first three.js app
```
Let's remove the HTML and just focus on the JavaScript.
```javascript
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
const renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
const cube = new THREE.Mesh( geometry, material );
scene.add( cube );
```
There are some concpets that might be new.
| | |
| ------------------------- | --------------------------------------------------------------- |
| THREE.Scene() | Where you place objects, lights, cameras, etc. |
| THREE.PerspectiveCamera() | A type of camera |
| THREE.WebGLRenderer() | The renderer that makes it possible to render 3D in the browser |
| THREE.BoxGeometry() | A type of geometry (a box) |
| THREE.MeshBasicMaterial() | A type of material (not texture) |
| THREE.Mesh() | The mesh consists of a **geometry** and **material** |
In the snippet above, we have created a **green cube**.
## Important Concepts
### BufferGeometry
In short, `BufferGeometry` is a "faster" way to represent geomtry. It uses `math` ~~and magic~~ to represent the 3D geometry. Take a look at the [docs](https://threejs.org/docs/#api/en/core/BufferGeometry) or [Three.js Fundamentals](https://threejsfundamentals.org/threejs/lessons/threejs-custom-buffergeometry.html) for a deep dive into this topic.
### BufferGeometryUtils
Take a look at the [docs](https://threejs.org/docs/index.html#examples/en/utils/BufferGeometryUtils) for more information.
### **Materials**
Three offers many types of materials, see the [docs](https://threejs.org/docs/index.html#api/en/materials/Material) for more info.
Notice that some meterials are linked to a type of 3D object. For example, `LineBasicMaterial` and `LineDashedMaterial` belogns to a line.
Recall the chapter about [3D Basics](/ifc-js/optimization/3d-basics.md). We are intrested in `edges` and `meshes`. You can find more information over at the [Three.js Fundamentals.](https://threejsfundamentals.org/threejs/lessons/threejs-materials.html)
## Stuff to Consider
* [THREE.Geometry will be removed from core with r125](https://discourse.threejs.org/t/three-geometry-will-be-removed-from-core-with-r125/22401)