# Scene stays black

**URL:** <https://discourse.threejs.org/t/scene-stays-black/48407>\
**Category:** Questions\
**Tags:** javascript\
**Created:** [February 24, 2023, 3:19pm UTC](https://discourse.threejs.org/t/scene-stays-black/48407 "2023-02-24T15:19:10Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![Daan\_Blomme](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/daan_blomme/32/33842_2.png) [@Daan\_Blomme](https://discourse.threejs.org/u/Daan_Blomme)\
**Post date:** [February 24, 2023, 3:19pm UTC](https://discourse.threejs.org/t/scene-stays-black/48407/1 "2023-02-24T15:19:10Z")

</div>

Can somebody tell me what I’m doing wrong?  
The scene stays black

```javascript
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>3D Object Visualization</title>
    <style>
        #container {
            width: 100%;
            height: 500px;
        }
    </style>
</head>

<body>

    <div id="container"></div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
    <script>
        // Creating scene
        const scene = new THREE.Scene();

        //Field of view, Ratio, Clipping plane (how much is visible)
        const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

        // Renderer
        const renderer = new THREE.WebGLRenderer();
        renderer.setSize(window.innerWidth, window.innerHeight);
        document.body.appendChild(renderer.domElement);

        // Creating the object
        // const geometry = new THREE.ConeGeometry(5, 20, 32);
        // const material = new THREE.MeshBasicMaterial({ color: 0xffff00 });
        // var cone = new THREE.ObjectLoader();
        // scene.add(cone);
        const loader = new THREE.STLLoader();
        loader.load('Schoep.glb', function (geometry) {
            const material = new THREE.MeshBasicMaterial({ color: 0xffff00 });
            const mesh = new THREE.Mesh(geometry, material);
            scene.add(mesh);
        });

        camera.position.z = 20;

        function animate() {
            // The "setInterval" (FPS based on screen)
            requestAnimationFrame(animate);

            cone.rotation.x += 0.01;
            cone.rotation.y += 0.01;

            renderer.render(scene, camera);
        }
        animate();
    </script>
</body>

</html>

```

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [February 24, 2023, 3:33pm UTC](https://discourse.threejs.org/t/scene-stays-black/48407/2 "2023-02-24T15:33:19Z")

</div>

> [@Daan\_Blomme](#):
>
> ```javascript
> cone.rotation.x += 0.01;
> cone.rotation.y += 0.01;
> 
> ```

You access `cone` although the variable is `undefined`. You should see a runtime error in the browser console.

---

<div class="post-metadata">

**Author:** ![PavelBoytchev](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/pavelboytchev/32/38639_2.png) [@PavelBoytchev](https://discourse.threejs.org/u/PavelBoytchev)\
**Post date:** [February 24, 2023, 3:36pm UTC](https://discourse.threejs.org/t/scene-stays-black/48407/3 "2023-02-24T15:36:21Z")

</div>

I’m also curious whether a GLB file can be loaded by `STLLoader`:

```javascript
const loader = new THREE.STLLoader();
      loader.load('Schoep.glb', function (geometry) {

```

---

<div class="post-metadata">

**Author:** ![hofk](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/hofk/32/44944_2.png) [@hofk](https://discourse.threejs.org/u/hofk)\
**Post date:** [February 24, 2023, 7:06pm UTC](https://discourse.threejs.org/t/scene-stays-black/48407/4 "2023-02-24T19:06:23Z")

</div>

It seems that you are a thre.js beginner.

Have a look at some examples from the [collection](https://discourse.threejs.org/t/collection-of-examples-from-discourse-threejs-org/4315).

E.g. to gltf

[BeginnerExample](https://hofk.de/main/discourse.threejs/BeginnerExample/BeginnerExample.html) step 3  
[LoadGLTFmove](https://hofk.de/main/discourse.threejs/2020/LoadGLTF/LoadGLTF.html)

Good luck. 🙂
