{
const renderer = new THREE.WebGLRenderer({
antialias: true,
preserveDrawingBuffer: true
});
renderer.setSize(width, width);
renderer.setPixelRatio(devicePixelRatio);
const scene = new THREE.Scene();
scene.background = new THREE.Color(0xffffff);
const cameraOptions = [-0.5, 0.5, 0.5, -0.5, -10000, 10000];
const camera = new THREE.OrthographicCamera(...cameraOptions);
camera.position.z = 100;
scene.add(camera);
const plane = new THREE.PlaneGeometry(1.0, 1.0);
const screen = new THREE.Mesh(plane, material);
scene.add(screen);
renderer.render(scene, camera);
const canvas = renderer.domElement;
return canvas;
}
uniforms = {
return {
res: { type: "v2", value: [width, width] }
};
}
gsFragmentShader = `
varying vec2 vUv;
void main() {
gl_FragColor = vec4(vUv, 1.0, 1.0);
}
`
vertexShader = `
varying vec2 vUv;
void main() {
gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
// Because we are using a Shader material, Threejs is adding some code to our shaders.
// uv will be available for free.
vUv = uv;
}
`
material = new THREE.ShaderMaterial({
uniforms: uniforms,
vertexShader: vertexShader,
fragmentShader: gsFragmentShader
})
THREE = {
const THREE = (window.THREE =
await require(`three@${THREE_VERSION}/build/three.min.js`));
await require(`tree@${THREE_VERSION}examples/js/controls/OrbitControls.js`).catch(
() => {}
);
return THREE;
}
THREE_VERSION = "0.99.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.
