DEV Community: HandsomeTan

Three.js: How to determine if a point is inside a box?

HandsomeTan — Tue, 23 Sep 2025 00:31:34 +0000

Usually, a point's position is in world space. To check if it's inside a box, we need to transform it into the box's local coordinate system. We do this by multiply the point's world coordinates by box's inverse transformation matrix. This matrix converts from world space to the box's local space.

// get the box's inverse transformation matrix
const inverseMatrix = new THREE.Matrix4().copy(box.matrixWorld()).invert();

// transform the point to the box's local space
const localPoint = point.clone().applyMatrix4(inverseMatrix);

After this transformation, we get the point position relative to the box's local coordinates. Then. we simply check if the new local position is within the box's bounding dimensions(comparing against the box's min and max values). If all coordinates(x, y, z) are within the box's bounds, the point is inside.

// get the box's bounding box in local space
const boxGeometry = box.geometry;
boxGeometry.coumputeBoundingBox();
const bbox = boxGeometry.boundingBox;

// check if the point is within bounds
bbox.containsPoint(localPoint);

Understanding Transformation Matrices in Computer Graphics

HandsomeTan — Mon, 10 Mar 2025 04:31:42 +0000

Tanslate, rotate and scale are common operations in computer graphics , which are used to transfor objects.
All transformations mentioned above are based on matrix multiplication, where each transformation is represented by a matrix. As we know, matrix multiplication is not commutative, so the orders of transformations matters.
In many graphics application, an object's center is located at its coordinate origin. Rotation and scaling can change an object's coordinate system, while translation only changes the object's origin.
Let's consider the following css3 example:

.box {
width: 100px;
height: 100px;
background-color: #000;
transform:  rotateY(45deg) translateX(50px);
}

rotateY(45deg) : The coordnate system of box also applied this transformation, rotating 45 degrees clockwise, so its x-axis points at clockwise 45deg angle. Then, when applying translate(50px), the box will translate 50px along rotated x-axis instead of original horizontal axis.
Now consider another case:

.box {
width: 100px;
height: 100px;
background-color: #000;
transform:  scaleX(2) translateX(50px);
}

Would you think that box translate 50px or 100px on x-axis? the answer is 100px, because scale(2) doubles the size of x-axes, so translateX(50px) is actually equivalent to translate(100px).

By the way, the order of transformation in three.js is not affected by the order in which you set the properties because Three.js recalculates the object's transformation matrix lazily(only when needed, such as during rendering). In Three.js, the transformation matrix for an object is computed as follows:
Matrix=Translation×Rotation×Scale
This means that the object is scaled first, then rotated, and finally translated, regardless of the order in which you set the properties. However, if you use methods like translate(X/Y/Z) and rotate(X/Y/Z), the transformation for an object is applied immediately, so the order in which you set the properties matters in this case.

WebGL - Coordinate systems

HandsomeTan — Fri, 07 Mar 2025 09:50:48 +0000

I was recently asked about coordinate systems used in WebGL, so I decided to summarize them below:
There are six coordinate systems in WebGL:
Local space: an object made up of vertices has its own coordinate system, which is used to define the the position of its vertices relative to the object itself.
World space: The one consisting of all its objects, which is used for to define the position of an object within the scene
View space: It represent the field of view of a camera.similar to how human eyes perceive the world.
Clip space: a space defined by a specific viewing area
NDC(Normal Device Coordinate) space: a normalized space where coordinates range from -1 to 1 on the x and y axes.
Screen space: it is a final 2D space where objects are rendered onto the WebGL canvas.

Vertex postion is always represented by a four-dimensional vector (x, y, z, w) before being transformed into NDC space.
gl_position is sent to NDC space that uses left-handed coordinate system, and is then transformed into right-handed coordinate system through the multiplication of Model-View-Projection(mvp) matrix and gl_position

there is an illustration showing the transformation between coordinate systems in WebGL Programming Guide

Three.js: The Pitfall of Modifying Objects During traverse()

HandsomeTan — Thu, 27 Feb 2025 14:05:32 +0000

I encountered an issue when I tried to remove the scene's children using traverse() as shown below:

scene.traverse((child) => {
    if (child.isNew) {
        scene.remove(child); // Modifies the scene's children array
    }
});

running this code snippet, only one scene's child was removed. I ask deepseek what the issue was, and I summarize its reply as follows:
Object3D.traverse() is a dynamic process, so the length of the children array change dynamically. When a child is removed, the array length used by the iteration process will be decreased by one, causing the traversal iteration to go wrong.

the solution is to avoid modifying scene's children during traversal process:

const childrenToRemove = [];

// Collect children to remove
scene.traverse((child) => {
    if (child?.isNew) {
        childrenToRemove.push(child);
    }
});

// Remove collected children
for (const child of childrenToRemove) {
    scene.remove(child);
}

by the way, there is a note in Three.js official document: Note: Modifying the scene graph inside the callback is discouraged. honestly, I didn't fully understand what that meant until this issue occurred.

three.js, all parameters about depth test

HandsomeTan — Sat, 04 Jan 2025 03:47:24 +0000

introduction to depth test:
Simply put, 'depth test'(except transparent cases): if a object set depthTest to true, then its own depth value is required to compare with another in depth buffer that cooresponds to it in position, and if it is closer from screen(default comparasion method) and its depthWrite is set to true, so the depth value in depth buffer will be replaced with its depth value, so that it is capable to display on screen. If depthTest is set false, drawing order is that the next one covering the previous one.

parameters affected on depth test have: depthTest, depthWrite.
code snippet:

// square(the first rendered one)
const cubeGeometry = new THREE.BoxGeometry(200, 200, 200)
// square material
const cubeMaterial = new THREE.MeshLambertMaterial({
color: 0x00ff00
})
const cube = new THREE.Mesh(cubeGeometry, cubeMaterial)
scene.add(cube)

// cylinder(the next rendered one)
const cyGeometry = new THREE.CylinderGeometry(50, 50, 300, 32)
const cyMaterial = new THREE.MeshLambertMaterial({
color: 0xffff00
})
// cylinder material
const cylinder = new THREE.Mesh(cyGeometry, cyMaterial)
cylinder.rotateX(Math.PI / 2)
scene.add(cylinder)

depthTest: determine whether starting off depth test or not. its essence is calling gl.enable(gl.DEPTH_TEST).
for instance, if we want that the cylinder isn't covered by the square, we can set the depthTest parameter of the cylinder to false:

const cyMaterial = new THREE.MeshLambertMaterial({
...
depthTest: false
})

depthWrite: decide whether the depth buffer can be writable . its essence is calling gl.depthMask( false ).
and similar to the above, we can set depthWrite to false for the cylinder so that it isn't covered by the square:

const cubeMaterial = new THREE.MeshLambertMaterial({
...
depthWrite: false
})

Javascript - difference between var, let, and const

HandsomeTan — Sat, 21 Dec 2024 07:27:57 +0000

In the early days, var keyword is used usually to define a variable, but it would bring some troubles, such as variable obfuscation and memory leaks about variable, firstly, let's learn about variable scope in Javascript:
there are only global and local scopes in Javscript before ES6 and thease are distinguished by function region. variables defined within a function are local and external variables are global. Variables defined by var are declared at the top of their scope in advance and assigned the value underfined regardless of where they are declared. Finally, variable lookup is bottom-up, so variables within a function cannot be accessed by the functions.

After ES6, let and const keyword appeared while block scope was introduced. Block scope is differentiated by { }, so if, for, while, etc all have their own block scope, but must use let, const keyword declared variables and var hasn't block scope yet. At the same time, let, const haven't also hoisted-variable as var do.

CSS3: linear-gradient and radial-gradient

HandsomeTan — Wed, 11 Dec 2024 03:37:27 +0000

I have used many css3 properties before, but soon forgot about them because many of them are complicated to remember, so I wanna to write blog to make it easier to remember them.
so let me first explain line-gradient:
background-image: linear-gradient(direction, color-step1, color-step2, ....)

direction: using angle to indicate the gradient direction whose values can be an angle or one of them: to left, to right, to top, to bottom. to bottom(180deg) is the default.
color-step: the beginning color for gradient, consisting of two parts: color: valid css color value; length or percentage: the beginning position, not allowing negative value

examples(assuming height:100px)
background:linear-gradient(to bottom, red 0%,yellow 50%,green 100%); same to background:linear-gradient(180deg, red 0px, yellow 50px, green 100px);

repeatng-linear-gradient(): background: repeating-linear-gradient(red 0,red 10%,yellow 10%,yellow 20%);

thease parameters represent 0% - 10% from red to red, 10% - 20% from yellow to yellow, and repeat this effect to cover entire element size.

radial-gradient()
this function parametes consist of five parts: shape, size, the position of circle center, color, color position.

shape: ellipse(default) or circle;
size: I prefer to call it as the increassing direction of radius of radial gradient, with possible values: farthest-corner(default), closest-corner, furthest-side, closest-side.
position: the center position of the radial gradient, (50%, 50%) is the default;
color and color position: same to linear-gradient;

this effect is that the center position is located at (0,0) and gradient radius is equal to element's width;

And repeating-radial-gradient() is same to repeating-linear-gradient().

lastly, there is the compatibility of linear-gradient and radient-gradient(more about that on CanIuse website)

static and dynamic import directive

HandsomeTan — Tue, 10 Dec 2024 10:10:20 +0000

in Javascript, import directive has two ways for loading external scripts. The first is static import:import { exports.name } from outside.js that is an async approach, but only in loading phase. It is a sync approach during the execution phase and will block Javascript main thread. Note: static import directive can only be declared at the top level of the module.
The second is dynamic: import(url).then ().catch() that can be used anywhere you want. import() function returns a promise so its behavior is same to promise, which is executed in async method.

Create a sphere with evenly distributed points with three.js

HandsomeTan — Mon, 02 Dec 2024 03:14:39 +0000

In fact, I have yet to find a way that all points are distributed uniformly. All the methods I have found can only approach a uniform distribution, so I recommend a simpler method in my opinion:

const spherical = new THREE.Spherical();
spherical.radius = 5;
for (let i = 0; i < points; i++) {

  let phi = Math.acos(1.0 - (2.0 * i + 0.5) / points);
  let theta = Math.PI * (1 + Math.sqrt(5)) * i;

  spherical.phi = phi; 
  spherical.theta = theta; 
  const x = spherical.radius * Math.sin(spherical.phi) * 
  Math.cos(spherical.theta);
  const y = spherical.radius * Math.sin(spherical.phi) * 
            Math.sin(spherical.theta);
  const z = spherical.radius * Math.cos(spherical.phi);
......
}

I also don't understand this theoretical principle, because my math is bad, if you are intersting in this principle you can search for relevant information on Stack Overflow.

Instructions on using CSS2(3)DObject with Vue

HandsomeTan — Wed, 27 Nov 2024 15:11:23 +0000

Today I used CSS2DObject in a Vue project, but css styles didn't work on this CSS2DObject. After searching for some information, I found this problem is casued by scoped syntax sugar. Let's review the essence of scoped syntax sugar:

<style scoped>
.className {
...
}
</style>

after compilation, the codes above can be displayed as follows:

<style scoped>
.className[data-v-hash] {
...
}

and all elements in vue component have added data-v-hash attribute, except for elements we created by ourselves, so css styles with scoped syntax sugar do not work on these elements.

Notes on using ref and reactive in Vue

HandsomeTan — Tue, 26 Nov 2024 04:08:59 +0000

today, I used ref function to get a reference to an element and got a problem that the value of this ref object is null when using it in onMounted() function. Then, to solve this problem, I search for ref on official vue website, but I found a new function: useTemplateRef() instead of ref. At this point, I know the vue version has become 3.5+. Vue team has replaced ref fucntion with useTemplateRef() to get element references, but when I use this new fucntion in the code ref function is used, it still doesn't work. After Thinking a lot of time, I finally found the problem:

<script setup>
/*** code *** /
........code

function initThree() {
let container= useTemplateRef('container');
}

........code

onMounted(()=>{
container.appendChild(...);
})
/*** code *** /
</script>

this is because the setup syntactic sugar puzzles me. let's turn back the essence of setup:

<script>
/*** code *** /
........code
setup() {
function initThree() {
let container= useTemplateRef('container');
}
return { container };
}
........code

onMounted(()=>{
container.appendChild(...);
})
/*** code *** /
</script>

here I defined container variable inside an inner function, so that it cannot be accessed in the top scope of setup().

Homogeneous and Cartesian coordinates

HandsomeTan — Sat, 23 Nov 2024 14:20:43 +0000

In Computer Graphics, Cartesian coordinate is a common coordinate system, but for matrix calculation to be convenient we introduce Homogeneous coordinate system. The reasons are as below:
For a example of two-dimensional, assuming the position of a object is {x, y} and applying a translation operation to this object to obtain a new position: {x + tx, y + ty}, which is a manual calculation method. Matrix multiplication is a method used by computers for coordinate transformation, but whether to use tow-dimensional or three-dimensional, multiplication doesn't work on translation operation. So we bring in additional one dimension, whose value is usually 1, so the coordinate of object in two-dimensional is {x, y, w}. The conversion formula between homogeneous coordinates({x, y, w}) and Rectangular coordinates({X, Y}) is X = x/w, Y = y/w, Now we can use translation operation for martix multiplication:

in this way, all of transform opertions can be finished through matrix multiplication, thereby diminishing computational costs.
By the way, homogeneous coordinate also address the problem of two parallel lines intersecting. We assume the following situation:

this equation have no solution in Euclid space because they are parallel mutually. In Perspective space, we use homogeneous coordinate(x/w, y/w) instead of x,y:

there is a solution: (x, y, 0) represents thet intersection of two parallel lines at this point, which represents the position at infinity.