Display a Three.js scene on a canvas

Question

Display a Three.js scene on a canvas

I've been attempting to display the image below on a canvas numerous times, but unfortunately I can't seem to get it right.
I attempted substituting

var renderer = new THREE.WebGLRenderer({antialias: true});

with

var renderer = new THREE.WebGLRenderer({ canvas: canvas });

, however instead of rendering, it just keeps loading indefinitely.

Here's the complete HTML page: https://jsfiddle.net/1k04rwsx/ (replace the obj models with something to trigger it to load)

P.S.: I'm fairly new at this, so please pardon any unconventional code.
A big thank you to anyone who can offer assistance!

javascript three.js

Answer 1

Answer №1

The reason your loading screen isn't disappearing is because you were loading OBJs from relative URLs, which is not supported in jsFiddle. I replaced one URL with an official repository link and now everything is working smoothly.

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

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

  /**
  * Setting up the camera for the scene. Camera parameters:
  *   [0] field of view: determines what's visible at any time (in degrees)
  *   [1] aspect ratio: width/height ratio of the scene
  *   [2] near clipping plane: objects closer than this are culled
  *   [3] far clipping plane: objects farther than this are culled
  **/

  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;
  }

  // Light setup

  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 );
    scene.add( lighta );

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

  // Renderer setup

  function getRenderer() {
    var renderer = new THREE.WebGLRenderer({antialias: true});
    renderer.setPixelRatio(window.devicePixelRatio);
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);
    return renderer;
  }

  // Controls setup

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

  // Load model

  function loadModel() {
    var loader = new THREE.OBJLoader();
    loader.load( 'https://threejs.org/examples/models/obj/tree.obj', function ( object ) {
      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';
    } );
  }

  // Render loop

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

  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%; }

<script src='https://cdn.jsdelivr.net/npm/three@0.130.0/build/three.min.js'></script>
<script src='https://cdn.jsdelivr.net/npm/three@0.130.0/examples/js/controls/TrackballControls.js'></script>
<script src='https://cdn.jsdelivr.net/npm/three@0.130.0/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>

By the way, make sure not to mix classes from different releases of three.js. Stick to a single release like in the code above for consistency.

Answer 2

The reason your loading screen isn't disappearing is because you were loading OBJs from relative URLs, which is not supported in jsFiddle. I replaced one URL with an official repository link and now everything is working smoothly.

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

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

  /**
  * Setting up the camera for the scene. Camera parameters:
  *   [0] field of view: determines what's visible at any time (in degrees)
  *   [1] aspect ratio: width/height ratio of the scene
  *   [2] near clipping plane: objects closer than this are culled
  *   [3] far clipping plane: objects farther than this are culled
  **/

  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;
  }

  // Light setup

  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 );
    scene.add( lighta );

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

  // Renderer setup

  function getRenderer() {
    var renderer = new THREE.WebGLRenderer({antialias: true});
    renderer.setPixelRatio(window.devicePixelRatio);
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);
    return renderer;
  }

  // Controls setup

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

  // Load model

  function loadModel() {
    var loader = new THREE.OBJLoader();
    loader.load( 'https://threejs.org/examples/models/obj/tree.obj', function ( object ) {
      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';
    } );
  }

  // Render loop

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

  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%; }

<script src='https://cdn.jsdelivr.net/npm/three@0.130.0/build/three.min.js'></script>
<script src='https://cdn.jsdelivr.net/npm/three@0.130.0/examples/js/controls/TrackballControls.js'></script>
<script src='https://cdn.jsdelivr.net/npm/three@0.130.0/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>

By the way, make sure not to mix classes from different releases of three.js. Stick to a single release like in the code above for consistency.

Display a Three.js scene on a canvas

Answer №1

Similar questions

I am experiencing difficulties with the React-router useHistory function

Eliminate the selected item at random

Recreate body content with JQuery Mobile

Transform the JSON response into a map

Differences in Loading Gif Visualization Across Chrome, Safari, and Firefox

Upon clicking the initial radio button, the jQuery array contents are not immediately displayed

Using JavaScript, pass an array containing a list of JSON values

Tips for dynamically adding and removing keys from a JSON object

What is the best way to invoke a method within the $http body in AngularJS

Difficulty interpreting description and metadata within a JSON object using JavaScript

Combining AngularJS with Servlets: A Seamless Integration

The rendering of the component is experiencing issues when using react-router

The issue of continuous requests in AngularJS controllers

Using inertia-links within the storybook framework

Preventing further onClick events from occurring ensures that any new onClick events will not be triggered as well. To achieve

Exploring the possibilities of Three.JS by manipulating the world position of a child 3D object

Implementing JavaScript to import an external file easily

A Javascript promise that perpetually stays in a pending state

Guide: Transform Bootstrap 4 Inline Checkboxes into Stacked Format When Screen Size Is Altered

Creating a module within a component in angular - step by step guide