Public
Edited
Dec 26, 2023
1 star
{
const renderer = new THREE.WebGLRenderer({ antialias: true });
// see: https://observablehq.com/@observablehq/invalidation
invalidation.then(() => renderer.dispose());
renderer.setSize(width, height);
renderer.setPixelRatio(devicePixelRatio);
const controls = new THREE.OrbitControls(camera, renderer.domElement);
controls.addEventListener("change", () => renderer.render(scene, camera));
let off = 0;
const inc = 0.01;
const scale = d3.scaleLinear().domain([-1, 1]).range([0, 1]);
while (true) {
//sphere.rotation.x += 0.005;
//sphere.rotation.y += 0.005;
sphere.position.x = scale(simplex.noise3D(off, off, off));
sphere.position.y = scale(simplex.noise3D(off, off * 0.1, off));
sphere.position.z = scale(simplex.noise3D(off, off, off * 0.1));
renderer.render(scene, camera);
yield renderer.domElement;
off += inc;
}
/*
renderer.render(scene, camera);
return renderer.domElement;
*/
}
simplex.noise2D(1, 2)
scene = {
const scene = new THREE.Scene();
scene.background = new THREE.Color(0x000000);
//scene.add(cube);
scene.add(sphere);
scene.add(new THREE.AxesHelper(10));
return scene;
}
sphere = {
const geometry = new THREE.SphereGeometry(0.2);
const material = new THREE.MeshBasicMaterial({
color: 0xffffff,
wireframe: true
});
const materialNormal = new THREE.MeshNormalMaterial();
const sphere = new THREE.Mesh(geometry, materialNormal);
sphere.position.x = 0;
sphere.position.y = 0;
sphere.position.z = 0;
return sphere;
}
line = {
const material = new THREE.LineBasicMaterial({ color: 0xcc11ff });
const points = [];
points.push(new THREE.Vector3(0, 0, 0));
//points.push(new THREE.Vector3(0, 1, 0));
// points.push(new THREE.Vector3(2, 2, 2));
points.push(new THREE.Vector3(2, 0, 2));
const geometry = new THREE.BufferGeometry().setFromPoints(points);
const line = new THREE.Line(geometry, material);
return line;
}
cube = {
const material = new THREE.MeshNormalMaterial();
const geometry = new THREE.BoxGeometry(1, 1, 1);
return new THREE.Mesh(geometry, material);
}
camera = {
const fov = 50;
const aspect = width / height;
const near = 1;
const far = 1000;
const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
camera.position.z = 2;
camera.position.y = 2;
camera.position.x = 2;
return camera;
}
height = 400
width = 800
THREE = {
const THREE = (window.THREE = await require("three@0.96/build/three.min.js"));
await require("three@0.96/examples/js/controls/OrbitControls.js").catch(
() => {}
);
return THREE;
}
simplex = new snoise()
p5Instance = new p5()
snoise = require("simplex-noise@2.4.0")
p5 = require("p5")
{
const renderer = new THREE.WebGLRenderer({antialias: true});
const controls = new THREE.OrbitControls(camera, renderer.domElement);
invalidation.then(() => (controls.dispose(), renderer.dispose()));
renderer.setSize(width, height);
renderer.setPixelRatio(devicePixelRatio);
controls.addEventListener("change", () => renderer.render(scene, camera));
renderer.render(scene, camera);
return renderer.domElement;
}
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.
