@vyr/three 0.0.1

package/src/utils/text/index.ts

@@ -0,0 +1,492 @@
+import { Box3, BufferGeometry } from 'three';
+import { Font } from 'three/examples/jsm/loaders/FontLoader.js';
+import { TextGeometry } from 'three/examples/jsm/geometries/TextGeometry.js';
+import { mergeGeometries } from 'three/examples/jsm/utils/BufferGeometryUtils.js'
+
+interface CharInfo {
+    geometry: BufferGeometry
+    width: number
+    height: number
+    depth: number
+    minX: number
+    minY: number
+    maxY: number
+}
+
+interface TextOptions {
+    size: number
+    letterSpacing: number
+    lineHeight: number
+    align: string
+    lineIndex: number
+    currentY: number
+}
+
+interface CharSizes {
+    [k: string]: number
+}
+
+interface TextLayout {
+    lines: string[]
+    charSizes: CharSizes
+    maxCharHeight: number
+    spaceWidth: number
+}
+
+interface CharDimensions {
+    width: number
+    height: number
+    depth: number
+    minX: number
+    minY: number
+    maxY: number
+}
+
+class TextUtils {
+    static charTemplateCache = new Map<string, CharInfo>()
+    static defaultOptions = {
+        size: 1,
+        depth: 1,
+        curveSegments: 12,
+        bevelEnabled: true,
+        bevelThickness: 0,
+        bevelSize: 0,
+        bevelOffset: 0,
+        bevelSegments: 5
+    }
+
+    /**
+     * 创建字符几何体（使用缓存优化）
+     */
+    static createCharGeometry(char: string, font: Font, options = {}) {
+        if (!char || char === '') {
+            return null;
+        }
+
+        try {
+            // 检查缓存
+            if (!this.charTemplateCache.has(char)) {
+                const geometry = new TextGeometry(char, {
+                    ...TextUtils.defaultOptions,
+                    font,
+                });
+
+                geometry.computeBoundingBox();
+                const bbox = geometry.boundingBox as Box3
+
+                if (bbox.isEmpty()) return null
+
+                this.charTemplateCache.set(char, {
+                    geometry: geometry,
+                    width: bbox.max.x - bbox.min.x,
+                    height: bbox.max.y - bbox.min.y,
+                    depth: bbox.max.z - bbox.min.z,
+                    minX: bbox.min.x,
+                    minY: bbox.min.y,
+                    maxY: bbox.max.y,
+                });
+            }
+
+            const template = this.charTemplateCache.get(char) as CharInfo
+
+            return {
+                geometry: template.geometry.clone(),
+                width: template.width,
+                height: template.height,
+                depth: template.depth,
+                minX: template.minX,
+                minY: template.minY
+            };
+        } catch (error) {
+            console.error(`Error creating geometry for character "${char}":`, error);
+            return null;
+        }
+    }
+
+    /**
+     * 获取字符尺寸信息（包含字间距）
+     */
+    static getCharDimensions(char: string, font: Font, options: Partial<TextOptions> = {}): CharDimensions {
+        if (!char || char === '') {
+            return { width: 0, height: 0, depth: 0, minX: 0, minY: 0, maxY: 0 };
+        }
+
+        const { letterSpacing = 0.1 } = options
+
+        if (!this.charTemplateCache.has(char)) {
+            this.createCharGeometry(char, font, options);
+        }
+
+        const template = this.charTemplateCache.get(char);
+        if (!template) {
+            return { width: 0, height: 0, depth: 0, minX: 0, minY: 0, maxY: 0 };
+        }
+
+        // 在字符宽度基础上添加字间距
+        return {
+            width: template.width + letterSpacing,
+            height: template.height,
+            depth: template.depth,
+            minX: template.minX,
+            minY: template.minY,
+            maxY: template.maxY,
+        };
+    }
+
+    /**
+     * 计算文本行布局
+     */
+    static calculateLineLayout(text: string, maxWidth: number, font: Font, options: Partial<TextOptions> = {}): TextLayout {
+        if (!text || maxWidth <= 0) {
+            return { lines: [], charSizes: {}, maxCharHeight: 0, spaceWidth: 0 };
+        }
+
+        const paragraphs = text.split('\n');
+        const lines = [];
+        const charSizes: CharSizes = {};
+
+        // 预计算空格宽度（包含字间距）
+        const spaceDimensions = this.getCharDimensions(' ', font, options);
+        const spaceWidth = spaceDimensions.width;
+
+        // 计算最大字符高度
+        let minY = Infinity, maxY = 0;
+
+        for (const paragraph of paragraphs) {
+            const words = paragraph.split(' ');
+            let currentLine = '';
+            let currentLineWidth = 0;
+
+            for (const word of words) {
+                if (!word) continue;
+
+                let wordWidth = 0;
+                const chars = word.split('');
+
+                // 预计算单词中所有字符的尺寸
+                for (const char of chars) {
+                    if (!charSizes[char]) {
+                        const dim = this.getCharDimensions(char, font, options);
+                        charSizes[char] = dim.width;
+                        minY = Math.min(minY, dim.minY)
+                        maxY = Math.max(maxY, dim.maxY)
+                    }
+                    wordWidth += charSizes[char];
+                }
+
+                // 处理超长单词
+                if (wordWidth > maxWidth && currentLine === '') {
+                    this.handleLongWord(chars, maxWidth, charSizes, lines, font, options);
+                    continue;
+                }
+
+                // 计算当前行加上这个单词后的宽度
+                const spaceWidthForWord = currentLine ? spaceWidth : 0;
+                const potentialLineWidth = currentLineWidth + spaceWidthForWord + wordWidth;
+
+                if (potentialLineWidth > maxWidth) {
+                    if (currentLine) {
+                        lines.push(currentLine);
+                        currentLine = word;
+                        currentLineWidth = wordWidth;
+                    } else {
+                        lines.push(word);
+                        currentLine = '';
+                        currentLineWidth = 0;
+                    }
+                } else {
+                    if (currentLine) {
+                        currentLine += ' ' + word;
+                        currentLineWidth += spaceWidth + wordWidth;
+                    } else {
+                        currentLine = word;
+                        currentLineWidth = wordWidth;
+                    }
+                }
+            }
+
+            if (currentLine) {
+                lines.push(currentLine);
+            }
+
+            if (paragraphs.length > 1 && paragraph !== paragraphs[paragraphs.length - 1]) {
+                lines.push('');
+            }
+        }
+
+        const maxCharHeight = maxY - minY;
+        return {
+            lines: lines.filter(line => line !== undefined && line !== null),
+            charSizes,
+            maxCharHeight: maxCharHeight > 0 ? maxCharHeight : 0,
+            spaceWidth
+        };
+    }
+
+    /**
+     * 处理超长单词
+     */
+    static handleLongWord(chars: string[], maxWidth: number, charSizes: CharSizes, lines: string[], font: Font, options: Partial<TextOptions>) {
+        const { letterSpacing = 0.1 } = options;
+        let currentSegment = '';
+        let segmentWidth = 0;
+
+        for (const char of chars) {
+            if (!charSizes[char]) {
+                const dim = this.getCharDimensions(char, font, options);
+                charSizes[char] = dim.width; // 这里已经包含了letterSpacing
+            }
+
+            const charWidth = charSizes[char];
+
+            if (charWidth > maxWidth && currentSegment === '') {
+                lines.push(char);
+                continue;
+            }
+
+            if (segmentWidth + charWidth > maxWidth && currentSegment) {
+                lines.push(currentSegment);
+                currentSegment = char;
+                segmentWidth = charWidth;
+            } else {
+                currentSegment += char;
+                segmentWidth += charWidth;
+            }
+        }
+
+        if (currentSegment) {
+            lines.push(currentSegment);
+        }
+    }
+
+    /**
+     * 创建单行文本几何体
+     */
+    static createSingleLineGeometry(line: string, layout: TextLayout, font: Font, options: Partial<TextOptions>) {
+        const {
+            align = 'left',
+            currentY = 0,
+        } = options;
+
+        if (!line || line.trim() === '') {
+            return null;
+        }
+
+        try {
+            // 计算行总宽度（这里已经包含了字间距）
+            let lineWidth = 0;
+            for (const char of line) {
+                if (char === ' ') {
+                    lineWidth += layout.spaceWidth;
+                } else {
+                    lineWidth += layout.charSizes[char] || 0;
+                }
+            }
+
+            // 根据对齐方式计算起始X坐标
+            let startX = 0;
+            switch (align) {
+                case 'center':
+                    startX = -lineWidth / 2;
+                    break;
+                case 'right':
+                    startX = -lineWidth;
+                    break;
+                default: // 'left'
+                    startX = 0;
+            }
+
+            const charGeometries = [];
+            let currentX = startX;
+
+            // 计算这行字符的最大上升部和下降部
+            let maxAscent = 0;
+            let maxDescent = 0;
+
+            for (const char of line) {
+                if (char === ' ') continue;
+
+                const dim = this.getCharDimensions(char, font, options);
+                maxAscent = Math.max(maxAscent, dim.maxY);
+                maxDescent = Math.max(maxDescent, -dim.minY);
+            }
+
+            // 统一的基线位置
+            const baselineY = currentY;
+
+            // 创建每个字符的几何体
+            for (const char of line) {
+                if (char === ' ') {
+                    currentX += layout.spaceWidth;
+                    continue;
+                }
+
+                const charGeo = this.createCharGeometry(char, font, options);
+                if (!charGeo || !charGeo.geometry) continue;
+
+                const geometry = charGeo.geometry;
+
+                // 字符位置计算
+                const offsetX = currentX - charGeo.minX;
+                const offsetY = baselineY;
+
+                geometry.translate(offsetX, offsetY, 0);
+
+                charGeometries.push(geometry);
+
+                // 移动到下一个字符位置（这里使用包含letterSpacing的宽度）
+                currentX += layout.charSizes[char] || 0;
+            }
+
+            return this.mergeGeometries(charGeometries);
+        } catch (error) {
+            console.error('Error creating single line geometry:', error);
+            return null;
+        }
+    }
+
+    /**
+     * 合并多个几何体
+     */
+    static mergeGeometries(geometries: BufferGeometry[]) {
+        const validGeometries = geometries.filter(geo =>
+            geo && geo.isBufferGeometry && geo.attributes.position && geo.attributes.position.count > 0
+        );
+
+        if (validGeometries.length === 0) {
+            return new BufferGeometry();
+        }
+
+        if (validGeometries.length === 1) {
+            return validGeometries[0];
+        }
+
+        try {
+            const merged = mergeGeometries(validGeometries);
+            validGeometries.forEach(geo => geo.dispose());
+            return merged || new BufferGeometry();
+        } catch (error) {
+            console.error(error);
+            validGeometries.forEach(geo => geo.dispose());
+            return new BufferGeometry();
+        }
+    }
+
+    /**
+     * 清理缓存和释放内存
+     */
+    static dispose() {
+        for (const [key, template] of this.charTemplateCache) {
+            if (template.geometry && template.geometry.dispose) {
+                template.geometry.dispose();
+            }
+        }
+        this.charTemplateCache.clear();
+    }
+
+    /**
+     * 获取文本尺寸信息
+     */
+    static measureText(text: string, maxWidth: number, font: Font, options: Partial<TextOptions> = {}) {
+        if (!text || maxWidth <= 0) {
+            return { width: 0, height: 0, lineCount: 0, lines: [] };
+        }
+
+        const layout = this.calculateLineLayout(text, maxWidth, font, options);
+
+        if (layout.lines.length === 0) {
+            return { width: 0, height: 0, lineCount: 0, lines: [] };
+        }
+
+        let totalWidth = 0;
+        const nonEmptyLines = layout.lines.filter(line => line !== '');
+
+        for (const line of nonEmptyLines) {
+            let lineWidth = 0;
+            for (const char of line) {
+                if (char === ' ') {
+                    lineWidth += layout.spaceWidth;
+                } else {
+                    lineWidth += layout.charSizes[char] || 0;
+                }
+            }
+            totalWidth = Math.max(totalWidth, lineWidth);
+        }
+
+        const totalHeight = nonEmptyLines.length * layout.maxCharHeight * (options.lineHeight || 1.4);
+
+        return {
+            width: totalWidth,
+            height: totalHeight,
+            lineCount: nonEmptyLines.length,
+            lines: layout.lines
+        };
+    }
+
+    /**
+     * 创建换行文本的合并几何体
+     */
+    static createTextGeometry(text: string, maxWidth: number, font: Font, options: Partial<TextOptions> = {}) {
+        if (!text || text.trim() === '' || maxWidth <= 0) {
+            return new BufferGeometry();
+        }
+
+        const {
+            size = 1,
+            lineHeight = 1.02,
+            align = 'left'
+        } = options;
+
+        const layout = this.calculateLineLayout(text, maxWidth, font, options);
+
+        if (layout.lines.length === 0) {
+            return new BufferGeometry();
+        }
+
+        const lineGeometries: BufferGeometry[] = [];
+        const maxCharHeight = layout.maxCharHeight;
+
+        // 计算起始Y位置（从顶部开始）
+        const nonEmptyLines = layout.lines.filter(line => line !== '');
+        const totalHeight = (nonEmptyLines.length - 1) * maxCharHeight * lineHeight;
+        let currentY = totalHeight / 2;
+
+        // 为每一行创建几何体
+        for (let i = 0; i < layout.lines.length; i++) {
+            const line = layout.lines[i];
+            if (line === '') {
+                currentY -= maxCharHeight * lineHeight;
+                continue;
+            }
+
+            const lineGeometry = this.createSingleLineGeometry(line, layout, font, {
+                ...options,
+                align,
+                lineIndex: i,
+                currentY
+            });
+
+            if (lineGeometry) {
+                lineGeometries.push(lineGeometry);
+            }
+
+            currentY -= maxCharHeight * lineHeight;
+        }
+
+        // 合并所有几何体
+        const mergedGeometry = this.mergeGeometries(lineGeometries);
+        mergedGeometry.scale(size, size, 1)
+
+        // 计算边界框和边界球
+        if (mergedGeometry.attributes.position && mergedGeometry.attributes.position.count > 0) {
+            mergedGeometry.computeBoundingBox();
+            mergedGeometry.computeBoundingSphere();
+        }
+
+        return mergedGeometry;
+    }
+}
+
+export {
+    TextUtils
+}

package/src/utils/texture/index.ts

@@ -0,0 +1,19 @@
+import { Material } from 'three'
+import { Asset, Descriptor, Graphics, UpdateArgs } from '@vyr/engine'
+import { TextureDescriptor } from '../../descriptor'
+import { TextureActor } from '../../actor'
+
+const setMap = <T extends Descriptor = Descriptor>(material: Material, key: keyof T, descriptor: T, graphics: Graphics, args: UpdateArgs) => {
+    const value = descriptor[key] as string
+    const texture = Asset.get(value)
+    if (texture instanceof TextureDescriptor) {
+        const textureActor = graphics.getActor<TextureActor>(texture, args)
+        //@ts-ignore
+        material[key] = textureActor.object
+    } else {
+        //@ts-ignore
+        material[key] = null
+    }
+}
+
+export { setMap }