Troika Text (troika-three-text) is a modern text-rendering library for Three.js that takes the best features of BMFonts and makes them more accessible. It supports rendering text directly from .TTF or .WOFF font files, eliminating the need for pre-generating glyphs or bitmap textures. It uses signed distance fields (SDF) for high-quality anti-aliased text that scales smoothly… Continue reading Troika Text
Category: Immersive Web( AR/ VR/ XR)
This is the category for Immersive Web( AR/ VR/ XR)
Dispose Objects in Threejs
Dispose of objects One important aspect in order to improve performance and avoid memory leaks in your application is the disposal of unused library entities. Whenever you create an instance of a three.js type, you allocate a certain amount of memory. However, three.js creates for specific objects like geometries or materials WebGL related entities like buffers or shader programs… Continue reading Dispose Objects in Threejs
Bitmap Fonts (BMFonts)
Bitmap Fonts (BMFonts) allow you to render text as a series of glyphs (pre-rendered characters) packed into a single BufferGeometry. This method is highly optimized for performance because it batches all the glyphs into one draw call, significantly reducing the rendering load. You can also use Signed Distance Fields (SDF) to create sharp edges on… Continue reading Bitmap Fonts (BMFonts)
Text Geometry (THREE.TextGeometry)
TextGeometry is a native Three.js class that lets you create 3D text using a font file and display it in a scene. The text is fully rendered as a 3D object, meaning you can apply transformations (scale, rotation, position) and materials (textures, lighting, etc.) just like any other 3D mesh. The font needs to be… Continue reading Text Geometry (THREE.TextGeometry)
CSS2DRenderer and CSS3DRenderer
CSS2DRenderer and CSS3DRenderer are renderers designed for integrating HTML and DOM elements into a Three.js scene. Unlike the WebGL renderer that draws 3D objects directly, these renderers allow DOM elements (like divs and spans) to be placed and moved within the scene, making it possible to include traditional web elements like text, buttons, or even… Continue reading CSS2DRenderer and CSS3DRenderer
KeyframeTrack
A KeyframeTrack is a timed sequence of keyframes, which are composed of lists of times and related values, and which are used to animate a specific property of an object. For an overview of the different elements of the three.js animation system see the “Animation System” article in the “Next Steps” section of the manual. In… Continue reading KeyframeTrack
Color management
What is a color space? Every color space is a collection of several design decisions, chosen together to support a large range of colors while satisfying technical constraints related to precision and display technologies. When creating a 3D asset, or assembling 3D assets together into a scene, it is important to know what these properties… Continue reading Color management
Drawing lines Three js
Let’s say you want to draw a line or a circle, not a wireframe Mesh. First we need to set up the renderer, scene and camera (see the Creating a scene page). Here is the code that we will use: const renderer = new THREE.WebGLRenderer(); renderer.setSize( window.innerWidth, window.innerHeight ); document.body.appendChild( renderer.domElement ); const camera = new THREE.PerspectiveCamera( 45, window.innerWidth… Continue reading Drawing lines Three js
Creating text THREEJS
There are often times when you might need to use text in your three.js application – here are a couple of ways that you can do so. 1. DOM + CSS Using HTML is generally the easiest and fastest manner to add text. This is the method used for descriptive overlays in most three.js examples.… Continue reading Creating text THREEJS
Optimizing Performance in Three.js with Instanced Meshes
Overview Instanced meshes in Three.js allow you to render multiple copies of the same geometry with different transformations (position, rotation, scale) in a highly efficient manner. This technique significantly reduces the number of draw calls, improving the performance of your 3D applications, especially when dealing with large numbers of identical objects. Key Features: Reduced Draw… Continue reading Optimizing Performance in Three.js with Instanced Meshes