{
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;
}
scene = {
const scene = new THREE.Scene();
scene.background = new THREE.Color(0xffffff);
scene.add(mesh);
return scene;
}
mesh = {
const material = new THREE.ShaderMaterial({
uniforms: uniforms,
vertexShader: vertexShader,
fragmentShader: gsFragmentShader,
side: THREE.DoubleSide
});
const geometry = new THREE.PlaneGeometry(1, 1, 32, 32);
return new THREE.Mesh(geometry, material);
}
camera = {
const fov = 75;
const aspect = width / height;
const near = 0.1;
const far = 100;
const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
camera.position.set(0.25, 0.25, 1);
camera.lookAt(new THREE.Vector3(0, 0, 0));
return camera;
}
height = 600
gsFragmentShader = `
varying vec2 vUv;
void main() {
gl_FragColor = vec4(vUv, 1.0, 1.0);
}
`
uniforms = {
return {
res: { type: "v2", value: [width, width] }
};
}
THREE = {
const THREE = (window.THREE =
await require(`three@${T_VERSION}/build/three.min.js`));
await require(`three@${T_VERSION}/examples/js/controls/OrbitControls.js`).catch(
() => {}
);
return THREE;
}
T_VERSION = "0.146.0"
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.
