Public
Edited
Apr 24
Importers
Insert cell
Insert cell
canvas = html`<canvas></canvas>`
Insert cell
Insert cell
gui = {
const gui = new GUI({
container: debugUI,
width: width / 2,
title: "Debug Panel"
});

const toggleFolder = gui.addFolder("Toggle");
toggleFolder.add(material, "wireframe").name("Wireframe");

gui
.addColor(debugObj, "color")
.name("Color")
.onChange(() => material.color.set(debugObj.color));

invalidation.then(() => gui.destroy());

return gui;
}
Insert cell
debugObj = ({
color: "#ff0000"
})
Insert cell
geometry = {
return new THREE.BoxGeometry(1, 1, 1);
}
Insert cell
material = {
return new THREE.MeshBasicMaterial({
color: debugObj.color,
wireframe: false
});
}
Insert cell
sketch.addMesh(geometry, material)
Insert cell
sketch = new Sketch({ container: canvas, width: width })
Insert cell
class Sketch {
constructor(configs) {
this.container = configs.container;
this.width = width;
this.height = (width * 9) / 16;

this.scene = new THREE.Scene();

// prettier-ignore
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();

// Update controls
this.controls.update();

// External animation handler
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();
};
}
Insert cell
import { THREE, OrbitControls, GUI, gsap } from "@muxingchen/libraries-import"
Insert cell

Purpose-built for displays of data

Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
Learn more