We made this course for people interested in creating parametric geometry and 3D models in TypeScript programming language. Follow these lecture series to understand how things work and how to achieve your goals.
Made For Beginners
Free
TypeScript
Introduction To Programming 3D In TypeScript
TypeScript
Classes
Real world objects and their behaviours often get represented by their classes. This concept is very important in programming and we will discuss it in this lecture.
The dictionary definition of a class states that it is a set or category of things having some property or attribute in common and differentiated from others by kind, type, or quality. Keep this in mind while we will be talking about the concepts in this lecture.
The Code
This is the code that you should copy and paste into the editor. You can also type it in yourself. The code is explained in the video.
type Point3 = Bit.Inputs.Base.Point3;
enum planetColorEnum {
purple = "#ff00ff",
white = "#ffffff",
blue = "#0000ff",
}
class Planet {
private sphere: Bit.Inputs.OCCT.TopoDSSolidPointer;
private rings: Bit.Inputs.OCCT.TopoDSSolidPointer;
private ringsMesh: BABYLON.Mesh;
private planetRadius: number;
private color: planetColorEnum;
private center: Point3;
private ringRotationSpeed: number;
private ringRotationVector: BABYLON.Vector3;
constructor(planetRadius: number, ringRotationSpeed: number, center: Point3, color: planetColorEnum) {
this.planetRadius = planetRadius;
this.ringRotationSpeed = ringRotationSpeed;
this.center = center;
this.color = color;
this.ringRotationVector = BABYLON.Vector3.Normalize(new BABYLON.Vector3(Math.random(), Math.random(), Math.random()));
}
async instantiateAndDraw() {
await this.createSphere();
await this.createRings();
await this.draw();
}
rotateRings() {
if (this.ringsMesh) {
this.ringsMesh.rotateAround(new BABYLON.Vector3(...this.center), this.ringRotationVector, this.ringRotationSpeed);
}
}
private async createSphere() {
this.sphere = await bitbybit.occt.shapes.solid.createSphere({
radius: this.planetRadius,
center: this.center,
})
}
private async createRings() {
this.rings = await bitbybit.occt.shapes.solid.createCylinder({
radius: this.planetRadius * 1.5,
height: 0.05,
center: [this.center[0], this.center[1] - 0.025, this.center[2]]
})
}
private async draw() {
const drawOptions = new Bit.Inputs.Draw.DrawOcctShapeOptions();
drawOptions.drawEdges = false;
drawOptions.faceColour = this.color;
if (this.rings) {
this.ringsMesh = await bitbybit.draw.drawAnyAsync({
entity: this.rings,
options: drawOptions
});
}
if (this.sphere) {
await bitbybit.draw.drawAnyAsync({
entity: this.sphere,
options: drawOptions
})
}
}
}
const start = async () => {
const planets: Planet[] = [];
const planetPromises = [];
for (let i = 0; i < 200; i++) {
const paramX = getParamForCoordinate();
const paramY = getParamForCoordinate();
const paramZ = getParamForCoordinate();
const spaceSize = 100;
const coordX = Math.random() * spaceSize;
const coordY = Math.random() * spaceSize;
const coordZ = Math.random() * spaceSize;
const planetColor = getRandomColor();
const planet = new Planet(Math.random() * 3, Math.random() / 40, [paramX * coordX, paramY * coordY, paramZ * coordZ], planetColor);
planetPromises.push(planet.instantiateAndDraw());
planets.push(planet);
}
await Promise.all(planetPromises);
bitbybit.time.registerRenderFunction(() => {
planets.forEach(planet => {
planet.rotateRings();
})
});
}
function getParamForCoordinate() {
const decisionMaker = Math.random();
let param = 1;
if (decisionMaker > 0.5) {
param = -1;
}
return param;
}
function getRandomColor() {
const decisionMaker = Math.random();
let color = planetColorEnum.blue;
if (decisionMaker > 0.33 && decisionMaker < 0.66) {
color = planetColorEnum.purple;
} else if (decisionMaker >= 0.66) {
color = planetColorEnum.white;
}
return color;
}
start();
< PreviousFinish >Course lectures
These are all the lectures of the course. Navigate freely between them by clicking.
Approximate Time Required: 171 minutes
