No errors, but only see black

Questions
1

Hello,

I just started to learn Three.js, but after I finished with the tutorial (cube), I wanted to try out other Geometries. But when I noticed that when I replace the code, it doesn’t work for all the geometries.
For example Circle works, but Cone and Sphere don’t.
I have no clue where it’s going wrong, cause there are no errors and only black screen.

      // 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} );
      const cone = new THREE.Mesh( geometry, material );
      scene.add( cone );

      camera.position.z = 2;

      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();
2

Judging by your camera position, you are probably inside your mesh. Try moving the camera to 5 or 10 and you should see the cone.

Tip: try using wireframe: true in your material to debug your scenes. It helps understand what you are looking (or not looking) at.

2 Likes
3

Hi!
Set camera position like this: camera.position.z = 20; and see the miracle :slight_smile:
Your camera is simply inside the cone, when camera.position.z = 2

2 Likes
4

Ohhhhh, thanks a lot!
For something this simple it was breaking my brain

2 Likes
5

Hi!

Thanks! For a prisoner you are very friendly :smiley:

1 Like
6

:rofl: You’re welcome :beers:

1 Like
7

You may find the collection helpful.

There is an BeginnerExample with comments.