{
renderer.setSize(width, height);
renderer.setPixelRatio(devicePixelRatio);
const container = html`<div style="height:500px; position: relative; overflow: hidden;">
${renderer.domElement}`;
try {
while (true) {
render(scene, camera);
yield container;
}
} finally {
renderer.dispose();
}
}
camera = new THREE.PerspectiveCamera(27, width / height, 5, 3500)
renderer = new THREE.WebGLRenderer();
scene = new THREE.Scene()
init()
function init() {
camera.position.z = 2750;
scene.background = new THREE.Color(0x050505);
//scene.fog = new THREE.Fog(0x050505, 2000, 3500);
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(width, height);
window.addEventListener('resize', onWindowResize, false);
}
points = {
var particles = 250000;
var geometry = new THREE.BufferGeometry();
var positions = [];
var colors = [];
var color = new THREE.Color();
var n = 1000,
n2 = n / 2; // particles spread in the cube
for (var i = 0; i < particles; i++) {
// positions
var x = Math.random() * n - n2;
var y = Math.random() * n - n2;
var z = Math.random() * n - n2;
positions.push(x, y, z);
// colors
var vx = x / n + 0.5;
var vy = y / n + 0.5;
var vz = z / n + 0.5;
color.setRGB(vx, vy, vz);
colors.push(color.r, color.g, color.b);
}
geometry.setAttribute(
'position',
new THREE.Float32BufferAttribute(positions, 3)
);
geometry.setAttribute('color', new THREE.Float32BufferAttribute(colors, 3));
geometry.computeBoundingSphere();
var material = new THREE.PointsMaterial({
size: 10,
vertexColors: THREE.VertexColors
});
let p = new THREE.Points(geometry, material);
scene.add(p);
return p;
}
function onWindowResize() {
camera.aspect = width / height;
camera.updateProjectionMatrix();
renderer.setSize(width, height);
}
function render(scene, camera) {
points.rotation.x += 0.001;
points.rotation.y += 0.002;
renderer.render(scene, camera);
}
THREE = require("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.
