ThreeJS cube not showing

Question

I'm trying to learn ThreeJS, so I added the library to existing NextjS project. I wanted to see a cube in my frontpage. but I can't see nothing. The renderer code is:

import React                from 'react';
import * as THREE           from 'three';

type Props = { initialize: Function };

export default class Renderer extends React.Component<Props, {}> {
    canvas      !: HTMLCanvasElement;
    renderer    !: THREE.WebGLRenderer;
    GLcontext   !: WebGLRenderingContext;

    constructor(props: any) { super(props); }

    componentDidMount() {
        this.canvas        = document.getElementById('default-canvas') as HTMLCanvasElement;
        this.renderer      = new THREE.WebGLRenderer({ canvas: this.canvas, antialias: true });
        this.GLcontext     = this.renderer.getContext();    
                this.renderer.setClearColor ('#000000');  
                this.renderer.setSize       (window.innerWidth, window.innerHeight);

            this.props.initialize   (this.renderer);
            window.addEventListener ('resize', () => { 
                this.renderer.setSize(window.innerWidth, window.innerHeight); });
    }

    render() {
        return(
            <div>
                <canvas id="default-canvas" className="canvas-style" />
            </div>
        );
    }
}

and the scene code is:

import React       from 'react';
import * as THREE  from 'three';
import Renderer    from './renderer';

export default class Scene extends React.Component {
    scene       !: THREE.Scene;
    camera      !: THREE.Camera;

    constructor(props: any) { super(props); 
            this.initialize    = this.initialize.bind(this);
    }

    initialize  (renderer: THREE.WebGLRenderer) {
        this.scene      = new THREE.Scene();
        this.camera     = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
                const geometry = new THREE.BoxGeometry(1, 1, 1);
                const m        = new THREE.MeshStandardMaterial({ color: 0xb300b3 });
                var   cd        = new THREE.Mesh(geometry, m)
                this.scene.add(cd);
                cd.position.x = 0;
                cd.position.y = 0;
                cd.position.z = 0;

                var ambientLight = new THREE.AmbientLight( 0x666666, 1.0 );  
                this.scene.add( ambientLight );

                // Create a white directional light with an intensity of 1.0
                var directionalLight = new THREE.DirectionalLight( 0xffffff, 1.0 );
                directionalLight.position.set( 0, 10, 0 );
                this.scene.add( directionalLight );

         renderer.render(this.scene, this.camera);
    }

    render() {
        return(
            <div>
                <Renderer initialize={this.initialize}  />
            </div>
        );
    }
}

nothing appears to be working, I'm seeing nothing just empty scene. I'm using NextJS as my favourite for all my projects and typescript. I'm trying to do it the right way.

Answer 1

The camera object is also a 3D object, and by default positioned in (0,0,0). At the moment it's inside the box. Thus you cannot see the box. Just adding the following line should help (with the z value set to the distance you want the camera to be from the box):

this.camera.position.set(0,0,4)