The PolarGridHelper is an object to define polar grids. Grids are two-dimensional arrays of lines. Code Example const radius = 10; const sectors = 16; const rings = 8; const divisions = 64; const helper = new THREE.PolarGridHelper( radius, sectors, rings, divisions ); scene.add( helper ); Constructor PolarGridHelper( radius : Number, sectors : Number, rings : Number, divisions… Continue reading PolarGridHelper
Author: Vishnu MR
Color management in three.js
Definitions Linear-sRGB / THREE.LinearEncoding: Linear transfer functions, Rec. 709 primaries, D65 white point. sRGB / THREE.sRGBEncoding: sRGB transfer functions, Rec. 709 primaries, D65 white point. Best practices Textures with color data (.map, .emissiveMap, …) should be configured with .encoding = sRGBEncoding. Non-color textures use LinearEncoding. Exceptions exist for some formats (like OpenEXR), which typically use LinearEncoding for color data. Vertex colors should… Continue reading Color management in three.js
Earcut
An implementation of the earcut polygon triangulation algorithm. The code is a port of mapbox/earcut. Methods .triangulate ( data, holeIndices, dim ) : Array data — A flat array of vertex coordinates. holeIndices — An array of hole indices if any. dim — The number of coordinates per vertex in the input array. Triangulates the given shape definition… Continue reading Earcut
sharing geometry and transforms between BatchedMesh
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
Allow controlling traverse flow
Make traverse and the rest of the family respect special return values. The most important (in my opinion) would be the ability to ignore the children. For example: // Somewhere in Three.js code. Could be replaced with an enum-style definition const IGNORE_CHILDREN = new Symbol(‘ignore_children’); const HALT_TRAVERSE = new Symbol(‘halt_traverse’); // I didn’t check this… Continue reading Allow controlling traverse flow
shadows to use alphaToCoverage
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
WebXRManager: Use reported XRView.eye for setting stereo layers
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
Combining Three.js, Rust, and WebAssembly
WebAssembly has been specifically the prospect of doing arithmetically-intensive operations with it, not unlike the fantastic physics engine Emscripten port Ammo.js. Compiling something like that is out of the scope of this little post (but should be getting easier!), and I’ve left some links at the bottom so you can clear more about WebAssembly if you’re interested.… Continue reading Combining Three.js, Rust, and WebAssembly
Multiple Canvases Multiple Scenes
A common question is how to use THREE.js with multiple canvases. Let’s say you want to make an e-commerce site or you want to make a page with lots of 3D diagrams. At first glance it appears easy. Just make a canvas every where you want a diagram. For each canvas make a Renderer. You’ll quickly… Continue reading Multiple Canvases Multiple Scenes
renderToScreen
Whether or not to render to the canvas instead the current destination render target. In most use cases you do not set this flag explicitly since the last pass in the pass chain is automatically rendered to screen. Let’s put together a basic example. We’ll start with the example from the article on responsiveness. To that… Continue reading renderToScreen