init

src/text.tsx

@@ -0,0 +1,115 @@
+import * as THREE from 'three';
+import { Font as FontLoader } from 'three/examples/jsm/loaders/FontLoader';
+import { TextGeometry } from 'three/examples/jsm/geometries/TextGeometry';
+import { ComponentProps } from 'preact';
+import helvetiker_regular from './fonts/helvetiker_regular.typeface.json'
+
+function runThree(canvas: HTMLCanvasElement, text: string, scale: number) {
+
+    //get canvas size
+    const Bounds = canvas.getBoundingClientRect();
+
+    //get font
+    const Font = new FontLoader(helvetiker_regular);
+
+    //create scene
+    const scene = new THREE.Scene();
+
+    //create text
+    const geometry = new TextGeometry(text, {
+        font: Font,
+        size: 20,
+        height: 1,
+        curveSegments: 4,
+        bevelEnabled: true,
+        bevelThickness: 2,
+        bevelSize: 1,
+        bevelOffset: 0,
+        bevelSegments: 2
+    });
+    
+    //create mesh from text
+    // const material = new THREE.MeshNormalMaterial();
+    const material = new THREE.ShaderMaterial({
+        uniforms: {
+            'tDiffuse': {
+                value: null
+            },
+            'resolution': {
+                value: null
+            },
+            'pixelSize': {
+                value: 100
+            }
+        },
+        vertexShader:
+            /* glsl */
+            `
+            varying highp vec2 vUv;
+            void main() {
+                vUv = uv;
+                gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
+            }`,
+        fragmentShader:
+            /* glsl */
+            `
+            uniform sampler2D tDiffuse;
+            uniform float pixelSize;
+            uniform vec2 resolution;
+            varying highp vec2 vUv;
+            void main(){
+                vec2 dxy = pixelSize / resolution;
+                vec2 coord = dxy * floor( vUv / dxy );
+                gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);
+            }`
+    });
+    const mesh = new THREE.Mesh(geometry, material);
+    scene.add(mesh);
+
+    //center mesh
+    mesh.geometry.center();
+
+    //create camera
+    const camera = new THREE.PerspectiveCamera(70, Bounds.width / Bounds.height, 0.01, 1000);
+    camera.position.set(0, 0, 50 / scale);
+
+    //set render settings
+    const renderer = new THREE.WebGLRenderer({
+        antialias: false,
+        canvas: canvas,
+        alpha: true
+    });
+
+    renderer.render(scene, camera);
+    
+    //animate
+    renderer.setAnimationLoop(animation);
+
+    function animation(time: number) {
+
+        mesh.rotation.x = time / 500;
+
+        renderer.render(scene, camera);
+
+    }
+}
+
+interface Text3DArgs extends ComponentProps<'canvas'> {
+    children: string;
+    scale: number;
+}
+
+export default function Text3D({ children: text, scale, ...props }: Text3DArgs) {
+
+    function runRef(canvas: HTMLCanvasElement | null) {
+
+        if (!canvas)
+            return;
+
+        runThree(canvas, text, scale);
+    }
+
+    return (
+        <canvas {...props} ref={runRef} />
+    )
+}