protectwise / troika

A JavaScript framework for interactive 3D and 2D visualizations

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Emoji and Unicode support

nicholasvperry opened this issue · comments

Should be allowed to use emojis and Unicode.

What's not working for you specifically?

I'm currently working with Threlte, which utilizes Troika. In my implementation, when I pass a string containing both keyboard characters and emojis, the emojis appear as boxes with an "X" in the middle. I've attempted to address this by specifying a font and using a font file that includes emojis. However, this solution introduces a new issue where the keyboard characters don't display correctly.

Here's a snippet of the relevant code:

<script>
      import * as Extra from '@threlte/extras';
      import { InteractiveObject, OrbitControls, T, useTexture, useThrelte } from '@threlte/core';
</script>


<T.Group>
		<T.Mesh position.x={$tLongitude} position.y={$tHeight} position.z={$tLatitude} let:ref>
			<InteractiveObject
				object={ref}
				interactive
				on:click={() => showModal()}
				on:pointerenter={onPointerEnter}
				on:pointerleave={onPointerLeave}
			/>
			<T.BoxGeometry args={[boxSize.length, 0.2, boxSize.width]}>
				<
				<Extra.Text
				text="⬅️ Some other text here 😬😬"
				fontSize={0.23}
				color="black"
				/>
				
			</T.BoxGeometry>
			<T.MeshStandardMaterial map={texture} metalness="2" />
		</T.Mesh>
	</T.Group>

It looks like Threlte is a couple versions behind; the current version should handle this for you, although the emojis will be monochrome.