Author: Krishnaprasad C P

A class containing useful utility functions for scene manipulation. Import SceneUtils is an add-on, and must be imported explicitly. See Installation / Addons. import * as SceneUtils from ‘three/addons/utils/SceneUtils.js’; Methods .createMeshesFromInstancedMesh ( instancedMesh : InstancedMesh ) : Group instancedMesh — The instanced mesh. Creates a new group object that contains a new mesh for each instance of the given instanced… Continue reading SceneUtils

Import SkeletonUtils is an add-on, and must be imported explicitly. See Installation / Addons. import * as SkeletonUtils from ‘three/addons/utils/SkeletonUtils.js’; Methods .clone ( object : Object3D ) : Object3D Clones the given object and its descendants, ensuring that any SkinnedMesh instances are correctly associated with their bones. Bones are also cloned, and must be descendants of the object passed to this method.… Continue reading SkeletonUtils

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

Constructor for the GLSL program sent to vertex and fragment shaders, including default uniforms and attributes. Built-in uniforms and attributes Vertex shader (unconditional): // = object.matrixWorld uniform mat4 modelMatrix; // = camera.matrixWorldInverse * object.matrixWorld uniform mat4 modelViewMatrix; // = camera.projectionMatrix uniform mat4 projectionMatrix; // = camera.matrixWorldInverse uniform mat4 viewMatrix; // = inverse transpose of modelViewMatrix… Continue reading WebGLProgram

A KeyframeTrack is a timed sequence of keyframes, which are composed of lists of times and related values, and which are used to animate a specific property of an object. For an overview of the different elements of the three.js animation system see the “Animation System” article in the “Next Steps” section of the manual. In… Continue reading KeyframeTrack

What is a color space? Every color space is a collection of several design decisions, chosen together to support a large range of colors while satisfying technical constraints related to precision and display technologies. When creating a 3D asset, or assembling 3D assets together into a scene, it is important to know what these properties… Continue reading Color management

Let’s say you want to draw a line or a circle, not a wireframe Mesh. First we need to set up the renderer, scene and camera (see the Creating a scene page). Here is the code that we will use: const renderer = new THREE.WebGLRenderer(); renderer.setSize( window.innerWidth, window.innerHeight ); document.body.appendChild( renderer.domElement ); const camera = new THREE.PerspectiveCamera( 45, window.innerWidth… Continue reading Drawing lines Three js

There are often times when you might need to use text in your three.js application – here are a couple of ways that you can do so. 1. DOM + CSS Using HTML is generally the easiest and fastest manner to add text. This is the method used for descriptive overlays in most three.js examples.… Continue reading Creating text THREEJS