Computer Graphics & Visualization @ufrj.br
image = loadImage(await randomImage(512, 512, 'butterfly'))
texture = {
let tex = new THREE.CanvasTexture(image);
tex.wrapS = tex.wrapT = THREE.RepeatWrapping;
tex.offset.set(uoffset, voffset);
tex.repeat.set(urepeat, vrepeat);
return tex;
}
plane = {
const geometry = new THREE.PlaneGeometry();
const material = new THREE.MeshBasicMaterial({
color: 0xffffff,
side: THREE.DoubleSide,
map: texture
});
const plane = new THREE.Mesh(geometry, material);
return plane;
}
renderer = new THREE.WebGLRenderer({
canvas: html`<canvas width=640 height=480>`
})
camera = {
let camera = new THREE.PerspectiveCamera(60, 4 / 3, 0.1, 100);
camera.position.set(0, 0, 1.5);
return camera;
}
light = {
let light = new THREE.DirectionalLight(0xffffff, 1);
light.position.set(1, 1, 10);
return light;
}
scene = {
let scene = new THREE.Scene();
scene.background = new THREE.Color(0xCCCCCC);
scene.add(plane);
scene.add(light);
return scene;
}
controls = new THREE.OrbitControls(camera, renderer.domElement)
{
for (let frame = 0; ; frame++) {
renderer.render(scene, camera);
yield frame;
}
}
THREE = {
const THREE = (window.THREE = await require('three@0.128'));
await require('three@0.128/examples/js/controls/OrbitControls.js').catch(
() => {}
);
await require('three@0.128/examples/js/controls/TrackballControls.js').catch(
() => {}
);
return THREE;
}
async function randomImage(sizeOrWidth = null, height = sizeOrWidth, term='flower') {
const size = sizeOrWidth ? `/${+sizeOrWidth}x${+height}` : '';
return (await fetch(`https://source.unsplash.com/${+sizeOrWidth}x${+height}/?${term}`, {
method: 'head',
cache: 'no-store',
})).url;
}
function loadImage(src) {
const img = DOM.element('img', { crossorigin: 'anonymous', src });
return img.decode().then(() => img);
}
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.
