This is a part of Node3D project.
npm i -s 3d-core-raub
Run WebGL code on Node.js.
Note: Since version 4.0.0, three.js is a peer dependency. Please install your version of choise and call
addThreeHelpers
before drawing frames.
- Multiple windows are supported, using GLFW for window management.
- WebGL implementation is not 100% accurate, but good enough to run three.js examples.
- The C++ bindings use GLEW to access all the OpenGL functions.
- Image loading uses FreeImage encoder/decoder.
- Window icons are supported and both JS- and Image-friendly.
Note: this package uses a bunch of N-API addons, which are ABI-compatible across different Node.js versions. Addon binaries are precompiled and there is no compilation step during the
npm i
command.
This module exports 2 methods:
-
export const init: (opts?: TInitOpts) => TCore3D;
Initialize Node3D. Creates the first window/document and sets up the global environment. This function can be called repeatedly, but will ignore further calls. The return value is cached and will be returned immediately for repeating calls.
-
export const addThreeHelpers: (three: TUnknownObject, gl: typeof webgl) => void;
Teaches
three.FileLoader.load
to work with Nodefs
. Additionally implementsthree.Texture.fromId
static method to create THREE textures from known GL resource IDs.
See TypeScript defenitions for more details.
Example (as in crate-lean.mjs):
import * as THREE from 'three';
import node3d from '../index.js';
const { init, addThreeHelpers } = node3d;
const { gl, loop, Screen } = init({
isGles3: true, vsync: true, autoEsc: true, autoFullscreen: true, title: 'Crate',
});
addThreeHelpers(THREE, gl);
const screen = new Screen({ three: THREE, fov: 70, z: 2 });
const texture = new THREE.TextureLoader().load('three/textures/crate.gif');
texture.colorSpace = THREE.SRGBColorSpace;
const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial({ map: texture });
const mesh = new THREE.Mesh(geometry, material);
screen.scene.add(mesh);
loop(() => {
const time = Date.now();
mesh.rotation.x = time * 0.0005;
mesh.rotation.y = time * 0.001;
screen.draw();
});
Example Notes:
- You can use mjs, tsx or commonjs with
require()
. loop
is a convenience method, you can userequestAnimationFrame
too.autoFullscreen
option enables "CTRL+F", "CTRL+SHIFT+F", "CTRL+ALT+F" to switch window modes.Screen
helps with three.js-oriented resource management, but is not required.- three.js uses VAO, so if not using
Screen
, handling the window mode changes (creates a separate OpenGL context) is up to you. Basically,doc.on('mode', () => {...})
- here you should re-create THREE.WebGLRenderer.