question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Is your feature request related to a problem? Please describe.

Running Three on Node is a massive pain

Making packages that are based on Three and meant to run on Web, NodeJS, and React Native is a massive pain.

With a colleague we have plan to make it easier by providing a node specific build, just like there is a jsm specific build.

Describe the solution you’d like

The plan is to do this:

  • Create node compatible versions of at least:
    • src/loaders/ImageLoader.js => src/loaders/ImageLoader.node.js
    • src/loaders/FileLoader.js => src/loaders/FileLoader.node.js
    • examples/js/loaders/GltfLoader.js => examples/js/loaders/GltfLoader.node.js
    • examples/js/loaders/GltfExporter.js => examples/js/loaders/GltfExporter.node.js
  • Edit the rollup config of utils/build/rollup.config.js :
    • Add an alias plugin to manage the two first changed packages above
    • Add a fourth bundle of three with output: "three.node.js" including the alias plugin
  • Edit the utils/build/modularize.js:
    • Add another dst folder additionally to the jsm one
    • Add a field called nodePath in files items pointing to the node version of the file if relevant
    • Modify the convert function to output something similar to the jsm version with: if ( keys ) imports.push( 'import {${keys}\n} from "${pathPrefix}../../build/three.node.js";' );

Would you accept such a PR back into the main three.js repo / package ?

Describe alternatives you’ve considered

We use a custom sh***y fork of an old version three in our repo and it is messy, we’d like to go for a cleaner version that is now possible thanks to the cleanup of the three codebase using ES modules.

Additional context

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Reactions:1
  • Comments:44 (11 by maintainers)

github_iconTop GitHub Comments

4reactions
etiennedupontcommented, Feb 16, 2021

Yes @crabmusket here’s how we typically create a renderer in node using our package and headless-gl. We simply shim a canvas with the gl context at the right place. Most hardcoded features bellow can be customised.

import { getOr } from "lodash/fp";
import gl from "gl";
import {
  WebGLRenderer,
  PCFSoftShadowMap,
  WebGLRenderTarget,
  LinearFilter,
  NearestFilter,
  RGBAFormat,
  UnsignedByteType
} from "three-universal/build/three.node";

/**
 * Create a renderer
 */
export const getRenderer = ({
  height,
  width
}: {
  height: number;
  width: number;
}): WebGLRenderer => {
  // @ts-ignore
  const canvas = {
    width: width,
    height: height,
    addEventListener: event => {},
    removeEventListener: event => {},
    getContext: (contextType, attributes) => {
      return getOr(null, contextType, {
        webgl: gl(width, height, {
          ...attributes,
          preserveDrawingBuffer: true
        })
      });
    }
  } as HTMLCanvasElement;

  // Create the renderer
  const renderer = new WebGLRenderer({
    antialias: false,
    canvas: canvas,
    powerPreference: "high-performance"
  });
  renderer.shadowMap.enabled = true;
  renderer.shadowMap.type = PCFSoftShadowMap; // default PCFShadowMap

  // Let's create a render target object where we'll be rendering
  const renderTarget = new WebGLRenderTarget(width, height, {
    minFilter: LinearFilter,
    magFilter: NearestFilter,
    format: RGBAFormat,
    type: UnsignedByteType
  });
  renderer.setRenderTarget(renderTarget);
  return renderer;
};

2reactions
crabmusketcommented, Feb 17, 2021

Here’s a full render using mainline THREE and headless-gl, based on your example above: https://gist.github.com/crabmusket/b164c9b9d3c43db9bddbfb83afde0319

Read more comments on GitHub >

github_iconTop Results From Across the Web

Node.js
Node.js ® is a JavaScript runtime built on Chrome's V8 JavaScript engine. ... For information about supported releases, see the release schedule.
Read more >
Node.js - endoflife.date
Release Released Active Support Se... 19 2 months and 1 week ago. (18 Oct 2022) Ends in 3 months. (01 Apr 2023) En... 18 (...
Read more >
Node.js Release Working Group - GitHub
There are three phases that a Node.js release can be in: 'Current', 'Active Long Term Support (LTS)', and 'Maintenance'. Odd-numbered release lines are...
Read more >
Node.js ES2015/ES6, ES2016 and ES2017 support
Yes. Yes Yes. Yes Error. Error Error. Error Error. Error Error. Error function() function() function() function() function() function() function() function() function() function() function() function() function() function()...
Read more >
Node.js Support - NodeSource
Node.js Support from NodeSource is comprehensive support for businesses looking to establish production-grade best practices.
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found