{
const renderer = new THREE.WebGLRenderer({antialias: true});
invalidation.then(() => renderer.dispose());
renderer.setSize(width, height);
renderer.setPixelRatio(devicePixelRatio);
let time = 0;
while (true) {
objects.rotation.x += 0.01;
objects.rotation.y += 0.01;
objects.scale.setScalar(0.1 + 0.9 * Math.abs(Math.sin(time)));
renderer.render(scene, camera);
material.uniforms.time.value = time;
time+=0.01;
yield renderer.domElement;
}
}
objects = new THREE.Group();
scene = {
const scene = new THREE.Scene();
scene.background = new THREE.Color(0xffffff);
for(let i = 0; i < 5; i++){
const cube = new THREE.Mesh(geometry, material);
cube.position.x = Math.random();
cube.position.y = Math.random();
cube.position.z = Math.random();
objects.add(cube);
}
scene.add(objects);
return scene;
}
material = new THREE.ShaderMaterial({
// We need to pass some information down from the vertex to the fragment shader
vertexShader: `
varying vec2 vUv;
void main () {
vUv = uv;
gl_Position = projectionMatrix * modelViewMatrix * vec4(position.xyz, 1.0);
}
`,
// The vertex shader is defined as a GLSL source string
fragmentShader: `
// An incoming value from JavaScript
uniform float time;
// An incoming value from the vertex shader
varying vec2 vUv;
// Let's define PI constant
#define PI 3.14
void main () {
vec3 color = vec3(0.0);
color.r = abs(sin(vUv.x + time));
color.g = abs(cos(vUv.y + time));
color.b = abs(sin(vUv.y + time));
gl_FragColor = vec4(color, 1.0);
}
`,
// The uniforms allow us to send values down into the shader
uniforms: {
// Here is how we define a float value
time: { value: 0 }
}
});
geometry = new THREE.BoxGeometry(1, 1, 1);
camera = {
const fov = 45;
const aspect = width / height;
const near = 1;
const far = 1000;
const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
camera.position.z = 3;
return camera;
}
height = 600
THREE = require("three@0.99.0/build/three.min.js")
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.
