Drawing 3D Cylinders in p5.js with cylinder()
cylinder() is a built-in function in p5.js for rendering 3D cylinders. The geometry consists of two circular caps (top and bottom) and a curved lateral surface, all constructed from triangular faces—a standard approach in 3D graphics.
Important: This function only works when the canvas is initialized in WebGL mode. Attempting to use it in the d ...
Posted on Mon, 25 May 2026 21:51:53 +0000 by iacataca
Creating and Animating 3D Boxes in p5.js with box()
The box() function is the simplest03 way to generate a 3D solid in p5.js. It produces a cuboid (or cube) with six rectangular faces. All drawing must happen inside a WebGL canvas, otherwise the object will not appear.
function setup() {
createCanvas(400, 400, WEBGL);
}
function draw() {
background(240);
orbitControl();
box();
}
Drag t ...
Posted on Wed, 20 May 2026 18:42:32 +0000 by orionellis
Basic Object Animations in Three.js: Translation, Rotation, Scaling, and Bouncing
Core Setup
Before implementing ainmations, initialize the essential Three.js components: a scene, perspective camera, WebGL renderer, a yellow cube mesh, and an axis helper for spatial reference.
import * as THREE from 'three';
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(
75,
window.innerWidth / window.inne ...
Posted on Tue, 19 May 2026 11:30:05 +0000 by hurricane
Generating Cylindrical and Conical Surfaces with MATLAB's cylinder Function
The cylinder function in MATLAB generates coordinate data representing the surface of a cylinder. These coordinates are essential for creating three-dimensional visualizations using functions like surf or mesh.
Function Syntax and Behavior
The cylinder function produces x, y, and z coordinates for a unit cylinder. By default, it creates a cylin ...
Posted on Fri, 15 May 2026 19:35:57 +0000 by weekenthe9
Understanding Three.js Core Concepts: Coordinate Systems and Lighting
3D Coordinate System Visualization
Visualizing Coordinate Axes
THREE.AxesHelper() accepts a parameter that determines the length of the coordinate axis lines. You can adjust this value based on your scene requirements.
// AxesHelper: Visual reference for 3D axes
const axisIndicator = new THREE.AxesHelper(200);
scene.add(axisIndicator);
Imple ...
Posted on Wed, 13 May 2026 20:13:09 +0000 by VanHagar