pni 1.0.0

package/dist/template_code/three/scene.js

@@ -0,0 +1,28 @@
+import {Scene, Color} from 'three';
+import {createCube} from './components/cube.js';
+import {createTorus} from './components/torus.js';
+import {createSphere} from './components/sphere.js';
+import {createLights} from './components/lights.js';
+
+function createScene() {
+	const scene = new Scene();
+	scene.background = new Color('#1a1a1a');
+
+	// Add meshes
+	const cube = createCube();
+	const torus = createTorus();
+	const sphere = createSphere();
+
+	scene.add(cube, torus, sphere);
+
+	// Add lights
+	const {ambientLight, mainLight} = createLights();
+	scene.add(ambientLight, mainLight);
+
+	// Store animatable objects
+	scene.userData.updatables = [cube, torus, sphere];
+
+	return scene;
+}
+
+export {createScene};

package/dist/template_code/three/systems/Loop.js

@@ -0,0 +1,43 @@
+import {Clock} from 'three';
+
+const clock = new Clock();
+
+class Loop {
+	constructor(camera, scene, renderer, composer) {
+		this.camera = camera;
+		this.scene = scene;
+		this.renderer = renderer;
+		this.composer = composer;
+		this.updatables = [];
+	}
+
+	start() {
+		this.renderer.setAnimationLoop(() => {
+			// tell every animated object to tick forward one frame
+			this.tick();
+
+			// render a frame using effect composer
+			// this.composer.render();
+			this.renderer.render(this.scene, this.camera);
+		});
+	}
+
+	stop() {
+		this.renderer.setAnimationLoop(null);
+	}
+
+	tick() {
+		// only call the getDelta function once per frame!
+		const delta = clock.getDelta();
+
+		// console.log(
+		//   `The last frame rendered in ${delta * 1000} milliseconds`,
+		// );
+
+		for (const object of this.updatables) {
+			object.tick(delta);
+		}
+	}
+}
+
+export {Loop};

package/dist/template_code/three/systems/Resizer.js

@@ -0,0 +1,26 @@
+const setSize = (container, camera, renderer, composer) => {
+	camera.aspect = container.clientWidth / container.clientHeight;
+	camera.updateProjectionMatrix();
+
+	renderer.setSize(container.clientWidth, container.clientHeight);
+	renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
+	composer.setSize(container.clientWidth, container.clientHeight);
+};
+
+class Resizer {
+	constructor(container, camera, renderer, composer) {
+		// set initial size on load
+		setSize(container, camera, renderer, composer);
+
+		window.addEventListener('resize', () => {
+			// set the size again if a resize occurs
+			setSize(container, camera, renderer, composer);
+			// perform any custom actions
+			this.onResize();
+		});
+	}
+
+	onResize() {}
+}
+
+export {Resizer};

package/dist/template_code/three/systems/controls.js

@@ -0,0 +1,19 @@
+import {OrbitControls} from 'three/examples/jsm/controls/OrbitControls.js';
+
+function createControls(camera, canvas) {
+	const controls = new OrbitControls(camera, canvas);
+
+	controls.enableDamping = true;
+	controls.dampingFactor = 0.05;
+	controls.enablePan = true;
+	controls.enableZoom = true;
+	controls.autoRotate = false;
+	controls.autoRotateSpeed = 1;
+
+	// forward controls.update to our custom .tick method
+	controls.tick = () => controls.update();
+
+	return controls;
+}
+
+export {createControls};

package/dist/template_code/three/systems/post-processing.js

@@ -0,0 +1,50 @@
+import {
+	BloomEffect,
+	EffectComposer,
+	EffectPass,
+	RenderPass,
+	ChromaticAberrationEffect,
+	BlendFunction,
+	NoiseEffect,
+	SMAAEffect,
+	ShaderPass,
+} from 'postprocessing';
+import {HalfFloatType, ShaderMaterial, Uniform, Vector2} from 'three';
+
+function createPostprocessing(scene, camera, renderer) {
+	const composer = new EffectComposer(renderer, {
+		frameBufferType: HalfFloatType,
+	});
+
+	composer.setSize(window.innerWidth, window.innerHeight);
+	composer.addPass(new RenderPass(scene, camera));
+
+	const bloomEffect = new BloomEffect({
+		luminanceThreshold: 0.2,
+		luminanceSmoothing: 0.7,
+		intensity: 0.1,
+		mipmapBlur: true,
+	});
+
+	const chromaticAberrationEffect = new ChromaticAberrationEffect({
+		offset: new Vector2(0.0005, 0.0005),
+	});
+
+	const noiseEffect = new NoiseEffect({
+		blendFunction: BlendFunction.OVERLAY,
+		premultiplyAlpha: true,
+	});
+
+	noiseEffect.blendMode.opacity.value = 0.2;
+
+	const smaaEffect = new SMAAEffect();
+
+	const smaaPass = new EffectPass(camera, smaaEffect);
+	const effectPass = new EffectPass(camera, noiseEffect);
+	composer.addPass(smaaPass);
+	composer.addPass(effectPass);
+
+	return composer;
+}
+
+export {createPostprocessing};

package/dist/template_code/three/systems/renderer.js

@@ -0,0 +1,17 @@
+import {SRGBColorSpace, WebGLRenderer} from 'three';
+
+function createRenderer() {
+	const renderer = new WebGLRenderer({
+		powerPreference: 'high-performance',
+		// antialias: false,
+		// stencil: false,
+		// depth: false,
+		alpha: true,
+	});
+	renderer.outputColorSpace = SRGBColorSpace;
+	renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
+
+	return renderer;
+}
+
+export {createRenderer};

package/dist/template_code/three/utils/deviceDetector.js

@@ -0,0 +1,141 @@
+// Device detection utility with resize handling
+
+const BREAKPOINTS = {
+	mobile: 768,
+	tablet: 1024,
+};
+
+let deviceType = 'desktop';
+let windowWidth = typeof window !== 'undefined' ? window.innerWidth : 1920;
+let resizeHandler = null;
+
+/**
+ * Determines the device type based on window width
+ * @returns {string} 'mobile' | 'tablet' | 'desktop'
+ */
+function getDeviceType() {
+	if (typeof window === 'undefined') {
+		return 'desktop';
+	}
+
+	const width = window.innerWidth;
+
+	if (width < BREAKPOINTS.mobile) {
+		return 'mobile';
+	} else if (width < BREAKPOINTS.tablet) {
+		return 'tablet';
+	}
+	return 'desktop';
+}
+
+/**
+ * Updates the current device type
+ */
+function updateDeviceType() {
+	const newDeviceType = getDeviceType();
+	const newWidth = window.innerWidth;
+
+	if (newDeviceType !== deviceType || newWidth !== windowWidth) {
+		deviceType = newDeviceType;
+		windowWidth = newWidth;
+
+		// Dispatch custom event for listeners
+		if (typeof window !== 'undefined') {
+			window.dispatchEvent(
+				new CustomEvent('devicechange', {
+					detail: {deviceType, width: windowWidth},
+				}),
+			);
+		}
+	}
+}
+
+/**
+ * Initializes device detection and sets up resize listener
+ */
+function initDeviceDetector() {
+	if (typeof window === 'undefined') {
+		return;
+	}
+
+	// Initial detection
+	updateDeviceType();
+
+	// Set up resize listener with debounce
+	let resizeTimeout;
+	resizeHandler = () => {
+		clearTimeout(resizeTimeout);
+		resizeTimeout = setTimeout(() => {
+			updateDeviceType();
+		}, 150);
+	};
+
+	window.addEventListener('resize', resizeHandler);
+}
+
+/**
+ * Cleans up the resize listener
+ */
+function disposeDeviceDetector() {
+	if (resizeHandler && typeof window !== 'undefined') {
+		window.removeEventListener('resize', resizeHandler);
+		resizeHandler = null;
+	}
+}
+
+/**
+ * Gets the current device type
+ * @returns {string} Current device type
+ */
+function getCurrentDevice() {
+	return deviceType;
+}
+
+/**
+ * Gets the current window width
+ * @returns {number} Current window width
+ */
+function getCurrentWidth() {
+	return windowWidth;
+}
+
+/**
+ * Checks if current device is mobile
+ * @returns {boolean}
+ */
+function isMobile() {
+	return deviceType === 'mobile';
+}
+
+/**
+ * Checks if current device is tablet
+ * @returns {boolean}
+ */
+function isTablet() {
+	return deviceType === 'tablet';
+}
+
+/**
+ * Checks if current device is desktop
+ * @returns {boolean}
+ */
+function isDesktop() {
+	return deviceType === 'desktop';
+}
+
+// Auto-initialize if in browser environment
+if (typeof window !== 'undefined') {
+	initDeviceDetector();
+}
+
+export {
+	initDeviceDetector,
+	disposeDeviceDetector,
+	getCurrentDevice,
+	getCurrentWidth,
+	getDeviceType,
+	isMobile,
+	isTablet,
+	isDesktop,
+	BREAKPOINTS,
+};

package/dist/template_code/three/utils/gltfLoader.js

@@ -0,0 +1,14 @@
+import {GLTFLoader} from 'three/examples/jsm/loaders/GLTFLoader.js';
+import {DRACOLoader} from 'three/examples/jsm/loaders/DRACOLoader.js';
+
+const gltfLoader = new GLTFLoader();
+const dracoLoader = new DRACOLoader();
+dracoLoader.setDecoderPath('/draco/');
+gltfLoader.setDRACOLoader(dracoLoader);
+
+async function loadGLTF(modelPath) {
+	const model = await gltfLoader.loadAsync(modelPath);
+	return model;
+}
+
+export {gltfLoader, loadGLTF};

package/dist/template_code/three/utils/loadKTX2Texture.js

@@ -0,0 +1,42 @@
+import {KTX2Loader} from 'three/examples/jsm/loaders/KTX2Loader.js';
+
+let ktx2Loader = null;
+
+function initKTX2Loader(renderer) {
+	if (!ktx2Loader) {
+		ktx2Loader = new KTX2Loader();
+		ktx2Loader.setTranscoderPath('/basis/');
+		ktx2Loader.detectSupport(renderer);
+	}
+	return ktx2Loader;
+}
+
+async function loadKTX2Texture(url) {
+	if (!ktx2Loader) {
+		throw new Error(
+			'KTX2Loader not initialized. Call initKTX2Loader(renderer) first.',
+		);
+	}
+
+	return new Promise((resolve, reject) => {
+		ktx2Loader.load(
+			url,
+			texture => {
+				resolve(texture);
+			},
+			undefined,
+			error => {
+				reject(error);
+			},
+		);
+	});
+}
+
+function disposeKTX2Loader() {
+	if (ktx2Loader) {
+		ktx2Loader.dispose();
+		ktx2Loader = null;
+	}
+}
+
+export {initKTX2Loader, loadKTX2Texture, disposeKTX2Loader};

package/dist/template_code/three/utils/textureLoader.js

@@ -0,0 +1,21 @@
+import {TextureLoader} from 'three';
+
+// Global texture loader instance
+const textureLoader = new TextureLoader();
+
+async function loadTexture(url) {
+	return new Promise((resolve, reject) => {
+		textureLoader.load(
+			url,
+			texture => {
+				resolve(texture);
+			},
+			undefined,
+			error => {
+				reject(error);
+			},
+		);
+	});
+}
+
+export {textureLoader, loadTexture};

package/dist/utils/add-three.d.ts

@@ -0,0 +1,7 @@
+export declare function addThree(currentDir: string): Promise<{
+    directoryName: string;
+    appFolder: string;
+    threePath: string;
+    projectType: 'nuxt' | 'vue';
+    fileExtension: 'js' | 'ts';
+}>;