Published
Edited
Apr 3, 2019
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
function create3DGrid(){

let positions = [];
const geom = new THREE.BufferGeometry();

for (let x = -10; x < 10; x++) {
for (let y = -10; y < 10; y++){
for (let z = -10; z < 10; z++){
positions.push(x*2);
positions.push(y*2);
positions.push(z*2);
}
}
}
geom.addAttribute( 'position', new THREE.Float32BufferAttribute( positions, 3 ) );

const materialShader = new THREE.ShaderMaterial({
uniforms : {
time: { type: "f", value: 1.0 },
},
vertexShader: `
uniform float time;
void main() {
vec3 pos = position + vec3(cos(time+position.x)*3.0, sin(time+position.y)*3.0, 0);
gl_Position = projectionMatrix * modelViewMatrix * vec4(pos, 1.0);
gl_PointSize = cos(time*0.02 * position.z)* 8.0 + 10.0;
}
`,
fragmentShader: `
uniform float time;
void main() {
float x = min(gl_FragCoord.x/200.0, 1.);
float y = min(gl_FragCoord.y/200.0, 1.);
float z = min(gl_FragCoord.z/200.0, 1.);
gl_FragColor = vec4((sin(time)*x+1.0)*0.5, (cos(0.3*time)*y+1.0)*0.5, (sin(0.3*time)*z+1.0)*0.5, 0.8);
}
`
})
const particleSystem = new THREE.Points( geom, materialShader );
return particleSystem;
}
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell

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.
Learn more