Immersive Web( AR/ VR/ XR) – Page 4

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 sunPosition… Continue reading Sky

EffectComposer

Used to implement post-processing effects in three.js. The class manages a chain of post-processing passes to produce the final visual result. Post-processing passes are executed in order of their addition/insertion. The last pass is automatically rendered to screen. Import EffectComposer is an add-on, and must be imported explicitly. See Installation / Addons. import { EffectComposer }… Continue reading EffectComposer

DRACOExporter

An exporter to compress geometry with the Draco library. 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. Standalone Draco files have a .drc extension, and contain vertex positions, normals, colors, and other attributes. Draco… Continue reading DRACOExporter

Node-Based Workflow

In Polygonjs, you create 3D scenes by connecting nodes together. Some nodes help you generate geometries, others create materials, add behaviors to the scene objects, or handle user inputs. Each node does one thing and does it well. This allows you to create your scene in a non destructive workflow, where you can try ideas without impacting the rest of your… Continue reading Node-Based Workflow

glTF Transform

glTF Transform supports reading, editing, and writing 3D models in glTF 2.0 format. Unlike 3D modeling tools — which are ideal for artistic changes to geometry, materials, and animation — glTF Transform provides fast, reproducible, and lossless control of the low-level details in a 3D model. The API automatically manages array indices and byte offsets, which… Continue reading glTF Transform

MatCaps

MatCap (Material Capture, also known as LitSphere) are complete materials, including lighting and reflections, so you can add it to an object and not have any need for, well, lighting and reflections. MatCaps allows you to create a surface material and lighting environment simply by painting an object so that it looks like how you want your… Continue reading MatCaps

Fluid Engine

The general Architecture of the engine is as follows: it has a Fluid Simulator class, which you need to properly initialize before use, and deintialize before you switch out of the scene or close the game, and Fluid GPU Resrouce class, where you need to do the same. Once you have the initialization behind you, you can build a… Continue reading Fluid Engine

Optimizing 360° Camera Rotation for Smooth Rendering in Three.js

Rotating the camera in a 360-degree environment is a common feature in immersive experiences like virtual tours, games, and XR applications. However, poorly implemented camera rotation can cause jittering, stuttering, or performance degradation, especially when rendering high-resolution environments or complex geometry. This article covers best practices and techniques for achieving smooth and optimized 360° camera… Continue reading Optimizing 360° Camera Rotation for Smooth Rendering in Three.js

Code Structuring Best Practices for Three.js and WebXR Projects

This article outlines a scalable and maintainable code architecture for building WebXR experiences using Three.js. Proper structuring enhances team collaboration, improves performance, simplifies debugging, and allows smooth expansion of features and scenes over time. Why Code Structuring Matters Unstructured or monolithic code can quickly become unmanageable, especially in complex XR projects. By modularizing and organizing… Continue reading Code Structuring Best Practices for Three.js and WebXR Projects

Texture Compression Using KTX2 for Optimized WebGL Performance in Three.js

This article describes how to compress textures using KTX2 format and integrate them into a Three.js pipeline. Texture compression is a critical optimization step in reducing VRAM usage, improving performance, and increasing compatibility across desktop, mobile, and XR platforms. Why Texture Compression Matters Uncompressed textures are one of the biggest consumers of GPU memory. A… Continue reading Texture Compression Using KTX2 for Optimized WebGL Performance in Three.js