Data Scientist looking for awesome code
Public
Edited
Apr 30, 2023
{
// const controls = new THREE.OrbitControls(camera, renderer.domElement);
// invalidation.then(() => (controls.dispose(), renderer.dispose()));
// controls.addEventListener("change", () => renderer.render(scene, camera));
// while (true) {
// for(let geo of geos){
// geo.rotation.x += 0.01;
// geo.rotation.y += 0.01;
// }
// renderer.render(scene, camera);
// yield renderer.domElement;
// }
renderer.render(scene, camera);
yield renderer.domElement;
}
geos = [
origin,
vertices,
cardMesh
].flat(Infinity);
vertices = {
return zValues.flatMap(z => {
const innerVertices = widthCoordinates.flatMap(
(x, i) => heightCoordinates.map(
(y, j) => {
const color = `rgb(${Math.round(100*(i+1)/widthCoordinates.length)}%, ${Math.round(100*(j+1)/heightCoordinates.length)}%, 100%)`
console.log(color);
return Sphere(x, y, z, 0.1, color);
}
)
);
const bottomSquares = widthCoordinates.map(x => Sphere(x, -(innerHeight / 2 + cardRadius), z, 0.1, '#32a852'));
const topSquares = widthCoordinates.map(x => Sphere(x, innerHeight / 2 + cardRadius, z, 0.1, '#32a852'));
const leftSquares = heightCoordinates.map(y => Sphere(-(innerWidth/2 + cardRadius), y, z, 0.1, '#eb4034'));
const rightSquares = heightCoordinates.map(y => Sphere(innerWidth/2 + cardRadius, y, z, 0.1, '#eb4034'));
// Corners
const signs = [-1, 1];
const corners = signs.map(verticalSign => signs.map(horizontalSign => {
const vertices = [];
for (let i = 1; i < cornerSegments; ++i) {
const angle = i * Math.PI / (2 * cornerSegments);
const x = horizontalSign * (innerWidth / 2 + cardRadius * Math.cos(angle));
const y = verticalSign * (innerHeight / 2 + cardRadius * Math.sin(angle));
vertices.push(Sphere(x, y, z, 0.1, "#fcba03"))
}
return vertices;
})
);
return [
innerVertices,
bottomSquares,
topSquares,
leftSquares,
rightSquares,
corners
];
})
}
heightCoordinates
widthCoordinates
innerVertices = widthCoordinates.flatMap(
(x, i) => heightCoordinates.map(
(y, j) => {
return [x, y, 0.5];
}
)
);
[
]
cardGeometry = {
const geometry = new THREE.BufferGeometry();
const vertices = new Float32Array([
innerVertices[0], // v0
innerVertices[heightSegments+1],
innerVertices[heightSegments+2],
innerVertices[1],
].flat(10));
const indices = [];
for (let i = 0; i < widthSegments; ++i) {
for (let j = 0; j < heightSegments; ++j) {
const horizontalOffset = 0;
const verticalOffset = 0;
return [
0, 1, 2,
2, 3, 0,
];
}
}
const indices = [
0, 1, 2,
2, 3, 0,
];
geometry.setIndex( indices );
geometry.setAttribute( 'position', new THREE.BufferAttribute( vertices, 3 ) );
return geometry;
}
cardMesh = {
const material = new THREE.MeshBasicMaterial();
const mesh = new THREE.Mesh(cardGeometry, material);
return mesh;
}
function Sphere(x, y, z, radius, color = 0x4287f5) {
const material = new THREE.MeshLambertMaterial({color: color})
const geometry = new THREE.SphereGeometry(radius, 32, 16);
const position = new THREE.Vector3(x, y, z);
const object = new THREE.Mesh(geometry, material);
object.position.copy(position);
return object
}
height = width * 0.75;
camera = {
const fov = 50;
const aspect = 1;
const near = 0.1;
const far = 100;
const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
camera.position.z = 10;
return camera;
}
light = {
const light = new THREE.DirectionalLight( 0xffffff, 2);
light.position.set( 0, 0, 1).normalize();
return light;
}
scene = {
const scene = new THREE.Scene();
scene.background = new THREE.Color('#454545');
for(let geo of geos){
scene.add(geo);
scene.add(light);
}
return scene;
}
cube = {
const material = new THREE.MeshNormalMaterial();
const geometry = new THREE.BoxGeometry(1, 1, 1);
return new THREE.Mesh(geometry, material);
}
renderer = {
const renderer = new THREE.WebGLRenderer({antialias: true});
renderer.setSize(height, height);
renderer.setPixelRatio(devicePixelRatio);
return renderer;
}
controls = {
const controls = new THREE.OrbitControls(camera, renderer.domElement);
controls.listenToKeyEvents( window );
controls.addEventListener("change", () => renderer.render(scene, camera));
invalidation.then(() => (controls.dispose(), renderer.dispose()));
return controls;
}
require("three@0.150.1/build/three.min.js")
THREE = {
const THREE = window.THREE = await require("three@0.130.0/build/three.min.js");
await require("three@0.130.1/examples/js/controls/OrbitControls.js").catch(() => {});
return THREE;
}
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.
