# How to create a basic 3D scene?

To create a basic scene we need to initialize a **scene** object. You can think of a **scene** as a **stage** that will hold your production. Everything that will be visible to the viewer will be added to the scene.

![A scene is an object that holds everything you will display](/files/-MM3-CPShFYuw2n1L4S8)

We need to add a **camera** object to the scene that will be our viewers perspective. Anything on the scene but not in the view of the camera won't be visible on your canvas. 

![Camera is essential for rendering your scene to canvas](/files/-MM3SUUMwdGK-bNDV_EC)

We also need a **light** source for our objects to be visible. 

![Without the lights, we will render only black to the canvas.](/files/-MM3Skex0Kd4P2IZQEKH)

Finally, we will create a basic shape(**mesh**), box. 

![Box Mesh to be rendered](/files/-MM3T2Feu4J9vQ6r7cxJ)

![Geometry vs Material of a mesh](/files/-MNXU27f13T358cUiS2J)

{% embed url="<https://threejs.org/examples/#webgl_multiple_scenes_comparison>" %}
ThreeJS Mesh = material + geometry example
{% endembed %}

Let's create the basic scene using different libraries.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://www.xrdev.app/mixed-reality-docs/webxr-lessons/3d-on-the-web/project/how-to-create-a-basic-3d-scene.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.