Public
Edited
Feb 13, 2023
1 fork
// // Continuously updates
{
while (true) {
group.rotation.y += 0.001;
renderer.render(scene, camera);
yield null;
}
}
verticeCount = 6000
sampleGeometry = {
const vertices = [];
const tempPosition = new THREE.Vector3();
for (let i = 0; i < 6000; i++) {
sampler.sample(tempPosition);
vertices.push(tempPosition.x, tempPosition.y, tempPosition.z);
}
// sample geometry
const pointGeometry = new THREE.BufferGeometry();
pointGeometry.setAttribute(
"position",
new THREE.Float32BufferAttribute(vertices, 3)
);
// const pointsMaterial = new THREE.PointsMaterial({
// color: innColor,
// size: 0.03
// });
// Shader
const pointsMaterial = new THREE.RawShaderMaterial({
uniforms: {
uCanvasTexture: { value: canvasTexture },
uSize: { value: renderer.getPixelRatio() },
uColorInn: { value: innColor },
uColorOut: { value: outColor }
},
vertexShader: VertexShader,
fragmentShader: FragmentShader,
transparent: true,
depthTest: false,
depthWrite: false,
blending: THREE.AdditiveBlending
});
const points = new THREE.Points(pointGeometry, pointsMaterial);
return points;
}
// the instance mesh approach
// sampledPoints = {
// const tempPosition = new THREE.Vector3();
// const tempObject = new THREE.Object3D();
// for (let i = 0; i < 300; i++) {
// sampler.sample(tempPosition);
// tempObject.position.set(tempPosition.x, tempPosition.y, tempPosition.z);
// tempObject.scale.setScalar(Math.random() / 2 + .25);
// tempObject.updateMatrix();
// spheres.setMatrixAt(i, tempObject.matrix);
// }
// }
// spheres = {
// const sphereGeometry = new THREE.SphereGeometry(0.05, 6, 6);
// const sphereMaterial = new THREE.MeshBasicMaterial({
// color: 0xffa0e6
// });
// const spheres = new THREE.InstancedMesh(sphereGeometry, sphereMaterial, 300);
// return spheres;
// }
group = {
const group = new THREE.Group();
scene.add(group);
// group.add(sphere)
group.add(sampleGeometry);
return group;
}
scene = {
const scene = new THREE.Scene();
scene.background = new THREE.Color(0x001b42);
return scene;
}
THREE = {
const THREE = (window.THREE =
await require("three@0.130.0/build/three.min.js"));
await require("three@0.130.0/examples/js/controls/OrbitControls.js").catch(
() => {}
);
await require("three@0.130.0/examples/js/math/MeshSurfaceSampler.js").catch(
() => {}
);
// https://cdn.jsdelivr.net/npm/three@0.149.0/build/three.min.js
await require("three/examples/jsm/postprocessing/EffectComposer.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.
