Draco is an open source library for compressing and decompressing 3D meshes and point clouds. Compressed geometry can be significantly smaller, at the cost of additional decoding time on the client device. A normal glTF file can be converted to a Draco-compressed glTF file using glTF-Pipeline. When using Draco with glTF, an instance of DRACOLoader will be… Continue reading DRACOLoader
Category: Immersive Web( AR/ VR/ XR)
This is the category for Immersive Web( AR/ VR/ XR)
ThreeJs SKY
Sky Sky creates a ready to go sky environment for your scenes. Import Sky is an add-on, and therefore must be imported explicitly. See Installation / Addons. import { Sky } from ‘three/addons/objects/Sky.js’; Code Example const sky = new Sky(); sky.scale.setScalar( 450000 ); const phi = MathUtils.degToRad( 90 ); const theta = MathUtils.degToRad( 180 ); const… Continue reading ThreeJs SKY
MISC Timer
Timer This class is an alternative to Clock with a different API design and behavior. The goal is to avoid the conceptual flaws that became apparent in Clock over time. Timer has an .update() method that updates its internal state. That makes it possible to call .getDelta() and .getElapsed() multiple times per simulation step without getting different values. The class uses the… Continue reading MISC Timer
Troika Text for Three.js
Troika Text The troika-three-text package provides high quality text rendering in Three.js scenes, using signed distance fields (SDF) and antialiasing using standard derivatives. Rather than relying on pre-generated SDF textures, this parses font files (.ttf, .otf, .woff) directly using Typr, and generates the SDF atlas for glyphs on-the-fly as they are used. It also handles proper kerning, ligature glyph substitution,… Continue reading Troika Text for Three.js
Audio
In Three.js, audio functionality allows you to integrate sound effects and music into your 3D scenes. This can enhance the immersive experience of your application or game. The Three.js library provides several classes to handle different aspects of audio, including loading audio files, creating audio sources, and controlling audio playback. Code Example // create an… Continue reading Audio
Understanding Fragment Shaders in Three.js
Introduction Fragment shaders are a crucial part of the rendering pipeline in graphics programming. They are responsible for determining the color and other attributes of each pixel on the screen. In Three.js, fragment shaders allow you to create custom visual effects and fine-tune the appearance of your 3D models. This article provides an overview of… Continue reading Understanding Fragment Shaders in Three.js
Understanding Vertex Shaders in Three.js
Introduction Vertex shaders are a fundamental component of modern graphics programming. In Three.js, vertex shaders are used to process the vertices of 3D models before they are rendered. This article provides an overview of vertex shaders, their role in the graphics pipeline, and how to use them in Three.js. What is a Vertex Shader? A… Continue reading Understanding Vertex Shaders in Three.js
Creating Interactive VR Experiences with Three.js
Introduction Creating interactive VR experiences can be incredibly rewarding, and Three.js makes it straightforward to build these experiences in the browser. This guide will walk you through the process of adding basic interactivity to a VR scene using Three.js and the WebXR API. Prerequisites Basic understanding of JavaScript Familiarity with Three.js Basic knowledge of VR… Continue reading Creating Interactive VR Experiences with Three.js
Getting Started with Three.js and WebXR
Introduction Three.js is a powerful JavaScript library that makes it easy to create and render 3D graphics in the browser. WebXR is an API that allows you to create immersive virtual and augmented reality experiences. This guide will walk you through the basics of integrating Three.js with WebXR to build VR and AR applications. Prerequisites… Continue reading Getting Started with Three.js and WebXR
Physics and Interactions in Three.js
Three.js is a powerful JavaScript library for creating 3D graphics on the web, but it doesn’t include built-in physics or complex interaction capabilities. To fill this gap, several frameworks and libraries integrate seamlessly with Three.js, providing robust physics engines and advanced interaction features. This article explores some of the best options available, helping you choose… Continue reading Physics and Interactions in Three.js