height = 650
cube = {
const geometry = new THREE.BoxGeometry(3, 3, 3);
const material = new THREE.MeshNormalMaterial({ color: 0xff0000 });
const cube = new THREE.Mesh(geometry, material);
cube.position.setX(-10)
return cube;
}
sphere = {
const material = new THREE.SphereGeometry(3, 10, 10, 0, 2 * Math.PI);
const geometry = new THREE.MeshBasicMaterial({ color: 0xff000 });
const sphere = new THREE.Mesh(geometry, material);
sphere.position.setX(10)
return sphere;
}
/**
* Breather Surface - Reference
* - https://en.wikipedia.org/wiki/Breather_surface
* - http://xahlee.info/surface/breather_p/breather_p.html
* - https://observablehq.com/@mcmcclur/examples-of-parametric-surfaces
*
* a = 0.4
* -13.2 <= u <= 13.2
* -37.4 <= v <= 37.4
*/
breather = (u0, v0, pos) => {
// const u = (u0 - 0.5) * urange * Math.PI;
// const v = (v0 - 0.5) * vrange * Math.PI;
const u = -urange + 2 * urange * u0;
const v = -vrange + 2 * vrange * v0;
// const u = -13.2 + 2 * 13.2 * u0;
// const v = -37.4 + 2 * 37.4 * v0;
const a = 0.4;
const r = 1 - a * a;
const w = Math.sqrt(r);
const denominator = a * (Math.pow(w * Math.cosh(a * u), 2) + Math.pow(a * Math.sin(w * v), 2));
const x = -u + (2 * r * Math.cosh(a * u) * Math.sinh(a * u)) / denominator;
const y = 2 * w * Math.cosh(a * u) * ((-w * Math.cos(v) * Math.cos(w * v)) - Math.sin(v) * Math.sin(w * v)) / denominator;
const z = 2 * w * Math.cosh(a * u) * ((-w * Math.sin(v) * Math.cos(w * v)) + Math.cos(v) * Math.sin(w * v)) / denominator;
// console.log(u0, v0);
// console.log(x, y, z);
pos.set(x, y, z);
}
breatherSurface = {
const geometry = new THREE.ParametricGeometry((u, v, pos) => breather(u, v, pos), segment, segment);
const material = new THREE.MeshNormalMaterial({
// size: 0.1,
// color: 0x00ff00,
// emissive: 0x0000ff,
// matalness: 0.1,
// roughness: 0.2,
wireframe: frame || false,
// side: THREE.DoubleSide,
});
const surfaceMesh = new THREE.Mesh(geometry, material);
cube.position.set(0);
return surfaceMesh;
}
{
scene.add(cube);
scene.add(breatherSurface);
}
update = () => {
breatherSurface.geometry = new THREE.ParametricGeometry((u, v, pos) => breather(u, v, pos), 30, 30);
breatherSurface.material.wireframe = frame;
}
{
while (true) {
cube.rotation.x += 0.01;
breatherSurface.rotation.y += 0.01;
// update();
console.log(performance.now())
renderer.render(scene, camera);
yield null;
}
}
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.
