Render Three.js scene in canvas

Question

I've been trying to render the scene below in a canvas for so many times and it still doesn't work.
I've tried replacing var renderer = new THREE.WebGLRenderer({antialias: true}); with var renderer = new THREE.WebGLRenderer({ canvas: canvas });, but instead of rendering it just starts infinitely loading.

Full HTML page: https://jsfiddle.net/1k04rwsx/ (replace the obj models with something to make it load)

P.S.: I'm new to this, sorry if the code looks a bit weird.
Huge thanks to anyone who can help!

Answer 1

Your loading screen does not disappear because you the fiddle loads OBJs from relative URLs (which is invalid with jsFiddle). I've replaced one URL with a link to the official repository and things start working.

/**
  * Generate a scene object with a background color
  **/

  function getScene() {
    var scene = new THREE.Scene();
    scene.background = new THREE.Color(0x111111);
    return scene;
  }

  /**
  * Generate the camera to be used in the scene. Camera args:
  *   [0] field of view: identifies the portion of the scene
  *     visible at any time (in degrees)
  *   [1] aspect ratio: identifies the aspect ratio of the
  *     scene in width/height
  *   [2] near clipping plane: objects closer than the near
  *     clipping plane are culled from the scene
  *   [3] far clipping plane: objects farther than the far
  *     clipping plane are culled from the scene
  **/

  function getCamera() {
    var aspectRatio = window.innerWidth / window.innerHeight;
    var camera = new THREE.PerspectiveCamera(75, aspectRatio, 0.1, 1000);
    camera.position.set(0, 1, -10);
    return camera;
  }

  /**
  * Generate the light to be used in the scene. Light args:
  *   [0]: Hexadecimal color of the light
  *   [1]: Numeric value of the light's strength/intensity
  *   [2]: The distance from the light where the intensity is 0
  * @param {obj} scene: the current scene object
  **/

  function getLight(scene) {
    var light = new THREE.PointLight(0xffffff, 1, 0);
    light.position.set(1, 5, -2);
    scene.add(light);

    const lighta = new THREE.AmbientLight( 0x404040 ); // soft white light
    scene.add( lighta );

    var ambientLight = new THREE.AmbientLight(0x111111);
    scene.add(ambientLight);
    return light;
  }

  /**
  * Generate the renderer to be used in the scene
  **/

  function getRenderer() {
    // Create the canvas with a renderer
    var renderer = new THREE.WebGLRenderer({antialias: true}); //original
    // Add support for retina displays
    renderer.setPixelRatio(window.devicePixelRatio);
    // Specify the size of the canvas
    renderer.setSize(window.innerWidth, window.innerHeight);
    // Add the canvas to the DOM
    document.body.appendChild(renderer.domElement);
    return renderer;
  }

  /**
  * Generate the controls to be used in the scene
  * @param {obj} camera: the three.js camera for the scene
  * @param {obj} renderer: the three.js renderer for the scene
  **/

  function getControls(camera, renderer) {
    var controls = new THREE.TrackballControls(camera, renderer.domElement);
    controls.zoomSpeed = 0.4;
    controls.panSpeed = 0.4;
    return controls;
  }

  /**
  * Load Nimrud model
  **/

  function loadModel() {
    var loader = new THREE.OBJLoader();
    loader.load( 'https://threejs.org/examples/models/obj/tree.obj', function ( object ) { //this is just a character, can be replaced to test
      object.rotation.y = 1.5;
      object.scale.y = 0.7;
      object.scale.x = 0.7;
      object.scale.z = 0.7;
      scene.add( object );
      document.querySelector('h1').style.display = 'none';
    } );
  }

  /*function loadModel() {
    var loader = new THREE.OBJLoader();
    loader.load( 'avv.obj', function ( object ) {
      var box = new THREE.Box3().setFromObject( object );
  var center = new THREE.Vector3();
  box.getCenter( center );
  object.position.sub( center ); // center the model
  object.rotation.y = Math.PI;   // rotate the model
      scene.add( object );
      document.querySelector('h1').style.display = 'none';
    } );
  }*/

  /*function loadModel() {
    var loader = new THREE.OBJLoader();
    loader.load( 'avc.obj', function ( object ) {
      //object.rotation.y = 1.5;
      object.position.y = -18;
      object.position.x = -16;
      object.position.z = -2;
      scene.add( object );
      document.querySelector('h1').style.display = 'none';
    } );
  }*/

  /**
  * Render!
  **/

  function render() {
    requestAnimationFrame(render);
    renderer.render(scene, camera);
    //controls.update();
  };

  var scene = getScene();
  var camera = getCamera();
  var light = getLight(scene);
  var renderer = getRenderer();
  var controls = getControls(camera, renderer);

  loadModel()

  render();

  html, body { width: 100%; height: 100%; background: #000; color: #fff; }
  body { margin: 0; overflow: hidden; }
  canvas { width: 100%; height: 100%; }

  .lds-dual-ring {
  display: inline-block;
  width: 80px;
  height: 80px;
}
.lds-dual-ring:after {
  content: " ";
  display: block;
  width: 64px;
  height: 64px;
  margin: 8px;
  border-radius: 50%;
  border: 6px solid #fff;
  border-color: #fff transparent #fff transparent;
  animation: lds-dual-ring 1.2s linear infinite;
}
@keyframes lds-dual-ring {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

  <script src='https://cdn.jsdelivr.net/npm/[email protected]/build/three.min.js'></script>
  <script src='https://cdn.jsdelivr.net/npm/[email protected]/examples/js/controls/TrackballControls.js'></script>
  <script src='https://cdn.jsdelivr.net/npm/[email protected]/examples/js/loaders/OBJLoader.js'></script>
  <h1 style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);"><div class="lds-dual-ring"></div></h1>

BTW: Please do not mix three.js classes from different releases. Always ensure to stick to a single release like in the above code.