Tag: threejs

MeshLine

MeshLine Mesh replacement for THREE.Line.Instead of using GL_LINE, it uses a strip of triangles billboarded. Include script after THREE is included <script src=”THREE.MeshLine.js”></script> or use npm to install it npm i three.meshline and include it in your code (don’t forget to require three.js) const THREE = require(‘three’); const MeshLine = require(‘three.meshline’).MeshLine; const MeshLineMaterial = require(‘three.meshline’).MeshLineMaterial; const… Continue reading MeshLine

Quarks

three.quarks three.quarks is a high-performance javascript particle system based visual effect library for threejs written in modern TypeScript. three.quarks computes most particle information on CPU, and it uses customized shader , instancing, batch techniques to render those particles with as few draw calls as possible. three.quarks supports one dimension piecewise Bézier curves for the customizable transform visual… Continue reading Quarks

Threlte in Threejs

Threlte Threlte is a Svelte library that simplifies creating 3D apps for the web. It provides a declarative, type-safe, reactive and interactive API out-of-the-box. Threlte’s 3D rendering is powered by Three.js, and it also provides a physics engine through Rapier and an animation studio via Theatre.js Threlte is comprised of six distinct packages to allow you to import only what you need: @threlte/core provides declarative and transparent Svelte binding to Three.js. @threlte/extras boosts productivity with assorted… Continue reading Threlte in Threejs

Troika Text

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

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)

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