class Sketch {
constructor(configs) {
this.container = configs.container;
this.width = width;
this.height = (width * 9) / 16;
this.scene = new THREE.Scene();
this.camera = new THREE.PerspectiveCamera(75, this.width / this.height, 0.1, 100);
this.camera.position.z = 3;
this.controls = new OrbitControls(this.camera, this.container);
this.controls.enableDamping = true;
this.renderer = new THREE.WebGLRenderer({
canvas: this.container,
antialias: true
});
this.renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
this.animateCallback = null;
this.clock = new THREE.Clock();
this.resize();
this.render();
}
addMesh = (geometry, material, name = "mesh") => {
const mesh = new THREE.Mesh(geometry, material);
mesh.name = name;
this.scene.add(mesh);
return this;
};
getMesh = (name) => this.scene.getObjectByName(name);
removeMesh = (name) => {
const target = this.scene.children.find(
(item) => item.isMesh && item.name === name
);
if (target) {
this.scene.remove(target);
console.log(this.scene.children);
target.geometry?.dispose();
console.log(target.geometry, target.material);
target.material?.dispose();
}
return this;
};
removeAllMeshes = () => {
this.scene.children
.filter((item) => item.isMesh)
.forEach((mesh) => {
this.scene.remove(mesh);
mesh.geometry?.dispose();
mesh.material?.dispose();
});
this.renderer.renderLists.dispose();
return this;
};
setAnimationCallback = (fn) => {
this.animateCallback = fn;
return this;
};
render = () => {
const elapsedTime = this.clock.getElapsedTime();
this.controls.update();
if (typeof this.animateCallback === "function") {
this.animateCallback(elapsedTime, this.scene, this.camera);
}
this.renderer.render(this.scene, this.camera);
requestAnimationFrame(this.render);
};
resize = () => {
this.width = this.width;
this.height = (this.width * 9) / 16;
this.renderer.setSize(this.width, this.height);
this.camera.aspect = this.width / this.height;
this.camera.updateProjectionMatrix();
};
}