HandsomeTan articles - 21 total
Understanding Transformation Matrices in Computer Graphics
Tanslate, rotate and scale are common operations in computer graphics , which are used to transfor...
WebGL - Coordinate systems
I was recently asked about coordinate systems used in WebGL, so I decided to summarize them...
Three.js: The Pitfall of Modifying Objects During traverse()
I encountered an issue when I tried to remove the scene's children using traverse() as shown...
three.js, all parameters about depth test
introduction to depth test: Simply put, 'depth test'(except transparent cases): if a object set...
Javascript - difference between var, let, and const
In the early days, var keyword is used usually to define a variable, but it would bring some...
CSS3: linear-gradient and radial-gradient
I have used many css3 properties before, but soon forgot about them because many of them are...
static and dynamic import directive
in Javascript, import directive has two ways for loading external scripts. The first is static...
Create a sphere with evenly distributed points with three.js
In fact, I have yet to find a way that all points are distributed uniformly. All the methods I have...
Instructions on using CSS2(3)DObject with Vue
Today I used CSS2DObject in a Vue project, but css styles didn't work on this CSS2DObject. After...
Notes on using ref and reactive in Vue
today, I used ref function to get a reference to an element and got a problem that the value of...
Homogeneous and Cartesian coordinates
In Computer Graphics, Cartesian coordinate is a common coordinate system, but for matrix calculation...
Explanation of the translateOnAxis() function in Three.js
translateOnAxis() takes two parameters: vector3 and distance. The first parameter indicates in which...
Conversion between Decimal and Binary
For integer parts, divide the integer by the k that need to be converted, then obtain the remainder,...
Linear algebra, How to calculate the distance from one point to a line
For this question, we usually think about a formula learned in junior high school: but there are...
A personal overview about Pixi.js, a 2D graphics library
before learning Pixi.js. I usually use the raw canvas API to draw 2D graphics. This is interesting,...
Css em, rem units compatible with mobile devices
Assuming the width of mobile design drafts is 750px, we can divide the width into 20 equal parts(a...
Using Promise in Javascript to solve aynchronous loading(image, css, js, etc.)
Sometimes we need to complete some operations after loading static resources. Using callback function...
Detailed explanation of Javascript event loop rules
As is well known, Javacript is a single thread language, but why can we use asynchronous operation?...
How to insert elments using Javascript
Element.append() or Element.apeendChild(). append is different from appendChild: it can pass not...
Three ways to mutate pinia's state value
the first method, directly assigning value(not recommended): useStore().stateItem = newVal. the...
An approach preventing blurry canvas on mobile app
In general, the content of canvas from pc to mobile will be enlarged or shrank, resulting incertain...