Buffered scene graph property that allows weighted accumulation; used internally. Constructor new PropertyMixer( binding : PropertyBinding, typeName : string, valueSize : number ) Constructs a new property mixer. bindingThe property binding. typeNameThe keyframe track type name. valueSizeThe keyframe track value size. Properties .binding : PropertyBinding The property binding. .cumulativeWeight : number TODO Default is 0. .cumulativeWeightAdditive : number TODO Default is 0. .referenceCount : number TODO Default… Continue reading PropertyMixer
Author: Vishnu MR
create-threexrapp — Three.js + WebXR starter generator
This package scaffolds a ready-to-run Three.js + WebXR project that includes physics, a player controller, and VR helpers. Important: do NOT run npm i create-threexrapp my-app — that syntax installs packages and will not create a new project. Correct usage (recommended): Using npx (recommended): npx create-threexrapp my-app or via npm init: npm init create-threexrapp@latest my-app What the… Continue reading create-threexrapp — Three.js + WebXR starter generator
Swizzling work on the returned value of overloaded function
It always resolves the node type to that of the first function provided to overloadingFn. const f = overloadingFn([ // Swapping the functions produces different results. Fn(([x]) => x.mul(2)).setLayout({ name: ‘f_float’, type: ‘float’, inputs: [{ name: ‘x’, type: ‘float’ }] }), Fn(([x]) => x.mul(2)).setLayout({ name: ‘f_vec3’, type: ‘vec3’, inputs: [{ name: ‘x’, type: ‘vec3’ }] })… Continue reading Swizzling work on the returned value of overloaded function
Swizzling work on the returned value of overloaded function
Swizzling a node returned from an overloaded TSL function doesn’t work correctly. It always resolves the node type to that of the first function provided to overloadingFn. const f = overloadingFn([ // Swapping the functions produces different results. Fn(([x]) => x.mul(2)).setLayout({ name: ‘f_float’, type: ‘float’, inputs: [{ name: ‘x’, type: ‘float’ }] }), Fn(([x]) => x.mul(2)).setLayout({… Continue reading Swizzling work on the returned value of overloaded function
PCDLoader
import * as THREE from “three”; import { OrbitControls } from “three/addons/controls/OrbitControls.js”; import { useEffect, useMemo, useRef } from “react”; import { OBJLoader } from “three/addons/loaders/OBJLoader.js”; import { PCDLoader } from “three/examples/jsm/loaders/PCDLoader.js”; import { GUI } from “dat.gui”; import useSliderStore from “../store/store”; function ThreeScene() { // store // const index: number = 300; const sliderValue… Continue reading PCDLoader
VR – Look to Select
The simplest and possibly most common is the Google Cardboard style of VR which is basically a phone put into a face mask. This kind of VR has no controller so people have to come up with creative solutions for allowing user input. The most common solution is “look to select” where if the user… Continue reading VR – Look to Select
LatheGeometry
Creates meshes with axial symmetry like vases. The lathe rotates around the Y axis. Code Example const points = []; for ( let i = 0; i < 10; i ++ ) { points.push( new THREE.Vector2( Math.sin( i * 0.2 ) * 10 + 5, ( i – 5 ) * 2 ) ); }… Continue reading LatheGeometry
carto/api-client
carto/api-client JavaScript (and TypeScript) client library for CARTO APIs and framework-agnostic CARTO + deck.gl applications. Includes: Widget APIs … TBD Installation Install @carto/api-client: npm install –save @carto/api-client Documentation Fetching data Import vectorTableSource, vectorQuerySource, and other data source functions from the @carto/api-client package. These are drop-in replacements for the equivalent functions from the @deck.gl/carto package, and the same data source may be used with any number of layers… Continue reading carto/api-client
Billboards
A CanvasTexture to make labels / badges on characters. Sometimes we’d like to make labels or other things that always face the camera. Three.js provides the Sprite and SpriteMaterial to make this happen. function makePerson(x, labelWidth, size, name, color) { const canvas = makeLabelCanvas(labelWidth, size, name); const texture = new THREE.CanvasTexture(canvas); // because our canvas is likely not a power of… Continue reading Billboards
Fragment Nodes
Essentially, a node is a placeholder for a unit of GPU computation, a representation of anything from a basic arithmetic operation, a lighting algorithm, a struct, a line of code, a shader, or a series of post-process passes. The specifics of how any given node works aren’t really important to understand. Nonetheless, they are the… Continue reading Fragment Nodes