Update examples and readme

Author: raub

.gitignore

@@ -6,5 +6,6 @@
 .vscode
 node_modules/
 examples/3d-core/*.jpg
+examples/3d-core/*.png
 *.log
 test/__diff__

LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2024 Luis Blanco
+Copyright (c) 2025 Luis Blanco
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

README.md

@@ -42,42 +42,41 @@ This module exports 2 methods:
 
 See [TypeScript defenitions](/index.d.ts) for more details.
 
-Example (also see [here](/examples/crate-lean.js)):
+Example (as in [crate-lean.mjs](/examples/crate-lean.mjs)):
 
 ```javascript
-const three = require('three');
-const { init, addThreeHelpers } = require('3d-core-raub');
+import * as THREE from 'three';
+import node3d from '../index.js';
+const { init, addThreeHelpers } = node3d;
 
-const { doc, gl, requestAnimationFrame } = init({ isGles3: true });
-addThreeHelpers(three, gl);
-
-const renderer = new three.WebGLRenderer();
-renderer.setPixelRatio( doc.devicePixelRatio );
-renderer.setSize( doc.innerWidth, doc.innerHeight );
-
-const camera = new three.PerspectiveCamera(70, doc.innerWidth / doc.innerHeight, 1, 1000);
-camera.position.z = 2;
-const scene = new three.Scene();
-
-const geometry = new three.BoxGeometry();
-const material = new three.MeshBasicMaterial({ color: 0xFACE8D });
-const mesh = new three.Mesh( geometry, material );
-scene.add(mesh);
-
-doc.addEventListener('resize', () => {
-	camera.aspect = doc.innerWidth / doc.innerHeight;
-	camera.updateProjectionMatrix();
-	renderer.setSize(doc.innerWidth, doc.innerHeight);
+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);
 
-const animate = () => {
-	requestAnimationFrame(animate);
+loop(() => {
 	const time = Date.now();
 	mesh.rotation.x = time * 0.0005;
 	mesh.rotation.y = time * 0.001;
-	
-	renderer.render(scene, camera);
-};
-
-animate();
+	screen.draw();
+});
 ```
+
+Example Notes:
+
+1. You can use **mjs**, **tsx** or commonjs with `require()`.
+1. `loop` is a convenience method, you can use `requestAnimationFrame` too.
+1. `autoFullscreen` option enables "CTRL+F", "CTRL+SHIFT+F", "CTRL+ALT+F" to switch
+	window modes.
+1. `Screen` helps with **three.js**-oriented resource management, but is not required.
+1. **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](/js/objects/screen.js).

eslint.config.js

@@ -1,101 +1,3 @@
 'use strict';
 
-const js = require('@eslint/js');
-
-
-module.exports = [
-	{
-		ignores: ['examples/clouds']
-	},
-	js.configs.recommended,
-	{
-		languageOptions: {
-			'parserOptions': {
-				'ecmaVersion': 2022,
-				sourceType: 'commonjs'
-			},
-			globals: {
-				global: 'readonly',
-				require: 'readonly',
-				Buffer: 'readonly',
-				module: 'readonly',
-				console: 'readonly',
-				__dirname: 'readonly',
-				process: 'readonly',
-				setTimeout: 'readonly',
-				setImmediate: 'readonly',
-				clearImmediate: 'readonly',
-				URL: 'readonly',
-			},
-		},
-		'rules': {
-			'arrow-parens': ['error', 'always'],
-			'no-trailing-spaces': [
-				'error',
-				{
-					'skipBlankLines': true
-				}
-			],
-			'indent': [
-				'error',
-				'tab',
-				{
-					'SwitchCase': 1
-				}
-			],
-			'operator-linebreak': [
-				'error',
-				'after',
-				{
-					'overrides': {
-						'?': 'before',
-						':': 'before'
-					}
-				}
-			],
-			'max-len': ['error', 110],
-			'quotes': [
-				'error',
-				'single'
-			],
-			'semi': [
-				'error',
-				'always'
-			],
-			'no-multiple-empty-lines': ['error', { 'max': 3, 'maxEOF': 1, 'maxBOF': 1 }],
-			'keyword-spacing': ['error', { 'before': true, 'after': true }],
-			'space-before-blocks': ['error'],
-			'space-before-function-paren': [
-				'error', {'anonymous': 'always', 'named': 'never', 'asyncArrow': 'always'}
-			],
-			'camelcase': ['error'],
-			'no-tabs': [0],
-			'no-unused-vars': [
-				'error',
-				{
-					'argsIgnorePattern': '^_',
-					'varsIgnorePattern': '^_',
-					'caughtErrorsIgnorePattern': '^_'
-				}
-			],
-			'global-require': [0],
-			'no-underscore-dangle': [0],
-			'no-plusplus': [0],
-			'no-shadow': [0],
-			'node/no-unpublished-require': [0],
-			'no-process-exit': [0],
-			'linebreak-style': [0],
-			'node/no-missing-require': [0],
-			'no-console': [0],
-			'node/no-unsupported-features/es-builtins': 0,
-			'node/no-unsupported-features/node-builtins': 0,
-			'func-names': [
-				'error',
-				'never',
-				{
-					'generators': 'never'
-				}
-			]
-		}
-	},
-];
+module.exports = require('addon-tools-raub/utils/eslint-common');

examples/3d-core/brush.js

@@ -0,0 +1,21 @@
+import * as three from 'three';
+
+import node3d from '../../index.js';
+const { init } = node3d;
+
+
+const { Screen, Brush, loop } = init({
+	isGles3: true,
+	isWebGL2: true,
+	autoEsc: true,
+	autoFullscreen: true,
+	vsync: true,
+	title: 'Brush',
+});
+
+const screen = new Screen({ three });
+loop(() => screen.draw());
+
+const brush = new Brush({ screen, color: 0x00FF00 });
+
+screen.on('mousemove', (e) => brush.pos = [e.x, e.y]);

examples/3d-core/brush.mjs

@@ -1,35 +1,22 @@
-'use strict';
+import * as three from 'three';
 
-const three = require('three');
-const { init } = require('../..');
+import node3d from '../../index.js';
+const { init } = node3d;
 
 
 const { Screen, Lines, loop, gl } = init({
 	isGles3: true,
 	isWebGL2: true,
 	autoEsc: true,
 	autoFullscreen: true,
+	vsync: true,
+	title: 'Lines',
 });
 
 const VBO_SIZE = 10;
 
 const screen = new Screen({ three });
 
-const F_KEY = 70;
-
-screen.on('keydown', (e) => {
-	if (e.keyCode === F_KEY && e.ctrlKey && e.shiftKey) {
-		screen.mode = 'windowed';
-	} else if (e.keyCode === F_KEY && e.ctrlKey && e.altKey) {
-		screen.mode = 'fullscreen';
-	} else if (e.keyCode === F_KEY && e.ctrlKey) {
-		screen.mode = 'borderless';
-	} else {
-		return;
-	}
-});
-
-
 loop(() => screen.draw());
 
 screen.camera.position.z = 300;

examples/3d-core/lines.js examples/3d-core/lines.mjsexamples/3d-core/lines.js renamed to examples/3d-core/lines.mjs

@@ -1,40 +1,24 @@
-'use strict';
+import * as three from 'three';
 
-const three = require('three');
-const { init } = require('../..');
+import node3d from '../../index.js';
+const { init } = node3d;
 
 
 const { Screen, loop, Image } = init({
 	isGles3: true,
 	isWebGL2: true,
 	autoEsc: true,
 	autoFullscreen: true,
+	vsync: true,
+	title: 'Mesh',
 });
 
 const screen = new Screen({ three });
 
-const F_KEY = 70;
-
-screen.on('keydown', (e) => {
-	if (e.keyCode === F_KEY && e.ctrlKey && e.shiftKey) {
-		screen.mode = 'windowed';
-	} else if (e.keyCode === F_KEY && e.ctrlKey && e.altKey) {
-		screen.mode = 'fullscreen';
-	} else if (e.keyCode === F_KEY && e.ctrlKey) {
-		screen.mode = 'borderless';
-	} else {
-		return;
-	}
-});
-
-
 const icon = new Image();
-icon.src = __dirname + '/crate.jpg';
+icon.src = 'crate.jpg';
 icon.on('load', () => { screen.icon = icon; });
 
-screen.title = 'Mesh';
-
-
 const geometry = new three.IcosahedronGeometry(2, 1);
 const material =  new three.MeshLambertMaterial({
 	color: 0x888888 + Math.round((0xFFFFFF - 0x888888) * Math.random()),
@@ -57,5 +41,3 @@ loop(() => {
 	mesh.rotation.z = Date.now() * 0.0007;
 	screen.draw();
 });
-
-module.exports = { screen };

examples/3d-core/mesh.js examples/3d-core/mesh.mjsexamples/3d-core/mesh.js renamed to examples/3d-core/mesh.mjs

@@ -1,32 +1,21 @@
-'use strict';
+import * as three from 'three';
 
-const three = require('three');
-const { init } = require('../..');
+import node3d from '../../index.js';
+const { init } = node3d;
 
 
 const { Screen, Points, loop, gl } = init({
 	isGles3: true,
 	isWebGL2: true,
 	autoEsc: true,
 	autoFullscreen: true,
+	vsync: true,
+	points: 'Points',
 });
 
-const F_KEY = 70;
-
 const screen = new Screen({ three });
 loop(() => screen.draw());
 
-screen.on('keydown', (e) => {
-	if (e.keyCode === F_KEY && e.ctrlKey && e.shiftKey) {
-		screen.mode = 'windowed';
-	} else if (e.keyCode === F_KEY && e.ctrlKey && e.altKey) {
-		screen.mode = 'fullscreen';
-	} else if (e.keyCode === F_KEY && e.ctrlKey) {
-		screen.mode = 'borderless';
-	} else {
-		return;
-	}
-});
 screen.camera.position.z = 200;
 
 const VBO_SIZE = 10000;