@blooooork/three-ui

A professional 3D user interface component library for Three.js applications. Build beautiful, interactive 3D interfaces with ease using these high-performance, reusable components.

Features

🎯 Title Block

Stylish 3D title component with wireframe effects:

import { TitleBlock } from '@blooooork/three-ui';

const title = new TitleBlock(scene, camera, {
    width: 10,
    height: 2.75,
    color: 0xffffff,
    wireframe: true
});

🔗 Link Container

Interactive 3D link container with click detection:

import { LinkContainer } from '@blooooork/three-ui';

const links = new LinkContainer(scene, camera, {
    links: [
        { id: 'github', texture: githubTexture, url: 'https://github.com' },
        { id: 'twitter', texture: twitterTexture, url: 'https://twitter.com' }
    ]
});

// Handle clicks
renderer.domElement.addEventListener('click', (event) => {
    const point = {
        x: (event.clientX / window.innerWidth) * 2 - 1,
        y: -(event.clientY / window.innerHeight) * 2 + 1
    };
    links.onClick(point);
});

📝 Text Frame

Animated text frame with smooth transitions:

import { TextFrame } from '@blooooork/three-ui';

const frame = new TextFrame(scene, camera, {
    width: 10,
    height: 5,
    opacity: 0.8
});

// Animate to new position
frame.animate(new THREE.Vector3(5, 0, 0), 1000);

🔲 Hide Button

Interactive button with hover effects:

import { HideButton } from '@blooooork/three-ui';

const button = new HideButton(scene, camera, {
    width: 1,
    height: 1,
    color: 0xffffff,
    hoverColor: 0x00ff00
});

button.onClick((isHidden) => {
    console.log('Button state:', isHidden ? 'hidden' : 'visible');
});

Installation

npm install @blooooork/three-ui

Requirements

• three.js ^0.160.0

License

MIT