Scene stays black

Questions
1

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

<!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>
2

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

3

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

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

It seems that you are a thre.js beginner.

Have a look at some examples from the collection.

E.g. to gltf

BeginnerExample step 3
LoadGLTFmove

Good luck. :slightly_smiling_face: