Tag: threejs

Introduction to Theatre.js Theatre.js is a powerful animation library designed for creating and controlling animations in JavaScript, particularly for Three.js scenes. It provides a timeline-based approach, allowing users to keyframe animations and manage complex sequences with an intuitive UI. Why Use Theatre.js with Three.js? Three.js provides a solid foundation for rendering 3D graphics, but its… Continue reading Exploring Theatre.js for Three.js Animations

In the world of 3D graphics, creating realistic lighting and material effects is essential for immersing viewers in interactive visual experiences. One such effect is the glow, which adds a sense of radiance to objects within a scene. A new custom shader material, FakeGlowMaterial, allows developers to create highly customizable and visually striking glowing effects… Continue reading FakeGlow.js: Integration Bloom effects without using post processing in threeJS

Introduction In Three.js, object snapping refers to automatically aligning objects to predefined positions when they come close. This behavior is particularly useful in applications like 3D modeling tools, puzzle games, and VR experiences where precise positioning is necessary. The provided JavaScript code implements an object snapping system using a list of predefined positions and a… Continue reading Object Snapping in Three.js: A Detailed Guide

Add a “BatchedBufferGeometry” object that BatchedMesh references and stores all the geometry, draw ranges, etc. The BatchedMesh would still bookkeep the multidraw buffers, etc: const mesh1 = new BatchedMesh( maxGeometryCount, maxVertexCount, maxIndexCount, material1 ); const index = mesh1.geometry.addGeometry( … ); mesh1.setMatrixAt( … ); const mesh2 = new BatchedMesh( mesh1.geometry, material2 ); mesh1.setVisibilityAt( 0, false );… Continue reading sharing geometry and transforms between BatchedMesh

For a texture with transparency, alphaTest can be used, but if using alphaToCoverage instead, shadows lack alpha. This is problematic for cases like grass billboards where the docs recommend to use alphaToCoverage, but don’t explain how / what needs to be configured to get alpha on the shadow. Solution When writing to the shadow map,… Continue reading shadows to use alphaToCoverage

 XRView.eye when creating cameras for an XR device’s views – as well as finalising  for cameras beyond the first two. Remove the explicit cameraL and cameraR variables, as well as the separate cameras array in favour of directly using cameraXR.cameras, and relying entirely on the device’s reported XRViewerPose. The knock-on of this is that all the cameras are created on receiving the device’s first XRViewerPose, rather… Continue reading WebXRManager: Use reported XRView.eye for setting stereo layers

An exporter for the STL file format. STL files describe only the surface geometry of a three-dimensional object without any representation of color, texture or other common model attributes. The STL format specifies both ASCII and binary representations, with binary being more compact. STL files contain no scale information or indexes, and the units are arbitrary.… Continue reading STLExporter

Represents a lookup table for colormaps. It is used to determine the color values from a range of data values. Import Lut is an add-on, and must be imported explicitly. See Installation / Addons. import { Lut } from ‘three/addons/math/Lut.js’; Code Example const lut = new Lut( ‘rainbow’, 512 ); const color = lut.getColor( 0.5 );… Continue reading Lut

XREstimatedLight uses WebXR’s light estimation to create a light probe, a directional light, and (optionally) an environment map that model the user’s real-world environment and lighting. As WebXR updates the light and environment estimation, XREstimatedLight automatically updates the light probe, directional light, and environment map. It’s important to specify light-estimation as an optional or required feature when… Continue reading XREstimatedLight